Viber Design System Deep Dive

1. Brand Overview

Viber’s visual system is exactly what you’d expect from a global messaging and VoIP app, but with some quirks that make it theirs. This is a brand that’s been around long enough to know what works for UI clarity, yet they still throw in unexpected choices—like very soft purple tones instead of the sharper neon blues most chat apps go for.

The vibe? Friendly yet professional. It’s not “corporate SaaS” grey, but it’s also not “teen social” candy colors. Purple is the hero—it’s calming, distinct in the category, and consistent across their logo, buttons, and link accents. The rest of the palette is built out of restrained neutrals and muted functional colors. You can tell they care about contrast and legibility—there are strong dark greys for text, crisp whites for surfaces, and carefully chosen accent colors for links and CTAs.

Typography is all Roboto, straight from Google Fonts. That choice says “international, readable, works on any device.” No custom typeface here—accessibility and performance win over brand flourish. The type scale is sprawling, with weights from 100 to 700 and sizes from 54px down to 10px. They lean on weight and color to create hierarchy instead of fancy fonts.

Spacing follows an 8px logic, but they’re not religious about it—there are oddball values like 9.6px and 11.5px. This tells me they tweak for optical alignment rather than sticking to a rigid token set.

Overall, Viber’s design philosophy is functional brand expression: the purple is the signature, everything else is about usability, clarity, and adaptability across devices from low-end Androids to desktop apps. They’re not chasing visual trends—they’re anchoring on a system that works in a high-speed, high-frequency product.

2. Color System

2.1 Primary Colors

The main brand color is rgb(33, 37, 41) (#212529) according to the semantic primary in the data, but that’s clearly the UI “primary” in a semantic sense (used for text/nav backgrounds), not the marketing purple. The purple appears in multiple shades: #7360f2, #8074d6, #665cac, #574e92. These are the emotional hooks—the colors users associate with Viber.

The psychology here: Purple conveys creativity, individuality, but also calm. In messaging, it stands out against the blues (Messenger), greens (WhatsApp), and teals (Telegram). It’s less aggressive, more “personal space.”

Competitor comparison:

• WhatsApp uses green for trust and “go” signals.
• Messenger uses blue for tech and reliability.
• Viber’s purple differentiates in a saturated space—memorable in app grids.

2.2 Complete Palette

2.3 Color Relationships

Contrast-wise, #212529 on #ffffff is solid—about 14:1 contrast ratio (WCAG AAA). Purple (#7360f2) on white also passes easily. The lighter purple (#8074d6) is borderline for small text—use it for larger or bold elements.

Dark mode? The palette already has deep greys and purples; flipping surfaces from white to #212529 would work without massive adjustments. Accent purples would pop even more.

2.4 Usage Guide

Works well:

• Purple (#7360f2) on white.
• White text on purple buttons.
• Grey neutrals for text on white backgrounds.

Avoid:

• Light purple (#8074d6) on white for body text—low contrast.
• Green (#58a11a) on purple—clashes hard, use only for status.

3. Typography

3.1 Font Families

All text is Roboto, loaded from Google Fonts. No fallbacks specified in data, but standard practice is Roboto, sans-serif. No variable fonts. This keeps rendering predictable.

3.2 Type Scale

3.3 Hierarchy

They rely heavily on size jumps for hierarchy. 54px ultra-light headings feel airy, while 44px with weight 200 adds presence. Body/link text sits mostly at 15-16px, comfortable for reading. Captions dip to 10px—small, but fine for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base is roughly 8px, but with exceptions. Here’s the set:

4.2 Layout

Breakpoints are granular—from 400px up to 1280px. This suggests a responsive system that adjusts layout at many device widths, likely tuned for specific popular devices.

5. Visual Elements

Border Radius System

Values range from 1px to 50%, telling me they mix square and pill shapes.

Shadows

Only 4 shadows in data—low usage.

• rgb(153, 153, 153) 0px 2px 10px -3px
• rgb(199, 197, 199) -3px -3px 5px -2px
• rgb(199, 197, 199) 0px 0px 12px 2px
• rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Mostly subtle, soft shadows—no heavy drop shadows.

Borders

Mostly 1px solid in accent colors (purple, blue, grey). Borders are used for depth instead of shadows.

6. Components

6.1 Buttons

Variant 1: Purple outline

• Default: transparent bg, #665cac text/border, 30px radius, 0px vertical padding + 28px horizontal.
• Hover: #2285f7 text, white bg, 0.7 opacity, scale 1.1.
• Active: #8074d6 text, dark overlay bg.
• Focus: white text, blue focus ring, black border.

Variant 2: Green solid

• Default: #66b821 bg, white text, no border, 30px radius.
• Hover/Focus/Active similar to Variant 1—odd reuse of hover states.

Variant 3: Grey solid, green border

• Default: #efefef bg, #68b631 text/border, no radius.
• Hover: white text, #1eaedb bg.

Variant 4: White solid, purple text

• Default: white bg, #7360f2 text, 2px radius.
• Hover: white text, #1eaedb bg.

Variant 5: Purple solid

• Default: #7360f2 bg/border, white text, 2px radius.

6.2 Links

7 variants:

• Purple (#8074d6), grey (#888888), deep purple (#574e92), white, etc.
• Hover always changes to bright blue (#1883fd), no underline.

6.3 Forms

No text inputs in data—likely styled minimally. Borders in grey, focus with blue or purple.

6.4 Cards

Not explicitly in data—probably white surfaces with subtle shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #212529;
  --color-grey-medium: #323232;
  --color-white: #ffffff;
  --color-grey-dim: #696969;
  --color-black: #000000;
  --color-grey-mid: #555555;
  --color-purple-brand: #8074d6;
  --color-grey-accent: #888888;
  --color-blue-link: #3860be;
  --color-purple-deep: #574e92;
  --color-purple-bright: #7360f2;
  --color-purple-muted: #665cac;
  --color-grey-light: #d8d8d8;
  --color-navyish: #27455c;
  --color-black-transparent: rgba(0, 0, 0, 0.02);
  --color-green-accent: #58a11a;

  /* Typography */
  --font-family-main: 'Roboto', sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9_6: 9.6px;
  --space-10: 10px;
  --space-11_5: 11.5px;
  --space-12: 12px;
  --space-13_008: 13.008px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-47: 47px;
  --space-50: 50px;
  --space-100: 100px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-1: rgb(153, 153, 153) 0px 2px 10px -3px;
  --shadow-2: rgb(199, 197, 199) -3px -3px 5px -2px;
  --shadow-3: rgb(199, 197, 199) 0px 0px 12px 2px;
  --shadow-4: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Viber Design System Specification

You are a Viber design expert. Build UIs matching their visual language exactly.

## Brand Context
Viber’s design is functional with a friendly purple accent. It uses Roboto for all text, a restrained neutral palette for surfaces, and pill-shaped buttons with subtle hover animations. Contrast and readability are core priorities.

## Color Palette
- Dark Grey Primary: #212529 — Main UI text, nav backgrounds
- Medium Grey: #323232 — Secondary text, backgrounds
- White: #ffffff — Surfaces, text on dark
- Dim Grey: #696969 — Category headers
- Black: #000000 — Text, outlines
- Mid Grey: #555555 — Icons, link buttons
- Purple Brand: #8074d6 — Brand accents
- Grey Accent: #888888 — Secondary text
- Blue Link: #3860be — Links in privacy notices
- Deep Purple: #574e92 — Secondary link accents
- Bright Purple: #7360f2 — Primary buttons, cookie links
- Muted Purple: #665cac — Outlined buttons, borders
- Light Grey: #d8d8d8 — Dividers
- Navyish: #27455c — Rare backgrounds
- Transparent Black: rgba(0,0,0,0.02) — Hover/focus overlays
- Green Accent: #58a11a — Status hovers

## Typography
Font: 'Roboto', sans-serif from Google Fonts

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 54px | 100 | 1.20 | Hero titles |
| H1 | 44px | 200 | 1.10 | Section titles |
| Body | 15-16px | 300-400 | 1.5 | Paragraphs |
| Button | 15-17px | 300-400 | 2.0+ | CTAs |
| Caption | 10-14px | 300-700 | 1.1-1.5 | Metadata |

## Spacing & Grid
Base: 8px grid with custom tweaks: 1, 2, 3, 5, 6, 8, 9.6, 10, 11.5, 12, 13.008, 15, 16, 20, 25, 30, 35, 47, 50, 100px.

## Border Radius
- sm: 2px — small buttons, inputs
- md: 5px — small cards
- lg: 30px — pill buttons
- full: 50% — avatars

## Shadows & Depth
Use subtle shadows:
- rgb(153,153,153) 0px 2px 10px -3px
- rgba(0,0,0,0.2) 0px 0px 18px 0px
Borders in brand colors for depth.

## Components

### Primary Button
Default: transparent bg, #665cac text/border, 30px radius, padding 0 28px.
Hover: white bg, #2285f7 text, 0.7 opacity, scale 1.1.
Active: rgba(0,0,0,0.07) bg, #8074d6 text.
Focus: white text, blue focus ring, black outline.

### Secondary Button (Green)
Default: #66b821 bg, white text, 30px radius.
Hover: white bg, #2285f7 text.

### Link
Default: #8074d6 or #574e92 text, no underline.
Hover: #1883fd text, no underline.

## Layout & Responsive Rules
Breakpoints: 400, 420, 425, 460, 530, 575, 576, 600, 700, 767, 768, 890, 991, 992, 1024, 1199, 1200, 1280px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Scale 1.1 on hover for buttons
- Opacity shifts for state changes

## DO
- Use only colors from palette
- Maintain 8px grid spacing unless optically adjusting
- Use Roboto for all text
- Keep button radius consistent
- Ensure contrast meets WCAG AA

## DON'T
- Introduce new colors
- Mix sharp corners with pill buttons
- Overuse shadows
- Put light purple text on white for small sizes

## Code Examples

```css
.btn-primary {
  background: transparent;
  color: #665cac;
  padding: 0 28px;
  border-radius: 30px;
  font-weight: 300;
  font-size: 15px;
  border: 1px solid #665cac;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
  transform: scale(1.1);
  opacity: 0.7;
}
.btn-primary:focus {
  color: #ffffff;
  box-shadow: #ffffff 0 0 0 1px, #007bff 0 0 0 3px;
  border: 1px solid #000000;
}

.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 18px 0px;
}

.input {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 15px;
}
.input:focus {
  border-color: #7360f2;
  outline: none;
}
```

9. Summary

TL;DR — Viber’s design is built on a purple accent over a foundation of greys and white surfaces, with Roboto throughout. It’s functional, readable, and consistent, with pill buttons and subtle hover animations as its main branding flourish.

Brand Keywords:

• purple-forward
• functional-friendly
• readability-first
• restrained-depth
• global-accessible