A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
3radius steps
4pxspacing base
Viber, in one page
Viber is a Rakuten-owned messaging and free-calling app whose entire visual identity is built around one color: Viber Purple (#7360F2). Where iMessage is blue and WhatsApp is green, Viber owns purple — it's in the logomark, the outgoing bubble, every primary button, the call screen, the tab-bar selection, and the signature "Free Viber Call" banner. The app's atmosphere is friendly, rounded, and call-first: Viber started as a free VoIP app before it was a messenger, and the UI never lets you forget that voice and video calling are one tap away. Open any conversation and a purple-gradient "Free Viber Call" banner often sits at the top, and the chat header always carries phone + video icons.
The canvas is clean white (#FFFFFF) in light mode and a deliberately aubergine-tinted near-black (#121118) in dark mode — Viber's dark theme isn't a neutral gray, it carries a faint purple cast that ties back to the brand. Conversations are a vertical stack of rounded bubbles: outgoing in Viber Purple #7360F2 with white text and a small ~5pt tail on the bottom-right; incoming in a light gray #EDEBF5 (light) / #26232F (dark) with primary-color text and a tail on the bottom-left. Bubbles use a ~16pt radius. A timestamp and a double-check receipt sit at the bottom-right of every outgoing message: one gray check = sent, two gray checks = delivered, two violet checks = seen. This three-state check system is one of Viber's most recognizable affordances.
The other signature pillar is the sticker market. Viber's emoji/sticker keyboard opens a full storefront of animated sticker packs — branded, seasonal, purchasable — and stickers render in-thread as large ~96pt borderless artwork (no bubble background). The emoji button in the input bar opens this market. Combined with the free-call banner and the green "online" presence dot, the sticker economy is core to Viber's identity. Other distinctive components: the Calls tab with a recent-calls list, Viber Out (paid landline calling) entry, Communities/Channels, message reactions (a thumbs-up-led emoji strip on long-press), and disappearing "secret" messages with a timer.
Typography is a friendly, slightly rounded humanist sans. Viber's brand face is a custom "Viber" type family; the closest free Google substitute is Manrope (geometric, rounded terminals, warm) or Nunito Sans. Hierarchy is product-UI: large screen titles, bold contact headlines, 15pt message body, small gray metadata. Color beyond purple is minimal — green #46C26A for online/accept-call, red #F0506E for decline/destructive and unread badges, neutral grays for chrome. Purple is the only saturated brand surface.
Key Characteristics:
- Viber Purple (
#7360F2) is the entire brand — outgoing bubble, every CTA, call screen, tab selection - White canvas (
#FFFFFF) light / aubergine-tinted near-black (#121118) dark - Rounded ~16pt bubbles: outgoing purple, incoming gray (
#EDEBF5/#26232F), small ~5pt tail - Three-state check receipt: 1 gray = sent, 2 gray = delivered, 2 violet (
#8F7DF7) = seen - "Free Viber Call" banner — purple→deep-violet (
#59267C) gradient, call-first messaging - Sticker market — full storefront keyboard; stickers render as ~96pt borderless in-thread artwork
- Call-first chrome — phone + video icons always in the chat header; dedicated Calls tab
- Green online presence dot (
#46C26A); red unread badges (#F0506E) - Reactions strip on long-press (thumbs-up led emoji row)
- Viber Out, Communities/Channels, secret/disappearing messages with timer
- Friendly rounded humanist sans (Viber brand face → Manrope substitute)
- Bottom tab bar: Chats / Calls / Explore / More with purple active tint
Do's and don'ts
Do
- Make Viber Purple
#7360F2the single brand color — outgoing bubble, every CTA, tab selection, call screen - Use white (
#FFFFFF) light canvas / aubergine-tinted near-black (#121118) dark — purple-cast, not neutral gray - Render outgoing bubbles purple, incoming gray (
#EDEBF5/#26232F), ~16pt radius with a ~5pt tail - Implement the three-state check: 1 gray = sent, 2 gray = delivered, 2 violet
#8F7DF7= seen - Keep calling one tap away — phone + video icons in every chat header, dedicated Calls tab, free-call banner
- Render stickers as large ~96pt borderless artwork in-thread, no bubble background
- Use the purple→deep-violet (
#59267C) gradient only on the call screen and free-call banner - Use green
#46C26Afor online/accept, red#F0506Efor decline/unread badges - Use a friendly rounded humanist sans (Viber face → Manrope), heavy weights for titles/buttons
- White text on purple bubbles, always
Don't
- Don't use a neutral gray dark canvas — Viber's dark mode is aubergine-tinted
#121118 - Don't tint incoming bubbles purple — they're neutral gray; only outgoing is brand purple
- Don't make the seen receipt gray — "Seen" is violet
#8F7DF7, that recolor is the signature - Don't wrap stickers in a bubble — they're borderless ~96pt artwork
- Don't bury calling behind menus — it's call-first; header + Calls tab + banner are mandatory
- Don't introduce a second brand accent — purple is it; green/red are semantic only
- Don't use thin type for titles/buttons — Viber's friendliness comes from heavy 700/800 weights
- Don't use a hard drop shadow on bubbles — bubbles are flat; only banners/menus elevate
- Don't put the purple gradient everywhere — reserve it for call screen + free-call banner
- Don't use black text on a purple bubble — outgoing text is always
#FFFFFF - Don't animate aggressively — motion is soft spring, 0.2–0.32s
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Viber design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Viber Purple: #7360f2
- The canvas is clean white: #ffffff
- Viber Purple Deep: #665cac
- Viber Purple Pressed: #5b4acc
- Viber Violet: #8f7df7
- Banner Deep Violet: #59267c
- Canvas White: #ffffff
- Incoming Bubble: #edebf5
- Surface Gray: #f4f3f8
- Row Pressed: #e9e7f2
Type:
- families: Viber, Brand, Manrope, Nunito Sans
- scale: 11, 13, 14, 15, 16, 17, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 14, 16, 24
Spacing: 4, 8, 9, 13
Rules:
- Make Viber Purple `#7360F2` the single brand color — outgoing bubble, every CTA, tab selection, call screen
- Use white (`#FFFFFF`) light canvas / aubergine-tinted near-black (`#121118`) dark — purple-cast, not neutral gray
- Render outgoing bubbles purple, incoming gray (`#EDEBF5` / `#26232F`), ~16pt radius with a ~5pt tail
- Implement the three-state check: 1 gray = sent, 2 gray = delivered, 2 violet `#8F7DF7` = seen
- Keep calling one tap away — phone + video icons in every chat header, dedicated Calls tab, free-call banner
- Render stickers as large ~96pt borderless artwork in-thread, no bubble background
Avoid:
- Don't use a neutral gray dark canvas — Viber's dark mode is aubergine-tinted `#121118`
- Don't tint incoming bubbles purple — they're neutral gray; only outgoing is brand purple
- Don't make the seen receipt gray — "Seen" is violet `#8F7DF7`, that recolor is the signature
- Don't wrap stickers in a bubble — they're borderless ~96pt artwork
- Don't bury calling behind menus — it's call-first; header + Calls tab + banner are mandatory
- Don't introduce a second brand accent — purple is it; green/red are semantic only
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Viber Purple (
#7360F2): The brand. Outgoing bubble, primary buttons, tab selection, call screen, send button, links. - Viber Purple Deep (
#665CAC): Logo wordmark, deeper purple in gradients and pressed surfaces. - Viber Purple Pressed (
#5B4ACC): Pressed state of purple controls. - Viber Violet (
#8F7DF7): Seen-receipt checks, lighter accent, gradient top stop, links on dark. - Banner Deep Violet (
#59267C): Bottom stop of the free-call banner gradient.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Thread background, primary light canvas. - Incoming Bubble (
#EDEBF5): Light lavender-gray incoming bubble. - Surface Gray (
#F4F3F8): Grouped list background, search field, settings. - Row Pressed (
#E9E7F2): Pressed conversation/list rows. - Divider (
#E4E2EC): Hairline separators between list rows and header.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#121118): Aubergine-tinted near-black thread background (NOT neutral gray). - Dark Surface 1 (
#1C1A24): Nav bar, input bar, tab bar, elevated surfaces. - Dark Surface 2 (
#26232F): Incoming bubble, search field, sheets. - Dark Divider (
#322F3C): Hairline separators on dark.
Text
- Text Primary Light (
#1A1825): Incoming bubble text, primary labels. - Text on Purple (
#FFFFFF): Outgoing bubble text — always white on purple. - Text Secondary (
#7D7A8Clight /#9D98ACdark): Timestamps, list preview, contact subtitle. - Text Tertiary (
#A8A5B5light /#6C6779dark): Single sent-check gray, placeholder, disabled. - Text Primary Dark (
#F3F1F8): Incoming bubble text and labels on dark.
Semantic
- Online / Accept Green (
#46C26A): Online presence dot, accept-call button, "delivered to Viber". - Error / Decline Red (
#F0506E): Decline-call, delete, destructive actions, unread count badge. - Seen Violet (
#8F7DF7): Two-check "Seen" receipt color. - Link (
#7360F2light /#9B8CFFdark): Inline links inside bubbles. - Selection Highlight (
#7360F2@ 18%): Text selection within a bubble.
Receipt Color Matrix
| State | Glyph | Color (Light) | Color (Dark) |
|---|---|---|---|
| Sending (clock) | clock | #A8A5B5 | #6C6779 |
| Sent | one check | #A8A5B5 | #6C6779 |
| Delivered | double check | #7D7A8C | #9D98AC |
| Seen | double check | #8F7DF7 | #8F7DF7 |
| Failed | exclamation | #F0506E | #F0506E |
Type scaleRead the full spec
Font Family
- Brand:
Viber— a custom friendly humanist sans with rounded terminals (proprietary; not redistributable). - Recommended Free Substitute:
Manrope(by Mikhail Sharanda, SIL OFL) — geometric humanist with soft, rounded feel that closely matches Viber's warmth; orNunito Sans(SIL OFL) as a rounder alternative. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Manrope', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: proportional by default; tabular in timestamps and call durations.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | Manrope | 32pt | 800 | 1.2 | -0.4pt | "Chats" / "Calls" screen title |
| Title 1 | Manrope | 26pt | 800 | 1.2 | -0.3pt | "Free Viber Call" / sheet headers |
| Title 3 | Manrope | 22pt | 700 | 1.25 | -0.2pt | Group name, large contact name |
| Headline | Manrope | 17pt | 700 | 1.3 | -0.2pt | Contact name in chat header / list row title |
| Body / Bubble | Manrope | 15pt | 400 | 1.32 | 0pt | Message text |
| Body Emphasis | Manrope | 15pt | 600 | 1.32 | 0pt | Sender name in group bubbles, mentions |
| List Preview | Manrope | 14pt | 500 | 1.35 | 0pt | Last-message preview in chat list |
| Footnote | Manrope | 13pt | 600 | 1.35 | 0pt | "Seen 9:41", "Delivered", section labels |
| Caption | Manrope | 11pt | 600 | 1.35 | 0.1pt | Timestamp separators, presence ("online") |
| Button | Manrope | 16pt | 700 | 1.0 | 0pt | Primary / call buttons |
| Tab Label | Manrope | 11pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Badge | Manrope | 11pt | 700 | 1.0 | 0pt | Unread count badges |
Principles
- Friendly and rounded: weights skew heavy (700/800 for titles and buttons) to feel approachable and confident, not corporate.
- Body stays light: message body at 15pt regular keeps the chat readable and dense.
- Dynamic Type supported: titles, headlines, body, list previews scale; timestamps, tab labels, badges, receipt glyphs stay fixed.
- White on purple is non-negotiable: outgoing bubble text is always
#FFFFFF. - Tracking near-zero: Manrope/Viber face is comfortable at default tracking; only tiny captions get a small positive value.
Components and layoutRead the full spec
Buttons
Primary Button
- Shape: Pill / rounded rectangle, 24pt corner radius (fully rounded for short labels)
- Background:
#7360F2 - Text:
#FFFFFF, Manrope 16pt weight 700 - Padding: 13pt vertical, 26pt horizontal
- Pressed:
#5B4ACC+ scale 0.98 - Disabled:
#7360F2@ 35% opacity
Call Button (Accept / Free Call)
- Shape: pill, 24pt radius (or 60pt circle on the call screen)
- Background:
#46C26A(accept/free) /#F0506E(decline) - Icon + text:
#FFFFFF, Manrope 15pt weight 700 - Used in the free-call banner CTA and the in-call accept/decline controls
Outline Button (secondary)
- Background: transparent
- Border: 1.5pt
#7360F2 - Text:
#7360F2(light) /#8F7DF7(dark), Manrope 15pt weight 700 - Corner radius: 24pt
- Pressed:
#7360F2@ 10% fill
Text Button
- Background: transparent
- Text:
#7360F2/#8F7DF7, Manrope 15pt weight 600 ("View Stickers", "Edit") - Pressed: opacity 0.5
Send Button (circular)
- 36pt circle, background
#7360F2, paper-plane glyph#FFFFFF16pt - When the field is empty it's a mic icon (push-to-talk voice message) instead
Message Bubble (the core atom)
Outgoing Bubble
- Background:
#7360F2 - Text:
#FFFFFF, Manrope 15pt w400 - Padding: 9pt vertical, 14pt horizontal
- Corner radius: 16pt, bottom-right corner at 5pt (tail) when last in a same-sender run
- Alignment: trailing, max width ~80% of thread
- Footer (inside or just below): timestamp 10pt + receipt checks, right-aligned
Incoming Bubble
- Background:
#EDEBF5light /#26232Fdark - Text:
#1A1825/#F3F1F8, Manrope 15pt w400 - Corner radius: 16pt, bottom-left corner at 5pt (tail)
- Alignment: leading; in groups, sender name in 15pt w600
#7360F2above the first bubble
Grouping
- Same sender consecutive: 4pt gap, only last bubble shows the tail
- Sender change: 8pt gap
- Day separator: centered 11pt caption,
secondaryLabel, 8pt vertical margin
States
- Sending: clock glyph receipt, bubble at ~70% opacity until ack
- Failed: red exclamation, tap to resend
- With reaction: small reaction chip docked at the bottom-near corner
- Sticker / GIF: rendered as ~96pt borderless artwork, no bubble background, timestamp+receipt below
- Reply quote: a thin purple left-bar + quoted snippet inside the bubble
Three-State Check Receipt
- Position: bottom-right of the outgoing bubble, after the timestamp
- Sent: single check,
#A8A5B5/#6C6779(~16×12pt) - Delivered: double overlapping check,
#7D7A8C/#9D98AC - Seen: double check,
#8F7DF7(violet) — the brand "they read it" moment - Failed:
#F0506Eexclamation circle
Free Viber Call Banner
- Position: top of the conversation (under the header) or in the call-promo card
- Background: linear gradient
#7360F2→#59267C(135°) - Corner radius: 14pt, 12pt internal padding
- Leading: white phone glyph 18pt
- Text: title "Free Viber Call" Manrope 13pt w700
#FFFFFF, subtitle 11ptrgba(255,255,255,0.8) - Trailing: pill CTA "Call" —
rgba(255,255,255,0.22)fill, white 12pt w700
Sticker Market
- Opened from the emoji/sticker button in the input bar
- Full-screen-width storefront panel above the keyboard
- Top: horizontal pack tabs (recent, owned, store) + a search field
- Body: grid of sticker packs; each pack a card with cover art + name + "Free"/price pill
- In-thread sticker: ~96pt borderless animated artwork, timestamp + receipt below, no bubble
Navigation
Chat Header
- Height: 56pt + safe area, hairline
dividerbottom - Leading: back chevron (
chevron.left17pt#7360F2) - Center-left: 36pt circular avatar + name (Manrope 15pt w700) stacked over presence ("online" 11pt
#46C26A) - Trailing: phone icon + video icon (22pt
#7360F2) — call-first - Tapping the header opens the contact/info screen
Chat List (Chats tab)
- Large title "Chats" (32pt w800), search field, compose FAB or nav button
- Row: 72pt — leading 52pt circular avatar with optional green presence dot, title (17pt w700), preview (14pt
secondaryLabel, 1-line), trailing timestamp (13pt) + unread count badge (red#F0506Epill) - Swipe: Delete (red), More
Bottom Tab Bar
- Height: 50pt + safe area, background
#FFFFFF/#1C1A24, hairline top divider - Tabs (4): Chats, Calls, Explore, More
- Icon 22pt; active =
#7360F2filled glyph + label; inactive =#A8A5B5/#6C6779 - Labels: Manrope 11pt w600 always shown; unread badge on Chats/Explore (red pill)
Input Fields
Compose Bar
- Background:
#FFFFFF/#1C1A24, hairline top divider, 8/16pt padding - Leading:
+22pt attachment (camera, gallery, file, location, contact) - Center: pill field — 18pt radius,
#F4F3F8/#26232Ffill, placeholder "Type a message"tertiaryLabel - Trailing-inner: emoji/sticker face glyph 22pt (opens sticker market)
- Trailing: 36pt circular send button (
#7360F2, paper-plane); mic when empty (hold-to-record voice)
Search Bar
- Height: 36pt,
#F4F3F8/#26232F, 10pt radius - Leading
magnifyingglass15pttertiaryLabel, placeholder "Search"
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max ~300pt; compact header (no Dynamic Island) |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above header |
| iPhone 15/16 Pro Max | 430pt | Wider bubbles (~344pt), larger sticker artwork |
| iPad (portrait) | 768pt | Split: chat list (~340pt) + conversation; content max ~680pt centered |
| iPad (landscape) | 1024pt+ | Persistent list + conversation; call screen full-pane |
Dynamic Type
- Titles, headline, body, list preview: full scale
- Timestamps, receipt glyphs, tab labels, badges, presence text: FIXED
- Sticker artwork: fixed ~96pt (does not scale with text)
Orientation
- Conversation supports rotation; bubbles reflow keeping the ~80% cap
- iPad keeps split view in both orientations; call screen uses the full pane
- Video call rotates to landscape with PiP support
Touch Targets
- Send /
+/ emoji buttons: 22–36pt glyph, 44pt hit - Bubble: full bubble is the long-press (reactions) target
- Reaction glyphs: 28pt glyph, 44pt hit
- Header call icons: 44pt hit each
- List row / tab: full-row / full-cell tap
Safe Area Handling
- Top: header respects safe area + Dynamic Island
- Bottom: input bar + tab bar respect home indicator; thread scrolls above keyboard
- Keyboard: sticker market and compose bar ride above the keyboard
- Sides: 14pt bubble gutters; full-bleed only for media
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-viber {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121118;
--heading-color: #121118;
--link-color: #624df0;
--link-hover-color: #391eec;
--border-color: #d4d4d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,17,24,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,17,24,0.12);
--header-bg: #121118;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656469;
--button-bg: #7360f2;
--button-text-color: #000000;
--button-hover-bg: #4931ee;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121118;
--button-secondary-hover-bg: #e3e2e3;
--button-secondary-border: 1px solid #d4d4d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121118;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/messaging/viber/DESIGN.md· 25.1 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.