Vungle (Liftoff) Design System Deep Dive

1. Brand Overview

Vungle, now operating under the Liftoff umbrella, has a visual language that feels tech-first with a hint of corporate polish. The Liftoff site (https://liftoff.ai/) is clearly aimed at advertisers, app developers, and marketers who care about performance metrics, but the design doesn’t drown you in charts—it’s clean, dark-leaning, and purposeful.

The vibe: confident, minimal, and a little restrained. Colors are muted—deep navy (#273143), rich near-black (#00081c), and a few cool greys (#6d7588, #4a5871). White (#ffffff) is used sparingly, mostly for text over dark backgrounds or inverse buttons. There’s a single bold accent (#e51462) that pops like a pitaya fruit, but only in rare CTAs. This restraint makes the brand feel serious and focused—no rainbow gradients, no playful splashes. It’s a performance marketing company, not a social network.

Typography is tight and consistent: Poppins everywhere, in weights from 400 to 700, with deliberate negative letter-spacing for big headings. The type scale is wide—titles can go up to 62px—but line heights stay compressed (1.13–1.16) for a solid, blocky look. This works because the brand leans on short, punchy headings rather than long-winded sentences.

Interaction design is mostly flat—shadows are rare and subtle (a 0.02 opacity black shadow here and there). Depth comes from borders and color changes rather than heavy elevation. Buttons are pill-shaped (9999px radius) or large rounded rectangles (100px radius), with strong outlines in the secondary style. The hover states often lighten or change text color rather than go for dramatic animation. This keeps the UI brisk and to the point.

Overall, this is a design system for a brand that wants to look smart, solid, and trustworthy, with just enough polish to feel premium. It’s for people who will judge credibility by visual discipline and clarity, not by playful creativity.

2. Color System

2.1 Primary Colors

The primary semantic color is pure white (#ffffff), which is unusual—most brands pick a hue. Here, white is the "primary" because the site leans heavily on dark backgrounds, making white the default text and primary action color in inverse contexts. The real "brand" color is the deep navy #273143, used for buttons, headings, and other high-importance UI elements.

Psychology: White feels clean, open, and honest. On dark surfaces, it’s high-contrast and legible. Navy is professional, stable, and a bit conservative—good for a B2B tech brand. Compared to a competitor like AppLovin (who uses bold blues), Vungle/Liftoff’s navy is quieter, less aggressive.

2.2 Complete Palette

CSS variables also include functional colors:

• --cmplz_slider_active_color: #1e73be (active slider)
• --cmplz_slider_inactive_color: #F56E28 (inactive slider)
• --cmplz_button_deny_border_color: #f2f2f2
• --cmplz_button_settings_text_color: #333333

2.3 Color Relationships

Contrast: White (#ffffff) on deep navy (#273143) or near black (#00081c) is well above WCAG AA (contrast ~12:1). Navy on white is similarly safe. The pitaya pink (#e51462) on white is vibrant but may be borderline for small text—better for large CTAs.

Dark mode: The site is effectively dark-first, so the palette works in dark mode natively. Inverse components flip navy/black backgrounds to white text.

2.4 Usage Guide

• Use #273143 for primary buttons and nav text.
• Use #ffffff for text over dark surfaces.
• Reserve #e51462 for special CTAs—it pops hard against navy or black.
• Avoid mixing #555fff (vivid blue) with #e51462—both are bold accents and will fight.
• Keep #6d7588 for secondary text; don’t use it for interactive elements—too low contrast.

3. Typography

3.1 Font Families

• Primary: Poppins (Google Fonts, variable)
• Fallbacks: Helvetica, Roboto, Arial (only in some styles)
• All contexts use Poppins—no secondary font.

3.2 Type Scale

3.3 Hierarchy

Headings are big and tight—negative letter-spacing makes them feel dense. Body text sits at 16–18px, with generous line heights (1.33–1.5) for readability. Captions drop to 12–14px but keep decent line-height to avoid crowding. The consistent use of Poppins keeps the tone modern and approachable, but the compressed headings give it a “serious” edge.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid with some half-step values.

4.2 Layout

Breakpoints range from 320px up to 1800px, with many intermediate steps—suggesting careful tuning for multiple devices, not just the standard mobile/tablet/desktop split. Vuetify framework is in play, so the grid is flexible but anchored in this spacing scale.

5. Visual Elements

Border Radius

Shadows

• rgba(0, 0, 0, 0.02) 0px 10px 10px 0px — subtle ambient shadow
• rgba(0, 0, 0, 0.3) 0px 0px 4px 0px — rare, slightly heavier
• rgb(234, 240, 246) 0px -1px 3px 0px — light top shadow (divider effect)

Shadows are minimal. Depth is mostly via borders.

Borders & Dividers

Lots of 0px 0px 1px solid with various greys (#6d7588, #000000, #273143). Buttons sometimes have 1–2px solid borders in brand navy or white.

6. Components

6.1 Buttons

Primary (cmplz-accept)

• Default: bg #273143, white text, 10px 24px padding, 100px radius, 1px solid #1e73be border
• Hover: text #0091ae, opacity 0.75, bg initial, no border
• Active: bg #4a5871, white text, opacity 0.85
• Focus: no outline, bg initial, white text

Secondary (cmplz-deny)

• Default: bg white, navy text, 10px 24px padding, 100px radius, 2px solid #273143
• Hover/Active/Focus: same behaviors as primary—text color change, opacity drop, bg swap.

Accent (pitaya)

• Default: bg #e51462, white text, 10px 24px padding, 9999px radius, no border
• Hover: text #0091ae, rotateY(180deg) transformation (!), no border
• Active: bg white, box-shadow rgb(0, 8, 28) 5px 5px 0px, opacity 0.85
• Focus: bg navy, 1.5px solid #00081c border, translateY(-110%)

Outline (wp-element-button)

• Default: transparent bg, navy text, 8.5px 22.5px padding, 9999px radius, 1px solid navy
• Hover/Active/Focus: same as pitaya—includes rotateY(180deg)

6.2 Links

Four styles:

• Navy text, underline 1.5px (hover → blue #0091ae)
• White text, no underline (hover → blue underline)
• Black text, underline 1.5px (hover → blue)
• Grey #6d7588 text, no underline (hover → blue underline)

6.3 Forms

Email input:

• Default: transparent bg, black text, padding 2px 48px 10px 0px, no border
• Focus: box-shadow rgb(36, 95, 204) 0px 0px 0px 2px

No custom checkbox/radio/select in extracted data.

6.4 Cards

No explicit card component styles in data, but 24px radius and subtle shadows suggest a clean, flat card style.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-navy: #273143;
  --color-cool-grey: #6d7588;
  --color-near-black: #00081c;
  --color-white: #ffffff;
  --color-warm-grey: #e7e7df;
  --color-slate-blue: #4a5871;
  --color-dark-grey: #222222;
  --color-steel-blue: #33475b;
  --color-neutral-grey: #666666;
  --color-vivid-blue: #555fff;
  --color-pitaya: #e51462;
  --color-slider-active: #1e73be;
  --color-slider-inactive: #F56E28;
  --color-button-deny-border: #f2f2f2;
  --color-button-settings-text: #333333;

  /* Typography */
  --font-primary: 'Poppins', Helvetica, Roboto, Arial;
  --heading1-size-xl: 62px;
  --heading1-size-lg: 46px;
  --heading1-size-md: 38px;
  --heading1-size-sm: 24px;
  --heading1-size-xs: 18px;
  --body-size-lg: 18px;
  --body-size-md: 16px;
  --body-size-sm: 14px;
  --caption-size-sm: 12px;

  /* Spacing */
  --space-4: 4px;
  --space-4-5: 4.5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-8-5: 8.5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;
  --space-24: 24px;
  --space-27: 27px;
  --space-31: 31px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-90: 90px;
  --space-96: 96px;
  --space-120: 120px;
  --space-128: 128px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-xxl: 32px;
  --radius-pill-100: 100px;
  --radius-pill-999: 999px;
  --radius-pill-full: 9999px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.02) 0px 10px 10px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.3) 0px 0px 4px 0px;
  --shadow-light-top: rgb(234, 240, 246) 0px -1px 3px 0px;
}

8. AI Coding Assistant Prompt

# Vungle / Liftoff Design System Specification

System Prompt:
You are a Vungle (Liftoff) design expert. Build UIs matching their visual language exactly.

Brand Context:
Liftoff's design language is dark-first, minimal, and disciplined. It uses a restrained palette of navies, blacks, and cool greys, with rare vivid accents. Typography is entirely Poppins, with tight letter-spacing and compressed line heights for headings.

Color Palette:
- Black: #000000 — Headers, category headers, buttons
- Deep Navy: #273143 — Navigation, titles, primary buttons
- Cool Grey: #6d7588 — Secondary text
- Near Black: #00081c — Button backgrounds, dark sections
- White: #ffffff — Text, inverse buttons, highlights
- Warm Grey: #e7e7df — Background sections, dividers
- Slate Blue: #4a5871 — Active button states
- Dark Grey: #222222 — Body text in light contexts
- Steel Blue: #33475b — Minor UI elements
- Neutral Grey: #666666 — Icons, minor text
- Vivid Blue: #555fff — Rare accents
- Pitaya Pink: #e51462 — Special CTAs, hover/focus states
- Slider Active: #1e73be — Active slider
- Slider Inactive: #F56E28 — Inactive slider

Typography:
- Font Family: Poppins, Helvetica, Roboto, Arial
- Heading-1 XL: 62px, 400, lh 1.16, ls -3.1px — Hero titles
- Heading-1 LG: 46px, 400, lh 1.13, ls -0.92px — Section titles
- Heading-1 MD: 38px, 400, lh 1.16, ls -0.76px — Subtitles
- Heading-1 SM: 24px, 400, lh 1.17, ls -0.48px — Smaller headings
- Heading Bold: 18.72px, 700 — Emphasized headings
- Body: 18px, 400, lh 1.33, ls -0.36px — Paragraphs
- Body Small: 16px, 400, lh 1.50, ls -0.32px — UI text
- Caption: 14px, 400/500, lh 1.43–2.29 — Small labels
- Caption XS: 12px, 400/500/600, lh 1.33–1.50 — Micro text

Spacing & Grid:
- Base: 8px grid with half-steps (4.5px, 8.5px)
- Tokens: 4px, 4.5px, 6px, 8px, 8.5px, 10px, 15px, 16px, 20px, 21px, 24px, 27px, 31px, 32px, 40px, 48px, 90px, 96px, 120px, 128px

Border Radius:
- none: 0px — hard edges
- sm: 3px — small buttons
- md: 18px — images
- lg: 24px — cards
- xl: 30px — badges
- xxl: 32px — large images
- pill-100: 100px — rounded buttons
- pill-999: 999px — extreme rounding
- pill-full: 9999px — true pill buttons

Shadows & Depth:
- Soft: rgba(0,0,0,0.02) 0px 10px 10px
- Medium: rgba(0,0,0,0.3) 0px 0px 4px
- Light Top: rgb(234,240,246) 0px -1px 3px

Component Specifications:
Primary Button:
Default: bg #273143, color #ffffff, padding 10px 24px, border-radius 100px, border 1px solid #1e73be
Hover: color #0091ae, opacity 0.75, bg initial, border none
Active: bg #4a5871, color #ffffff, opacity 0.85
Focus: bg initial, color #ffffff, no outline

Secondary Button:
Default: bg #ffffff, color #273143, padding 10px 24px, border-radius 100px, border 2px solid #273143
Hover/Active/Focus: same as primary

Accent Button:
Default: bg #e51462, color #ffffff, padding 10px 24px, radius 9999px
Hover: color #0091ae, rotateY(180deg)
Active: bg #ffffff, box-shadow rgb(0,8,28) 5px 5px, opacity 0.85
Focus: bg #273143, border 1.5px solid #00081c, translateY(-110%)

Navigation Links:
Default: color #273143, underline 1.5px
Hover: color #0091ae, underline

Input Fields:
Default: transparent bg, color #000000, padding 2px 48px 10px 0px
Focus: box-shadow rgb(36,95,204) 0px 0px 0px 2px

Layout & Responsive Rules:
- Breakpoints: 320px, 400px, 480px, 600px, 768px, 1024px, 1280px, 1600px, 1800px
- Page padding: multiples of 8px
- Grid gaps: use spacing tokens

Interaction Rules:
- Transitions: ~150ms ease for hover/focus changes
- Focus outlines: Use box-shadow with brand blue (#1e73be or rgb(36,95,204))
- Hover: Text color shift to #0091ae

DO List:
- Use only defined palette
- Keep to 8px grid
- Use Poppins for all text
- Maintain consistent pill shapes for buttons
- Reserve #e51462 for special CTAs
- Use navy (#273143) for primary actions

DON'T List:
- Don't invent new colors
- Don't mix sharp and pill corners
- Don't overuse shadows
- Don't animate hover states beyond defined transforms
- Don't use #555fff together with #e51462

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #273143;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid #1e73be;
  font-weight: 500;
  font-size: 14px;
}
.btn-primary:hover {
  color: #0091ae;
  opacity: 0.75;
  background: initial;
  border: none;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #273143;
  padding: 10px 24px;
  border-radius: 100px;
  border: 2px solid #273143;
}
.btn-secondary:hover {
  color: #0091ae;
  opacity: 0.75;
}
```

Input Field:
```css
.input-email {
  background: transparent;
  color: #000000;
  padding: 2px 48px 10px 0px;
  border: none;
}
.input-email:focus {
  box-shadow: rgb(36,95,204) 0px 0px 0px 2px;
}
```

9. Summary

TL;DR — Liftoff’s design system is disciplined: dark-first palette, Poppins everywhere, pill buttons, minimal shadows. It’s built for clarity and credibility, not playfulness.

Brand Keywords:

• dark-minimalist
• disciplined-typography
• navy-trustworthy
• performance-focused
• restrained-premium