Flashtalking Brand Design System Deep Dive

1. Brand Overview

Flashtalking (now part of Innovid) positions itself as a high-performance ad tech platform. The site’s design language communicates confidence, speed, and clarity. The vibe is corporate but energetic — not sterile. They are blending high-contrast UI components, sharp typography, and bold interaction colors to hit that "serious business" meets "creative media" sweet spot.

The visual tone leans into dark backgrounds with high-saturation pops — think theater spotlights on the main CTA — which is fitting for a company dealing in media delivery, personalization, and analytics.

Typography is modern sans-serif, specifically Montserrat and Mulish coming from Google Fonts, applied with a tight, disciplined scale. Their use of uppercase in certain Mulish weights hints at digital control panels and dashboard UIs — the kind of thing media buyers appreciate.

Navigation and interaction design reinforce the brand’s nimble feel: pill-shaped buttons with big radii (50px–100px), hover states that punch up the blues, and clear focus shadows. Very tactile, even without heavy shadows — although shadows do appear in modals/focus states; they’re not afraid of depth.

It’s clearly built for two audiences:

1. Decision-makers (CMOs, digital marketing leads) — they get the bold CTAs, big headings, big claims.
2. Operators (ad ops, creative teams) — they find clean forms, accessible touch targets, consistency.

My read: Flashtalking’s system is marketing-led but operations-friendly. There’s discipline in the sizing and spacing, but also a willingness to be dramatic with color. This isn’t minimalism — it’s performance design.

2. Color System

The palette is small but potent. It’s high-contrast, tailored for dark backgrounds, and makes the primary interactive colors pop.

2.1 Primary Colors

Based on usage counts and contexts, we can say:

• Primary Blue: #414bf7 — main CTA buttons, interactive hover accents. Strong, vivid, leaning toward digital neon rather than corporate navy. Feels “techy”.
• Accent Pink/Red: #ec286b — secondary CTAs, high-attention notices. Quirky choice against blue; adds personality (feels entertainment/media rather than fintech).
• Neutrals: Black #000000 and White #ffffff anchor everything.

This works because the dark base makes saturated hues look richer. Pairing blue and pink works here — high energy, no corporate beige.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios:

• White on Primary Blue → very high contrast (passes WCAG AAA easily).
• White on Accent Pink/Red → also high contrast.
• Black backgrounds with saturated colors → perfect visual separation.

No obvious “light mode.” This is a dark-centric design. Inverting would need adjustments — the saturated colors would feel garish on white.

2.4 Usage Guide

What works:

• Blue + Pink accents over black backgrounds for calls-to-action.
• White text over dark surfaces — keeps things crisp.
• Black as a safe base for icons and structural elements.

Avoid:

• Blue text on pink backgrounds — readability risk.
• Pink for small text — keep it large to hold contrast.

3. Typography

3.1 Font Families

• Montserrat – Google Fonts. Modern geometric sans. Used for headings, links, certain body text.
• Mulish – Google Fonts. Humanist sans. Used heavily in headings, links, buttons. Variety of weights (300 to 900).
• Fallbacks unspecified — assume system sans if unavailable.
• Variable fonts enabled: potential for finer weight tuning.

3.2 Type Scale

Full size catalog (from extracted data):

3.3 Hierarchy

They’re layering fonts. Montserrat for big, bold titles; Mulish for subheads, buttons, and fine print. The weight jumps (400→900) are dramatic — feel purposeful to avoid monotony. The 2.50 line-height on some headings creates airy section headers, countering the dense dark backgrounds.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px — although they do use odd values: 5px, 5.6px, 7px. That's unusual in a strict grid system.

Common values:

• Micro: 1px, 3px, 4px, 5px, 5.6px, 7px, 8px
• Small: 10px (massive: 195 occurrences; clearly default small padding)
• Medium: 12px, 14px, 16px, 20px, 22px, 25px, 27px, 30px
• Large: 35px, 40px, 50px, 80px

This shows a pattern: 10px used for tight elements, 20px for regular UI blocks, 40px/80px for section separation.

4.2 Layout

Breakpoints are exhaustive: from 320px up to 1436px — almost every device width. They’re tuning layouts per device, possibly for marketing pages with complex hero compositions. This is not “three breakpoints” minimalism. This is granular responsive design.

5. Visual Elements

Border Radius

Values:

• 0px 30px 30px 0px (inputs with one flat edge)
• 16px (buttons)
• 30px (inputs, CTAs)
• 40px (div)
• 50px (buttons)
• 75px (list items pills)
• 100px (buttons)
• 50% (avatars, search fields — circular forms)

Large radii are dominant. Pill shapes everywhere — especially in buttons.

Shadows

• rgba(0, 0, 0, 0.2) 0px 8px 16px 0px — common (6 uses).
• rgba(0, 0, 0, 0.2) 3px 3px 13px 0px — rare (1 use).

Depth is subtle — transparency keeps it light. No harsh drop shadows.

Borders

• 2px solid white — frequently in secondary buttons.
• 2px solid #ec286b — used with pink buttons; interesting choice as border matches fill.
• 1px solid white — in inputs — keeps forms clean and visible on dark backgrounds.

6. Components

6.1 Buttons

Primary (Accent Pink)
Default:

• bg: #ec286b, color: white
• padding: 8px 16px
• border-radius: 50px
• border: 2px solid #ec286b
• font-weight: 700, size: 16px

Hover:

• bg: rgb(35, 44, 209) (deep blue)
• border: match bg

Focus:

• bg: rgb(17, 17, 37) (very dark)
• shadow: subtle dual-layer black

Secondary (Transparent)
Default: white border, transparent bg, white text
Hover/focus states same as primary — pushes to blue background.

Third (Primary Blue)
Larger padding (16px 24px), 100px radius, solid blue fill. Same hover/focus behavior but with blue origin.

6.2 Links

Variants by color:

• White text — for dark navs — hover: stays white.
• Blue (#414bf7) — body links — hover: deeper blue.
• Pink (#ec286b) — accent links — hover: white.

No underlines — very marketing-site style. All rely on color change or background context.

6.3 Forms

Text input (search):

• Transparent background, white text
• 1px solid white border
• 30px radius (pill shape)
• Padding: 1px top/bottom, 2px right, 30px left

6.4 Cards

Not explicit in data — but shadow values suggest card styles could use the 8px 16px shadow. Likely large-radius corners if consistent with other elements.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary-blue: #414bf7;
  --color-accent-pink: #ec286b;
  --color-mid-blue: #0082c5;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-montserrat: 'Montserrat', sans-serif;
  --font-mulish: 'Mulish', sans-serif;

  /* Spacing (8px base) */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-5-6: 5.6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-25: 25px;
  --space-27: 27px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;
  --space-80: 80px;

  /* Border Radius */
  --radius-16: 16px;
  --radius-30: 30px;
  --radius-40: 40px;
  --radius-50: 50px;
  --radius-75: 75px;
  --radius-100: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
  --shadow-md: rgba(0, 0, 0, 0.2) 3px 3px 13px 0px;
}

8. AI Coding Assistant Prompt

# Flashtalking Design System Specification

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

## Brand Context
Flashtalking’s design is dark-mode first, with high-saturation interactive colors. Typography is bold and geometric for headings and humanist for body/UI. Buttons and inputs favor large pill shapes, and hover/focus states lean toward deep blues. Shadows are minimal and soft.

## Color Palette
- Black: #000000 — Backgrounds, icons, logo
- White: #ffffff — Text, borders, UI surfaces
- Primary Blue: #414bf7 — Main CTAs, primary action buttons
- Accent Pink: #ec286b — Secondary CTAs, alerts
- Mid Blue: #0082c5 — Hover/focus accents
- Swiper Theme Blue: #007aff — Slider themes

## Typography
Fonts:
- Headings: "Montserrat", sans-serif
- Body/UI: "Mulish", sans-serif

Sizes/Weights:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Montserrat | 48px | 500 | 1.50 | Main headlines |
| H1 | Montserrat | 44px | 500 | 1.20 | Alternate large headings |
| H2 | Montserrat | 27px | 400 | 1.59 | Section headers |
| H3 | Montserrat | 24px | 700 | 1.08 | Subheaders |
| Link-lg | Mulish | 22px | 700 | 1.50 | Navigation |
| Link-md | Montserrat | 20px | 400 | 1.00 | Inline links |
| Button | Mulish | 16px | 700 | 1.50 | Buttons |
| Caption | Mulish | 14px | 300 | 1.79 | Small notes |
(...continue full scale from data...)

## Spacing & Grid
Base: 8px
Scale: 1px, 3px, 4px, 5px, 5.6px, 7px, 8px, 10px, 12px, 14px, 16px, 20px, 22px, 25px, 27px, 30px, 35px, 40px, 50px, 80px
Map:
- Button padding: 8px–16px
- Section gaps: 40px–80px

## Border Radius
- flat-blend: 0px 30px 30px 0px — asymmetric inputs
- sm: 16px — small buttons
- md: 30px — most form elements
- lg: 50px — pill buttons
- xl: 75px — list item pills
- full-pill: 100px — oversized CTAs
- circle: 50% — avatars, search input fields

## Shadows & Depth
- Large: rgba(0,0,0,0.2) 0px 8px 16px 0px — modals, focus states
- Medium: rgba(0,0,0,0.2) 3px 3px 13px 0px — subtle depth

## Component Specifications

### Primary Button (.ccc-notify-button.ccc-accept)
Default:
- background: #ec286b
- color: #ffffff
- padding: 8px 16px
- border-radius: 50px
- border: 2px solid #ec286b
- font-weight: 700
- font-size: 16px
Hover:
- background: rgb(35, 44, 209)
- border-color: rgb(35, 44, 209)
Focus:
- background: rgb(17, 17, 37)
- box-shadow: var(--shadow-lg)

### Secondary Button (.ccc-notify-button.ccc-reject)
Default:
- background: transparent
- color: #ffffff
- border: 2px solid #ffffff
Hover: same as primary hover

### Banner Button (.banner-button)
Default:
- background: #414bf7
- padding: 16px 24px
- border-radius: 100px

### Navigation Links
- Color white — no underline
- Hover — same color or deeper blue depending on variant

### Input Fields (search)
Default:
- background: transparent
- border: 1px solid #ffffff
- border-radius: 30px
- padding: 1px 2px 1px 30px
Focus: outline:none

## Layout & Responsive Rules
- Max content width: related to 1436px breakpoint
- Page padding: multiples of 10px–20px
- Breakpoints: from 320px to 1436px including device-specific

## Interaction Rules
- Transition timing: ~150ms ease
- Focus indicators: background change + subtle shadow
- Disabled states: opacity: 0.5

## DO List
- Use only palette colors
- Maintain 8px base grid
- Keep corners pill-shaped for interactive elements
- Preserve contrast — white text on dark/saturated backgrounds
- Respect font hierarchy from data

## DON'T List
- Add custom colors
- Use sharp corners in CTAs
- Overuse shadows — keep them subtle
- Break symmetry of button padding

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ec286b;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid #ec286b;
  font-weight: 700;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgb(35, 44, 209);
  border-color: rgb(35, 44, 209);
}
.btn-primary:focus {
  background: rgb(17, 17, 37);
  box-shadow: rgba(0,0,0,0.2) 0px 4px 8px, rgba(0,0,0,0.2) 0px 6px 20px;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px;
  border: 2px solid #ffffff;
  font-weight: 700;
  font-size: 16px;
}
.btn-secondary:hover {
  background: rgb(35, 44, 209);
  border-color: rgb(35, 44, 209);
}
```

### Input Field
```css
.input-search {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 30px;
  padding: 1px 2px 1px 30px;
}
.input-search:focus {
  outline: none;
}
```

9. Summary

TL;DR — Flashtalking’s design system is dark-first, hyper-consistent with pill-shaped interactions, bold sans-serif headings, and high-saturation blues and pinks for CTAs. The spacing is disciplined but not rigid — they allow odd increments. It’s built for marketing drama with operational clarity.

Brand Keywords:

• dark-performance
• pill-centric
• high-contrast
• marketing-driven
• tech-savvy