Klaviyo Brand Design System Deep-Dive

1. Brand Overview

Klaviyo’s design language sits in a space that’s part data-driven SaaS, part approachable marketing tool. The vibe is professional but not sterile — they use deep, grounded neutrals with bursts of warm and playful colors to keep the tool feeling human. This isn’t fintech minimalism. It’s a marketing automation platform designed for people who care about customer relationships, so the UI has to balance clarity with personality.

Looking at the extracted data, the brand leans heavily on Instrument Sans for all typography, which instantly gives the site a contemporary, clean voice. The typeface is geometric but not cold, and it holds weight well in both large, bold headings and small captions. The weight distribution is consistent — headings are mostly 500–600, body text is 400–500 — which keeps visual rhythm tight.

The primary color is a very dark charcoal (#232121) that functions as both text and action color. It’s confident, almost black, but softer. The palette surrounding it is huge — eggplants, violets, poppies, sky blues, oranges, yellows — which suggests a design system built for varied content states (alerts, promos, seasonal campaigns). This isn’t a brand that sticks to three corporate colors. They’ve got a full spectrum and they use it.

Spacing is on an 8px scale (with some 4px increments). That’s the modern standard for responsive design. The breakpoints are granular — 26 distinct widths — which means they’ve tuned responsiveness carefully for multiple device classes.

Borders and radii are deliberate: 4px for small UI, 8px for medium surfaces, and pill-shaped 32px+ for CTAs. Shadows are used sparingly and subtly; depth comes more from contrast and color than heavy drop-shadows.

Overall: Klaviyo’s design system is built for a complex web app where multiple components need to coexist without chaos. The colors give them range, the typography keeps them anchored, and the spacing/border rules ensure consistency.

2. Color System

2.1 Primary Colors

Primary is #232121 (RGB 35,33,33). This is the backbone — used for text, button borders, and filled states for primary actions. It reads as black at first glance but isn’t pure black, which softens contrast and makes white text less aggressive. Compared to competitors like Mailchimp (who go bold yellow) or HubSpot (bright orange), Klaviyo’s primary is understated. That works because their interface is loaded with functional colors — they don’t need the primary to do all the emotional work.

Secondary is transparent (rgba(0,0,0,0)) — essentially a placeholder for components that don’t have a brand background but still need a defined interaction style.

2.2 Complete Palette

Here’s the full extracted palette with roles and usage:

2.3 Color Relationships

They’ve built a full functional spectrum: error (#ef4444), warning (#eea458, #f0c92d), success (#518b22), multiple alert yellows, and a wide range of accent tones. Accessibility-wise, #232121 on white easily passes WCAG AA/AAA for normal text. Some lighter tints (e.g., #f4cdf5 pink) will fail on white — those are decorative, not for text.

Dark mode is hinted at — there’s a --color-dark-border and multiple charcoal shades, so the system probably supports inverted schemes.

2.4 Usage Guide

• Use #232121 for text and primary actions.
• Pair dark charcoal with light tints for cards and panels.
• Functional colors (reds, yellows, green) are for states — don’t use them for decoration.
• Avoid pairing saturated accents (poppy, orange) together — they’ll fight.
• Eggplant and violet tones are safe secondary accents.

3. Typography

3.1 Font Families

All typography is Instrument Sans — no fallbacks listed in the data, but likely system sans as backup. No Google Fonts or Adobe Fonts sources are declared — probably self-hosted.

3.2 Type Scale

3.3 Hierarchy

They keep heading line heights tight (1.2) — gives strong vertical rhythm. Body and captions open up to 1.5. Buttons sometimes compress to 0.88 line height — makes them feel compact even with larger text. The large 64px button text is unusual — likely for hero CTAs.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints: 26 distinct widths from 380px to 1999px. They clearly test for multiple device widths — not just standard mobile/tablet/desktop. Likely a flexible grid with max-width constraints around 1366–1372px for desktop content.

5. Visual Elements

Border Radius

They use 32px for pill buttons — visually strong. 100% for circular buttons/icons.

Shadows

Three shadow styles:

• rgba(0,0,0,0.16) 8px 8px 24px — soft depth.
• rgba(0,0,0,0.21) 0px 13px 37px — slightly more dramatic.
• rgb(128,128,128) 0px 0px 5px — rare.

Shadows are subtle, not a core depth cue.

Borders

Primary border: 2px solid #232121 for links/buttons. Thin 1px borders for navigation. Occasional light gray borders for inputs.

6. Components

6.1 Buttons

Primary Dark Button

• Default: bg #232121, text #fff, padding 12px 30px, radius 32px, border 2px solid #232121.
• Hover: bg var(--color-core-white), text var(--color-core-charcoal), scale 1.03, box-shadow 1px 1px 9px var(--color-core-charcoal-shade).
• Active: 0.75 opacity, bg var(--color-button-active-background).
• Focus: bg #fafafa, text #122124, outline -webkit-focus-ring-color solid 2px.

Outline Button

• Default: transparent bg, text #232121, padding 12px 20px, radius 52px, border 1px solid #232121.
• Hover: same as above with scale and shadow.
• Active/Focus: similar.

Tab Active

• Default: bg #89362e (Poppy 900), text #fff, padding 8px, radius 4px.
• Hover/Focus: bg var(--color-poppy-mid), text var(--color-charcoal).

Tab Inactive

• Default: bg #f96353 (Poppy), text #232121, padding 8px, radius 4px.
• Hover/Focus: same as above.

Carousel Button

• Default: bg rgba(44,45,46,0.1), text #232121, radius 100%.
• Hover/Focus: transparent bg, text var(--color-charcoal).

6.2 Links

Two styles:

• Dark text (#232121), underline. Hover keeps underline.
• White text (#fff), no underline default but hover adds underline.

6.3 Forms

Email input:

• Default: bg #fff, text #000, radius 50px, padding 10px 12px 0 24px.
• Focus: outline none, box-shadow var(--xy-node-boxshadow-selected), bg var(--color-white).

6.4 Cards

No explicit card data, but backgrounds pull from neutral tints (#f4ede2, #e7e2dd) and shadows are light (rgba(0,0,0,0.16)).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #232121;
  --color-secondary: transparent;
  --color-white: #ffffff;
  --color-eggplant-500: #744a6e;
  /* ... include all palette colors from table above ... */

  /* Typography */
  --font-family-primary: "Instrument Sans", sans-serif;
  --font-size-button-xl: 64px;
  --font-size-h1-lg: 58px;
  /* ... all sizes ... */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  /* ... up to 120px ... */

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 32px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.16) 8px 8px 24px;
  --shadow-md: rgba(0,0,0,0.21) 0px 13px 37px;
  --shadow-light: rgb(128,128,128) 0px 0px 5px;
}

8. AI Coding Assistant Prompt

# Klaviyo Design System Specification

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

## Brand Context
Klaviyo balances professional SaaS clarity with approachable marketing energy. Dark charcoal and white form the base, with a wide accent spectrum for states and highlights. Typography is consistent and geometric, spacing is precise on an 8px grid, and buttons use strong pill shapes.

## Color Palette
- Primary Charcoal: #232121 — Text, primary buttons, borders
- White: #ffffff — Backgrounds, text on dark
- Eggplant 500: #744a6e — Secondary accents
- Core Violet Mid: #b5a3e0 — Highlights
- Core Orange 200: #ffa43e — Alerts/promos
- Core Poppy Mid: #fb968c — Buttons/promos
- Check Icon Red: #ef4444 — Error icons
- Forest Green: #518b22 — Success states
- Warning Yellow: #eea458 — Warnings
- Poppy: #f96353 — Buttons
[...include all colors from palette table...]

## Typography
Font: "Instrument Sans", sans-serif
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| Button XL | 64px | 600 | 1.09 | Hero CTA |
| H1 LG | 58px | 600 | 1.20 | Page title |
| H1 SM | 32px | 600 | 1.20 | Subtitles |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Caption | 14px | 400 | 1.50 | Metadata |
[...all levels...]

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 56px, 70px, 75px, 88px, 120px
Component mapping:
- Button padding: 12px vertical, 20–30px horizontal
- Card padding: 24–32px
- Section gaps: 48–56px

## Border Radius
- sm: 4px — Small buttons, badges
- md: 8px — Cards, nav
- pill: 32px — CTAs
- full: 100% — Circular buttons/icons

## Shadows & Depth
- sm: rgba(0,0,0,0.16) 8px 8px 24px — Cards
- md: rgba(0,0,0,0.21) 0px 13px 37px — Modals
- light: rgb(128,128,128) 0px 0px 5px — Rare

## Component Specifications

### Primary Button
Default: bg #232121, color #fff, padding 12px 30px, radius 32px, border 2px solid #232121
Hover: bg #fff, color var(--color-core-charcoal), scale 1.03, shadow 1px 1px 9px var(--color-core-charcoal-shade)
Active: opacity 0.75, bg var(--color-button-active-background)
Focus: bg #fafafa, color #122124, outline 2px solid -webkit-focus-ring-color

### Secondary Button
Default: transparent bg, color #232121, padding 12px 20px, radius 52px, border 1px solid #232121
Hover: bg #fff, color var(--color-core-charcoal), scale 1.03, shadow as primary

### Input Field
Default: bg #fff, color #000, radius 50px, padding 10px 12px 0 24px
Focus: outline none, shadow var(--xy-node-boxshadow-selected), bg #fff

### Card
bg neutral tint, radius 8px, padding 24–32px, shadow sm

## Layout & Responsive Rules
Max width: ~1366px
Mobile padding: 16px
Desktop padding: 32px
Breakpoints: 380px, 575px, 576px, 577px, 767px, 768px, 769px, 800px, 840px, 916px, 990px, 992px, 1023px, 1024px, 1025px, 1080px, 1100px, 1120px, 1199px, 1200px, 1280px, 1300px, 1365px, 1366px, 1372px, 1999px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px solid outline
- Hover scale: 1.03 for buttons

## DO List
- Use only palette colors
- Maintain 8px grid
- Use Instrument Sans for all text
- Keep button radii consistent
- Use shadows only for surface elevation

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't apply heavy shadows
- Don't use accent colors for body text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #232121;
  color: #fff;
  padding: 12px 30px;
  border-radius: 32px;
  border: 2px solid #232121;
  font-weight: 500;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  color: #232121;
  transform: scale(1.03);
  box-shadow: 1px 1px 9px #191717;
}
```

### Input Field
```css
.input-email {
  background: #fff;
  color: #000;
  border-radius: 50px;
  padding: 10px 12px 0 24px;
  border: none;
}
.input-email:focus {
  outline: none;
  box-shadow: 0 0 0 2px #232121;
}
```

### Card
```css
.card {
  background: #f4ede2;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.16) 8px 8px 24px;
}
```

9. Summary

TL;DR — Klaviyo’s design system is dark-neutral first, with a huge accent palette for states. Instrument Sans keeps typography clean and consistent. Spacing is strict on an 8px grid. Buttons are bold pill shapes with subtle hover motion. Shadows are light and rarely used.

Brand Keywords: data-driven-friendly, dark-neutral-base, accent-rich, geometric-type, 8px-grid-precision