Viber DESIGN.md

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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 (#7D7A8C light / #9D98AC dark): Timestamps, list preview, contact subtitle.
• Text Tertiary (#A8A5B5 light / #6C6779 dark): 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 (#7360F2 light / #9B8CFF dark): Inline links inside bubbles.
• Selection Highlight (#7360F2 @ 18%): Text selection within a bubble.

Receipt Color Matrix

3. Typography Rules

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; or Nunito 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

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.

4. Component Stylings

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 #FFFFFF 16pt
• 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: #EDEBF5 light / #26232F dark
• Text: #1A1825 / #F3F1F8, Manrope 15pt w400
• Corner radius: 16pt, bottom-left corner at 5pt (tail)
• Alignment: leading; in groups, sender name in 15pt w600 #7360F2 above 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: #F0506E exclamation 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 11pt rgba(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 divider bottom
• Leading: back chevron (chevron.left 17pt #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 #F0506E pill)
• 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 = #7360F2 filled 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 / #26232F fill, 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 magnifyingglass 15pt tertiaryLabel, placeholder "Search"

Distinctive Components

Three-State Check Receipt — gray→gray→violet checks; the most-recognized Viber affordance.

Free Call Banner — purple gradient, always nudging toward free Viber-to-Viber calling; call-first DNA.

Sticker Market — a full storefront in the keyboard; stickers render large and borderless in-thread.

Reactions Strip — long-press a bubble → emoji row (thumbs-up led: 👍 ❤️ 😂 😮 😢 😡); reaction docks as a small chip.

Presence Dot — green #46C26A ring/dot on the avatar when the contact is online.

Call Screen — full purple gradient background, large circular avatar, accept (green) / decline (red) circular controls, duration timer in tabular figures.

Secret / Disappearing Message — a timer chip on the bubble; self-destructs after viewing.

Communities / Channels — broadcast surfaces with a distinct header and follower count.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 16, 20, 24, 32, 44
• Same-sender bubble gap: 4pt
• Sender-change gap: 8pt
• Thread horizontal inset: 14pt, bubble max width ~80%
• Bubble internal padding: 9pt vertical / 14pt horizontal

Grid & Container

• iPhone: full-width thread, 14pt gutters; bubble max ~80% of width
• Sticker artwork: ~96pt square, left/right aligned by sender
• iPad: split — chat list (~340pt) + conversation; conversation content max ~680pt centered
• Banners and headers: full-width, safe-area aware

Whitespace Philosophy

• Friendly density: 4pt within a run, 8pt on sender change — conversational but compact
• Purple is the only saturated surface: chrome stays neutral so the outgoing bubble and CTAs pop
• Call-first whitespace: the free-call banner and header call icons always have room — calling is never buried
• Stickers breathe: borderless ~96pt artwork floats free of bubble chrome for an expressive feel

Border Radius Scale

• Square (0pt): full-bleed media (rare)
• Tail (5pt): the pinched bubble corner on the sender's edge
• Subtle (10pt): search bar, list thumbnails
• Standard (14pt): free-call banner, cards, reply-quote container
• Bubble (16pt): the message bubble body radius
• Comfortable (20pt): sticker pack cards, sheets
• Pill (24pt / 500pt): primary buttons, input field, badges
• Circle (50%): avatars, send button, call controls, presence dot

6. Depth & Elevation

Viber is mostly flat with soft, low shadows on floating surfaces and a signature purple gradient on call/banner.

Shadow Philosophy: Viber uses tinted purple shadows on brand surfaces (banner, sticker cards) so elevation feels on-brand rather than neutral. Floating menus and the reactions strip get a soft neutral shadow so they clearly hover. On dark mode shadows fade, so floating surfaces gain a faint 1pt divider border. The call screen and free-call banner are the only places a full purple→violet gradient appears.

Motion

• Bubble send: outgoing bubble slides up + scales 0.85 → 1.0 from the input field, spring(response: 0.32, damping: 0.78) + light haptic
• Receipt transition: sent → delivered → seen checks crossfade in 0.2s; seen recolors gray → violet with a subtle pulse
• Reactions strip: long-press (~450ms) → strip scales 0.7 → 1.0 spring; selecting docks the chip with a pop + soft haptic
• Sticker play: animated stickers loop (Lottie/APNG), auto-play on appear, ~2s loop
• Sticker market open: slides up from bottom over the keyboard, 0.3s ease-out
• Free-call banner: gentle entrance fade + 6pt slide-down; subtle shimmer on the gradient (optional)
• Incoming call: full-screen purple gradient fades in; accept/decline buttons rise with spring; ringer haptic loop
• Tab switch: instant; active-icon fill + color crossfade 0.15s
• Typing: "typing…" text in the header subtitle (Viber uses text, not dots, in many builds)
• Haptics: light impact on send, soft on reaction dock, success on call connect, warning on call decline

7. Do's and Don'ts

Do

• 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
• Use the purple→deep-violet (#59267C) gradient only on the call screen and free-call banner
• Use green #46C26A for online/accept, red #F0506E for 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #121118 (aubergine-tinted, not neutral)
• Outgoing bubble: #7360F2
• Incoming bubble: #EDEBF5 light / #26232F dark
• Bubble text (outgoing): #FFFFFF
• Text primary: #1A1825 light / #F3F1F8 dark
• Text secondary: #7D7A8C light / #9D98AC dark
• Seen receipt (violet): #8F7DF7
• Sent/delivered receipt: #A8A5B5 → #7D7A8C
• Free-call banner gradient: #7360F2 → #59267C
• Online / accept: #46C26A
• Decline / unread badge: #F0506E
• Link: #7360F2 / #9B8CFF

Example Component Prompts

• "Build a Viber outgoing bubble in SwiftUI: background #7360F2, text #FFFFFF Manrope 15pt regular, padding 9pt vertical / 14pt horizontal, corner radius 16pt with .bottomTrailing at 5pt (tail) when last in a same-sender run. Right-aligned, max width 80%. Footer row: timestamp 10pt + the three-state check receipt, right-aligned. Incoming variant: background #EDEBF5 (light) / #26232F (dark), text label, tail on .bottomLeading."

• "Create the Viber three-state check receipt: a small ~16×12pt glyph after the timestamp. Sent = single check #A8A5B5/#6C6779; Delivered = double overlapping check #7D7A8C/#9D98AC; Seen = double check #8F7DF7 (violet). Crossfade between states in 0.2s; on Seen, recolor gray → violet with a subtle pulse."

• "Build the Viber 'Free Viber Call' banner: full-width card under the chat header, linear gradient #7360F2 → #59267C at 135°, 14pt corner radius, 12pt padding. Leading white phone glyph 18pt. Title 'Free Viber Call' Manrope 13pt w700 #FFFFFF, subtitle 11pt rgba(255,255,255,0.8). Trailing pill CTA 'Call' with rgba(255,255,255,0.22) fill, white 12pt w700. Soft purple-tinted shadow rgba(115,96,242,0.10) 0 2px 8px."

• "Render an in-thread Viber sticker: ~96pt borderless animated artwork (Lottie/APNG), no bubble background, aligned by sender. Below it, right-aligned for outgoing: timestamp 10pt + three-state check receipt. Auto-play the animation on appear with a ~2s loop."

• "Create the Viber compose bar: background #FFFFFF/#1C1A24, hairline top divider. Leading + 22pt attachment. Center: pill field 18pt radius, #F4F3F8/#26232F fill, placeholder 'Type a message' tertiaryLabel. Inner-trailing: emoji/sticker face glyph 22pt that opens the sticker market. Trailing: 36pt circular send button #7360F2 with a paper-plane glyph #FFFFFF; show a mic icon (hold-to-record voice) when the field is empty."

• "Render the Viber chat header: 56pt + safe area, hairline divider. Leading chevron.left 17pt #7360F2. Center-left: 36pt circular avatar + name Manrope 15pt w700 stacked over presence text 'online' 11pt #46C26A. Trailing: phone icon + video icon 22pt #7360F2 (call-first). Tapping the header opens the contact info screen."

Iteration Guide

1. Viber Purple #7360F2 is the entire brand — outgoing bubble, every CTA, tab selection, call screen; there is no second accent
2. Dark canvas is aubergine-tinted near-black #121118, NOT neutral gray — the purple cast ties to the brand
3. Incoming bubbles are neutral gray #EDEBF5 / #26232F; only the outgoing bubble is purple
4. The three-state check (1 gray sent, 2 gray delivered, 2 violet #8F7DF7 seen) is the signature receipt — the violet recolor is the moment
5. Viber is call-first: phone + video in every chat header, a dedicated Calls tab, and the purple→violet free-call banner
6. Stickers render as ~96pt borderless artwork in-thread — never wrapped in a bubble
7. Typography is a friendly rounded humanist sans (Manrope substitute) with heavy 700/800 titles and buttons
8. The purple→deep-violet #59267C gradient is reserved for the call screen and free-call banner only
9. Green #46C26A = online/accept; red #F0506E = decline/unread badge; everything else is neutral
10. Bubbles are flat ~16pt with a ~5pt tail; depth is soft tinted-purple shadows on banners and neutral shadows on floating menus