Customer.io

# Design brief: the Customer.io design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/09162532/customer-io-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/09162532/customer-io-featured.webp
- On DesignMunk: https://designmunk.com/customer-io/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Customer.io: Monumental Saans Headlines with Mint Accents

## Overview

Customer.io's UI is calm, confident, and analytical. It uses high-contrast text on white surfaces, restrained green accents, and generous spacing to support clarity. Tone is professional rather than playful; components are simple, with borders and whitespace carrying hierarchy. Aim for focused layouts that read quickly on skims and scale to dense product detail when needed.

## Colors

- **primary (#000000):** Core text and headline ink for maximum contrast.
- **secondary (#0c343c):** Deep teal accent for interactive and brand-forward elements.
- **neutral (#ffffff):** Default page and card surfaces.
- **border (#e5e7eb):** Subtle dividers, input outlines, and card edges.
- **brand-herbal-vapors (#e0f8ca):** Soft mint tint for highlights, success cues, and focus backplates.
- **brand-aquadulce (#779e86):** Muted sage for secondary accents, icons, or chart lines.
- **surface ({colors.neutral}):** Canonical surface alias; matches neutral.
- **on-surface ({colors.primary}):** Text on surfaces; alias to primary.

## Typography

All text styles use Saans Font at a mid weight (475), producing a firm but unshouty voice.
- Headline LG — Saans Font, 96px/1.0, 475: Campaign or hero statements. Keep to 1–3 lines.
- Headline MD — Saans Font, 59px/1.2, 475: Section intros and major value props.
- Headline SM — Saans Font, 37px/1.19, 475: Card titles and sub-hero headings.
- Headline XS — Saans Font, 23px/1.22, 475: Feature titles and dense UI headings.
- Body MD — Saans Font, 14px/1.4, 475: Primary body copy, navigation, and meta.
Availability: Saans Font is custom/self-hosted and not freely loadable by default. Recommended free substitutes with similar modern grotesk qualities: Inter, Manrope, or Work Sans. Use 500 for substitutes to approximate the 475 tone.

## Layout

Spacing is generous and asymmetric: xs 6px for micro gaps, sm 16px for component padding, md 28px for intra-section rhythm, lg 40px for section gutters, xl 128px for hero and major band spacing. Use a responsive 12-column grid with wide outer margins. Prefer stacked, single-message bands with clear headings and brief supporting copy. Maintain ample negative space around screenshots and stats to keep scan paths clean.

## Elevation & Depth

Shadows are largely absent. Hierarchy relies on high text contrast (#000000 on #ffffff), subtle borders (#e5e7eb), and tonal tints (e.g., #e0f8ca) to group content. Focus or selected states may use the small measured shadow as a soft greenish ring. Reserve depth for interaction feedback; keep resting UI flat.

## Shapes

Rounded language is minimal and purposeful: 8px corners for cards and containers, and full (9999px) for pill buttons and chips. Pills indicate primary actions and selectable tokens; squared edges are reserved for links and inline elements.

## Components

Buttons
- Primary Button: 48px height, 8px×28px padding, full radius, text color {colors.primary}. Use for the main CTA per surface.
- Secondary Button: Same metrics as primary; use for alternate actions like "Book a demo."
- Link Button: Text-only with 0px radius; use inline or in dense lists.
Cards
- Card: White background, ink text, 8px radius, 16px padding, border as needed using #e5e7eb.

### Global Navigation Bar
- Left-aligned logo with top-level links. Body MD (14px/1.4). Use border #e5e7eb for the bottom rule and lg (40px) vertical padding.

### Hero with Dual CTAs
- Headline LG 96px; subhead in Body MD. Two pill buttons (primary + secondary) with md (28px) gap. Below, a small benefit row uses xs (6px) spacing between check items.

### Benefit Badges Row
- Three short items (trial, no card, cancel) set in Body MD with small icons. Use #e5e7eb dividers or md (28px) gaps; avoid shadows.

### Case Study Logo/Tile Strip
- Grid of customer logos or tiles in Card format. Use sm (16px) padding inside each tile; 8px radius; border #e5e7eb.

### Product Screenshot Frame
- Wide image band with generous xl (128px) outer spacing. Optionally place on a #e0f8ca backplate for contrast; no shadow by default.

### Capabilities Icon Cards
- Five selectable cards (Journeys, Audiences, Data & integrations, Design Studio, Analytics). Headline XS titles, Body MD descriptions, 8px radius, 16px padding, and #e5e7eb borders.

### AI Agent Feature List
- Three columns with Headline XS labels and short Body MD text. Use brand-aquadulce (#779e86) for lightweight icons.

### Stat + Testimonial Cards
- Large numeric stat at Headline SM, supporting quote in Body MD, author line in Body MD with stronger contrast. Card with 8px radius, 16px padding, subtle border.

### Footer Compliance Badges
- Compact row for GDPR/CCPA/ISO/SOC/HIPAA. Use xs (6px) gaps and Body MD text; keep icons monochrome.

## Do's and Don'ts

- Do keep text black (#000000) on white (#ffffff) for all major copy.
- Do reserve deep teal (#0c343c) for accents and interactive elements; use it consistently.
- Do use pill shapes only for primary/secondary actions; keep links square.
- Do rely on borders (#e5e7eb) and spacing for grouping; avoid decorative shadows.
- Don't stack more than two CTAs in a single viewport; keep primary action singular.
- Don't place long paragraphs on tinted mint (#e0f8ca); use it for highlights, not full-copy blocks.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #0c343c with mint highlight #e0f8ca

1) Build a hero band
- Background #ffffff, 128px top/bottom padding. H1 set to Saans Font (or Inter/Manrope fallback) 96px, weight 475, line-height 1.0, color #000000. Subhead Body MD 14px/1.4. Primary pill button 48px high, 8px×28px padding, radius 9999px; secondary pill adjacent with 28px gap.

2) Create a 5-up capability grid
- Section padding 40px. Use a 12-col grid; each card spans equally. Card background #ffffff, border #e5e7eb, radius 8px, padding 16px. Title Headline XS 23px/1.22, description Body MD 14px/1.4. Icons in #779e86.

3) Product screenshot band
- Wrap image in a container with 128px vertical spacing. Optional backplate #e0f8ca with 16px inner padding and 8px radius; no shadow. Caption in Body MD, centered.

4) Testimonial stat card
- Card #ffffff, border #e5e7eb, radius 8px, padding 16px. Stat in Headline SM 37px/1.19, quote Body MD 14px/1.4, author line Body MD. Keep text #000000; accent marks in #0c343c.

5) Navigation bar
- Bar background #ffffff with bottom border #e5e7eb. Links in Body MD 14px/1.4, color #000000. Right-aligned pill CTA: height 48px, padding 8px×28px, radius 9999px.

## Similar Brands

- Braze: Similar enterprise marketing tone with oversized headlines; Braze leans heavier on color gradients versus Customer.io's flat whites.
- Iterable: Comparable card and grid system; Iterable uses more photographic texture, while Customer.io relies on borders and whitespace.
- Klaviyo: Shares black/green palette and data-first messaging; Klaviyo's typography trends bolder with denser modules.
- Twilio Segment: Crisp, minimal surfaces and trust badges; Segment uses brighter mints and more illustration.
- HubSpot (Marketing Hub): Broad marketing platform with testimonial stats; HubSpot is warmer and more saturated, less monochrome overall.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #0c343c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-herbal-vapors: #e0f8ca;
  --color-brand-aquadulce: #779e86;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 96px;
  --text-headline-lg-weight: 475;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: 0.002em;
  --text-headline-md-size: 59px;
  --text-headline-md-weight: 475;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: 0.003em;
  --text-headline-sm-size: 37px;
  --text-headline-sm-weight: 475;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: 0.005em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 475;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 475;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: 0.014em;
  --font-saansfont: "saansFont";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 28px;
  --button-primary-height: 48px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 28px;
  --button-secondary-height: 48px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #0c343c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-herbal-vapors: #e0f8ca;
  --color-brand-aquadulce: #779e86;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "saansFont";
  --font-headline-md: "saansFont";
  --font-headline-sm: "saansFont";
  --font-headline-xs: "saansFont";
  --font-body-md: "saansFont";
  --text-headline-lg: 96px;
  --text-headline-md: 59px;
  --text-headline-sm: 37px;
  --text-headline-xs: 23px;
  --text-body-md: 14px;
  --tracking-headline-lg: 0.002em;
  --tracking-headline-md: 0.003em;
  --tracking-headline-sm: 0.005em;
  --tracking-body-md: 0.014em;
  --font-weight-headline-lg: 475;
  --font-weight-headline-md: 475;
  --font-weight-headline-sm: 475;
  --font-weight-headline-xs: 475;
  --font-weight-body-md: 475;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 128px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.204,
                    0.235
                ],
                "hex": "#0c343c"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-herbal-vapors": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.878,
                    0.973,
                    0.792
                ],
                "hex": "#e0f8ca"
            }
        },
        "brand-aquadulce": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.467,
                    0.62,
                    0.525
                ],
                "hex": "#779e86"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 128,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 96,
                    "unit": "px"
                },
                "fontWeight": 475,
                "letterSpacing": {
                    "value": 0.002,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 59,
                    "unit": "px"
                },
                "fontWeight": 475,
                "letterSpacing": {
                    "value": 0.003,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 37,
                    "unit": "px"
                },
                "fontWeight": 475,
                "letterSpacing": {
                    "value": 0.005,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 475
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "saansFont",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 475,
                "letterSpacing": {
                    "value": 0.014,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Customer.io**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: Customer.io
description: Supercharge your messaging with compounding customer engagement
colors:
  primary: "#000000"
  secondary: "#0c343c"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-herbal-vapors: "#e0f8ca"
  brand-aquadulce: "#779e86"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: saansFont
    fontSize: 96px
    fontWeight: 475
    lineHeight: 1
    letterSpacing: 0.002em
  headline-md:
    fontFamily: saansFont
    fontSize: 59px
    fontWeight: 475
    lineHeight: 1.2
    letterSpacing: 0.003em
  headline-sm:
    fontFamily: saansFont
    fontSize: 37px
    fontWeight: 475
    lineHeight: 1.19
    letterSpacing: 0.005em
  headline-xs:
    fontFamily: saansFont
    fontSize: 23px
    fontWeight: 475
    lineHeight: 1.22
  body-md:
    fontFamily: saansFont
    fontSize: 14px
    fontWeight: 475
    lineHeight: 1.4
    letterSpacing: 0.014em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 128px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 8px 28px
    height: 48px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 8px 28px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Customer.io: Monumental Saans Headlines with Mint Accents

## Overview

Customer.io's UI is calm, confident, and analytical. It uses high-contrast text on white surfaces, restrained green accents, and generous spacing to support clarity. Tone is professional rather than playful; components are simple, with borders and whitespace carrying hierarchy. Aim for focused layouts that read quickly on skims and scale to dense product detail when needed.

## Colors

- **primary (#000000):** Core text and headline ink for maximum contrast.
- **secondary (#0c343c):** Deep teal accent for interactive and brand-forward elements.
- **neutral (#ffffff):** Default page and card surfaces.
- **border (#e5e7eb):** Subtle dividers, input outlines, and card edges.
- **brand-herbal-vapors (#e0f8ca):** Soft mint tint for highlights, success cues, and focus backplates.
- **brand-aquadulce (#779e86):** Muted sage for secondary accents, icons, or chart lines.
- **surface ({colors.neutral}):** Canonical surface alias; matches neutral.
- **on-surface ({colors.primary}):** Text on surfaces; alias to primary.

## Typography

All text styles use Saans Font at a mid weight (475), producing a firm but unshouty voice.
- Headline LG — Saans Font, 96px/1.0, 475: Campaign or hero statements. Keep to 1–3 lines.
- Headline MD — Saans Font, 59px/1.2, 475: Section intros and major value props.
- Headline SM — Saans Font, 37px/1.19, 475: Card titles and sub-hero headings.
- Headline XS — Saans Font, 23px/1.22, 475: Feature titles and dense UI headings.
- Body MD — Saans Font, 14px/1.4, 475: Primary body copy, navigation, and meta.
Availability: Saans Font is custom/self-hosted and not freely loadable by default. Recommended free substitutes with similar modern grotesk qualities: Inter, Manrope, or Work Sans. Use 500 for substitutes to approximate the 475 tone.

## Layout

Spacing is generous and asymmetric: xs 6px for micro gaps, sm 16px for component padding, md 28px for intra-section rhythm, lg 40px for section gutters, xl 128px for hero and major band spacing. Use a responsive 12-column grid with wide outer margins. Prefer stacked, single-message bands with clear headings and brief supporting copy. Maintain ample negative space around screenshots and stats to keep scan paths clean.

## Elevation & Depth

Shadows are largely absent. Hierarchy relies on high text contrast (#000000 on #ffffff), subtle borders (#e5e7eb), and tonal tints (e.g., #e0f8ca) to group content. Focus or selected states may use the small measured shadow as a soft greenish ring. Reserve depth for interaction feedback; keep resting UI flat.

## Shapes

Rounded language is minimal and purposeful: 8px corners for cards and containers, and full (9999px) for pill buttons and chips. Pills indicate primary actions and selectable tokens; squared edges are reserved for links and inline elements.

## Components

Buttons
- Primary Button: 48px height, 8px×28px padding, full radius, text color {colors.primary}. Use for the main CTA per surface.
- Secondary Button: Same metrics as primary; use for alternate actions like "Book a demo."
- Link Button: Text-only with 0px radius; use inline or in dense lists.
Cards
- Card: White background, ink text, 8px radius, 16px padding, border as needed using #e5e7eb.

### Global Navigation Bar
- Left-aligned logo with top-level links. Body MD (14px/1.4). Use border #e5e7eb for the bottom rule and lg (40px) vertical padding.

### Hero with Dual CTAs
- Headline LG 96px; subhead in Body MD. Two pill buttons (primary + secondary) with md (28px) gap. Below, a small benefit row uses xs (6px) spacing between check items.

### Benefit Badges Row
- Three short items (trial, no card, cancel) set in Body MD with small icons. Use #e5e7eb dividers or md (28px) gaps; avoid shadows.

### Case Study Logo/Tile Strip
- Grid of customer logos or tiles in Card format. Use sm (16px) padding inside each tile; 8px radius; border #e5e7eb.

### Product Screenshot Frame
- Wide image band with generous xl (128px) outer spacing. Optionally place on a #e0f8ca backplate for contrast; no shadow by default.

### Capabilities Icon Cards
- Five selectable cards (Journeys, Audiences, Data & integrations, Design Studio, Analytics). Headline XS titles, Body MD descriptions, 8px radius, 16px padding, and #e5e7eb borders.

### AI Agent Feature List
- Three columns with Headline XS labels and short Body MD text. Use brand-aquadulce (#779e86) for lightweight icons.

### Stat + Testimonial Cards
- Large numeric stat at Headline SM, supporting quote in Body MD, author line in Body MD with stronger contrast. Card with 8px radius, 16px padding, subtle border.

### Footer Compliance Badges
- Compact row for GDPR/CCPA/ISO/SOC/HIPAA. Use xs (6px) gaps and Body MD text; keep icons monochrome.

## Do's and Don'ts

- Do keep text black (#000000) on white (#ffffff) for all major copy.
- Do reserve deep teal (#0c343c) for accents and interactive elements; use it consistently.
- Do use pill shapes only for primary/secondary actions; keep links square.
- Do rely on borders (#e5e7eb) and spacing for grouping; avoid decorative shadows.
- Don't stack more than two CTAs in a single viewport; keep primary action singular.
- Don't place long paragraphs on tinted mint (#e0f8ca); use it for highlights, not full-copy blocks.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #0c343c with mint highlight #e0f8ca

1) Build a hero band
- Background #ffffff, 128px top/bottom padding. H1 set to Saans Font (or Inter/Manrope fallback) 96px, weight 475, line-height 1.0, color #000000. Subhead Body MD 14px/1.4. Primary pill button 48px high, 8px×28px padding, radius 9999px; secondary pill adjacent with 28px gap.

2) Create a 5-up capability grid
- Section padding 40px. Use a 12-col grid; each card spans equally. Card background #ffffff, border #e5e7eb, radius 8px, padding 16px. Title Headline XS 23px/1.22, description Body MD 14px/1.4. Icons in #779e86.

3) Product screenshot band
- Wrap image in a container with 128px vertical spacing. Optional backplate #e0f8ca with 16px inner padding and 8px radius; no shadow. Caption in Body MD, centered.

4) Testimonial stat card
- Card #ffffff, border #e5e7eb, radius 8px, padding 16px. Stat in Headline SM 37px/1.19, quote Body MD 14px/1.4, author line Body MD. Keep text #000000; accent marks in #0c343c.

5) Navigation bar
- Bar background #ffffff with bottom border #e5e7eb. Links in Body MD 14px/1.4, color #000000. Right-aligned pill CTA: height 48px, padding 8px×28px, radius 9999px.

## Similar Brands

- Braze: Similar enterprise marketing tone with oversized headlines; Braze leans heavier on color gradients versus Customer.io's flat whites.
- Iterable: Comparable card and grid system; Iterable uses more photographic texture, while Customer.io relies on borders and whitespace.
- Klaviyo: Shares black/green palette and data-first messaging; Klaviyo's typography trends bolder with denser modules.
- Twilio Segment: Crisp, minimal surfaces and trust badges; Segment uses brighter mints and more illustration.
- HubSpot (Marketing Hub): Broad marketing platform with testimonial stats; HubSpot is warmer and more saturated, less monochrome overall.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #0c343c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-herbal-vapors: #e0f8ca;
  --color-brand-aquadulce: #779e86;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 96px;
  --text-headline-lg-weight: 475;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: 0.002em;
  --text-headline-md-size: 59px;
  --text-headline-md-weight: 475;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: 0.003em;
  --text-headline-sm-size: 37px;
  --text-headline-sm-weight: 475;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: 0.005em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 475;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 475;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: 0.014em;
  --font-saansfont: "saansFont";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 28px;
  --button-primary-height: 48px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 28px;
  --button-secondary-height: 48px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Supercharge your messaging with compounding customer engagement",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.047,
          0.204,
          0.235
        ],
        "hex": "#0c343c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "brand-herbal-vapors": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.878,
          0.973,
          0.792
        ],
        "hex": "#e0f8ca"
      }
    },
    "brand-aquadulce": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.467,
          0.62,
          0.525
        ],
        "hex": "#779e86"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 128,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 96,
          "unit": "px"
        },
        "fontWeight": 475,
        "letterSpacing": {
          "value": 0.002,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 59,
          "unit": "px"
        },
        "fontWeight": 475,
        "letterSpacing": {
          "value": 0.003,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 37,
          "unit": "px"
        },
        "fontWeight": 475,
        "letterSpacing": {
          "value": 0.005,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 475
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "saansFont",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 475,
        "letterSpacing": {
          "value": 0.014,
          "unit": "em"
        }
      }
    }
  }
}

@theme {
  --color-primary: #000000;
  --color-secondary: #0c343c;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-herbal-vapors: #e0f8ca;
  --color-brand-aquadulce: #779e86;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "saansFont";
  --font-headline-md: "saansFont";
  --font-headline-sm: "saansFont";
  --font-headline-xs: "saansFont";
  --font-body-md: "saansFont";
  --text-headline-lg: 96px;
  --text-headline-md: 59px;
  --text-headline-sm: 37px;
  --text-headline-xs: 23px;
  --text-body-md: 14px;
  --tracking-headline-lg: 0.002em;
  --tracking-headline-md: 0.003em;
  --tracking-headline-sm: 0.005em;
  --tracking-body-md: 0.014em;
  --font-weight-headline-lg: 475;
  --font-weight-headline-md: 475;
  --font-weight-headline-sm: 475;
  --font-weight-headline-xs: 475;
  --font-weight-body-md: 475;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 128px;
}