---
version: alpha
name: Apollo
description: "Newspaper-serif headlines struck through with electric lime, on warm bone."
colors:
  on-surface-variant: "#736F6C"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#CCC9C6"
  primary: "#EBF212"
  near-ink: "#1A1A1A"
  warm-brown: "#47423D"
  plum: "#3F3653"
  bone: "#F7F5F2"
  mid-grey: "#94918E"
  highlighter: "#F8FF2C"
  deep-teal: "#1F4A4C"
  coral: "#E67E6C"
typography:
  mega-display:
    fontFamily: Season Mix
    fontSize: 88px
    fontWeight: 550
    lineHeight: 1
    letterSpacing: -0.01em
  display:
    fontFamily: Season Mix
    fontSize: 72px
    fontWeight: 550
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline:
    fontFamily: ABC Diatype
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  headline-sm:
    fontFamily: ABC Diatype
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  title:
    fontFamily: ABC Diatype
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  title-sm:
    fontFamily: ABC Diatype
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  subheading:
    fontFamily: ABC Diatype
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  lead:
    fontFamily: ABC Diatype
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-button:
    fontFamily: ABC Diatype
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm-input:
    fontFamily: ABC Diatype
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  small:
    fontFamily: ABC Diatype
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  caption-legal:
    fontFamily: ABC Diatype
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  small-chip-inline: 4px
  buttons-inputs-cards: 8px
  medium-card: 12px
  large-panel: 16px
  pills-nav-cta-chips: 9999px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
---
# Apollo — Style Reference
> Newspaper-serif headlines struck through with electric lime, on warm bone.

**Theme:** light

Apollo dresses a B2B sales platform in editorial clothing: a towering serif display (Season Mix) delivers the headline like a broadsheet masthead, while the working copy drops to a quiet grotesque (Söhne / ABC Diatype). The palette is disciplined — warm bone and cool grey do almost all the structural work, black carries every line and label, and one radioactive lime (`#EBF212`) is spent only on the primary action. The signature move is that lime, echoed as a highlighter swipe (`#F8FF2C`) behind product-demo text, so the CTA color and the "look here" color are the same energy in two intensities. Corners are gentle (8px on controls, full-round on chips and the nav pill), borders are hairline-thin, and shadows are essentially absent — depth comes from a bone-vs-white luminance step, not elevation. Occasional deep teal and coral appear as full-bleed section grounds, the only saturated relief in an otherwise achromatic system.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | Primary text, headlines, hairline borders, outlined-button stroke. The system's true structural color. |
| Near Ink | `#1A1A1A` | `--color-ink-soft` | Input text and dense UI copy — a half-step off pure black to soften form fields. |
| Warm Brown | `#47423D` | `--color-text-warm` | Warm-neutral body text used over bone/tan surfaces where pure black would feel cold. |
| Muted Grey | `#736F6C` | `--color-text-muted` | Fine print, legal links, captions (12px). Never for primary copy. |
| Plum | `#3F3653` | `--color-plum` | A rare desaturated-purple headline accent (seen at 88px). Editorial punctuation only — not a UI color, never a CTA. |
| White | `#FFFFFF` | `--color-white` | The main content canvas and card fills. |
| Bone | `#F7F5F2` | `--color-bone` | Off-white surface — the quiet second canvas layered against white. |
| Warm Grey | `#CCC9C6` | `--color-warm-grey` | Top-bar ground and default hairline border. Sets the muted, papery frame. |
| Mid Grey | `#94918E` | `--color-border-strong` | Stronger divider / border when hairline warm-grey is too faint. |
| Electric Lime | `#EBF212` | `--color-lime` | THE action color. Reserved for the primary "Sign up for free" button and the nav pill. One place per view — restraint is the whole point. |
| Highlighter | `#F8FF2C` | `--color-highlight` | Brighter lime used as a text-highlight swipe inside product demos. The CTA color's louder twin — decorative emphasis, never a button. |
| Deep Teal | `#1F4A4C` | `--color-teal` | Full-bleed section ground for a saturated dark break. Background only. |
| Coral | `#E67E6C` | `--color-coral` | Full-bleed section ground — warm accent panel. Background only, sparingly. |

## Tokens — Typography
### Season Mix — the broadsheet display serif · `--font-display`
- **Substitute:** Canela, GT Sectra, Reckless *(closest editorial-serif fallbacks — Season Mix is proprietary)*
- **Weights:** 550 (headline)
- **Sizes:** 88px, 72px, 64px, 56px, 48px, 40px
- **Line height:** tight, ~1.0–1.05 for multi-line display
- **Letter spacing:** near-zero to slightly negative at large sizes
- **Role:** Hero and section headlines only. This is the voice — a serif masthead in a category of sans-serif SaaS sites.

### Söhne — the working grotesque · `--font-body`
- **Substitute:** Inter, Helvetica Neue, ui-sans-serif
- **Weights:** 400, 550, 700 (loaded across 100–900)
- **Sizes:** 20px, 18px, 16px, 14px
- **Line height:** ~1.4–1.5 for paragraphs
- **Letter spacing:** default
- **Role:** Subheads, navigation, buttons, and most interface copy. The quiet counterweight to Season Mix.

### ABC Diatype — the paragraph sans · `--font-paragraph`
- **Substitute:** Inter, Helvetica Neue, ui-sans-serif
- **Weights:** 400
- **Sizes:** 18px, 16px
- **Role:** Long-form body / paragraph text. A neutral geometric-humanist grotesque for readability.

### Founders Grotesk Mono — the monospace detail · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo
- **Weights:** 400
- **Role:** Data, labels, and technical accents in product surfaces. Sparse.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Mega Display | 88px | ~1.0 | -0.01em | `--text-display-xl` |
| Display | 72px | ~1.05 | -0.01em | `--text-display` |
| Headline | 64px | ~1.05 | 0 | `--text-h1` |
| Headline SM | 56px | ~1.1 | 0 | `--text-h2` |
| Title | 48px | ~1.1 | 0 | `--text-h3` |
| Title SM | 40px | ~1.15 | 0 | `--text-h4` |
| Subheading | 24px | ~1.3 | 0 | `--text-subheading` |
| Lead | 20px | ~1.4 | 0 | `--text-lead` |
| Body / Button | 18px | ~1.5 | 0 | `--text-body` |
| Body SM / Input | 16px | ~1.5 | 0 | `--text-body-sm` |
| Small | 14px | ~1.45 | 0 | `--text-sm` |
| Caption / Legal | 12px | ~1.4 | 0 | `--text-caption` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chip / inline | 4px |
| Buttons, inputs, cards | 8px |
| Medium card | 12px |
| Large panel | 16px |
| Pills, nav CTA, chips | 9999px |

### Shadows
None. The scan reports no box-shadows — Apollo conveys depth through luminance and hairline borders, not elevation.

### Layout
- **Page max-width:** wide, near-full-bleed content column centered on a white canvas
- **Section gap:** generous vertical rhythm between the hero and product panels
- **Card padding:** roomy (16–24px inner)
- **Element gap:** 8–16px between controls (input ↔ button, stacked auth options)

## Components
### Primary Button (Sign up for free)
**Role:** The single conversion action per view.
Fill `#EBF212` electric lime, text `#000000`, no border, radius 8px, padding `0 16px`–`0 20px`, 18px / weight 400. In the top nav the same button becomes a full-round pill (9999px). Lime is spent here and nowhere else.

### Secondary Button (Get a demo)
**Role:** Lower-priority action beside the primary.
Transparent fill, `1px solid #000000` border, text `#000000`, radius 8px, padding `0 16px`–`0 20px`, 18px / weight 400. The outlined black stroke is the entire visual — no fill, no shadow.

### Text Button / Nav Link
**Role:** Tertiary navigation ("Log in", "Solutions", "Roles").
No background, no border, `#000000` text, 18px / weight 400. Underline reserved for legal links.

### OAuth Button (Google / Microsoft)
**Role:** Alternative sign-up path.
White fill, `1px` hairline border, black label, 8px radius, brand glyph at left, centered text. Presented as a pair under an "or" rule.

### Email Input
**Role:** Primary lead-capture field.
Transparent/white fill, text `#1A1A1A`, 16px, padding `0 12px`, hairline `#CCC9C6` border (radius 0 per scan, softened in-context to sit beside the 8px button). Placeholder in muted grey.

### Status Chip ("No credit card required")
**Role:** Reassurance microcopy above the form.
Full-round pill (9999px), soft bone/grey fill, small icon + 12–14px label. Quiet, not a button.

### Highlight Swipe
**Role:** Draws the eye to a phrase inside product-demo copy.
`#F8FF2C` highlighter behind live text (e.g. "Create a multi-channel campaign…"), simulating a marker pass. Emphasis only — never interactive.

### Hero Headline
**Role:** The masthead.
Season Mix serif at 72–88px, `#000000` (or `#3F3653` plum for accent lines), weight 550, tight leading. Two lines, left-anchored or centered on the white canvas.

### Product Demo Card
**Role:** Showcase panel for the AI experience.
Rounded card (12–16px) on a warm tan/gold gradient ground, white inner surface, warm-brown `#47423D` body text, holding chat-style demo content.

### Section Panel
**Role:** Full-bleed thematic break.
Edge-to-edge ground in `#1F4A4C` teal or `#E67E6C` coral, content reversed to white/near-white. The only saturated moments in the layout.

### Top Bar
**Role:** Persistent global navigation.
Warm-grey `#CCC9C6` ground, black wordmark + lime starburst logo mark at left, black nav links, and the demo/sign-up button pair at right.

### Legal / Caption Text
**Role:** Fine print under forms.
12px, `#736F6C` muted grey, with underlined `#000000` inline links (Terms of Service, Privacy Policy).

## Do's and Don'ts
### Do
- Spend `#EBF212` lime on exactly one action per view — the primary CTA. It is the loudest thing in the system and only earns that by being rare.
- Let Season Mix carry the headline and immediately hand off to Söhne/ABC Diatype for everything smaller. The serif-to-sans drop IS the brand voice.
- Use hairline `#CCC9C6` borders and a bone-vs-white luminance step to separate surfaces instead of shadows.
- Keep controls at 8px radius and reserve 9999px pills for chips and the nav CTA.
- Reserve teal `#1F4A4C` and coral `#E67E6C` for full-bleed section grounds only.

### Don't
- Don't add box-shadows or glow — this system is deliberately flat. Depth is luminance and line.
- Don't tint body text: black, near-black `#1A1A1A`, warm `#47423D`, and muted `#736F6C` cover every case.
- Don't use `#F8FF2C` highlighter as a button fill or `#EBF212` lime as a background wash — lime is a point of action, not a surface.
- Don't set headlines in sans or set body in the serif — never invert the type roles.
- Don't introduce a second accent color; plum `#3F3653` is a rare headline note, not a UI palette member.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Main content ground |
| 1 | Bone | `#F7F5F2` | Quiet secondary surface, chips |
| 2 | Warm Grey | `#CCC9C6` | Top bar, framed panels, default border |
| 3 | Teal | `#1F4A4C` | Full-bleed dark section |
| 3 | Coral | `#E67E6C` | Full-bleed warm section |

## Elevation
Effectively flat. No shadows are declared. Layers are read by luminance step (white → bone → warm grey) and by hairline borders (`#CCC9C6` default, `#94918E` when a stronger divider is needed). The only true "raised" gesture is a product card floating on a warm-gradient ground, and even that reads through contrast, not a drop shadow.

## Imagery
Product-forward, not decorative. The hero pairs the serif headline with a lead-capture form, then reveals the actual AI experience inside a rounded demo card on a warm tan/gold gradient — chat bubbles, highlighter-swiped prompts, drafted campaigns. The logo mark is a small lime starburst. No stock photography, no illustration for its own sake — screenshots of the working product are the imagery.

## Layout
Full-width white canvas under a warm-grey global bar. The hero is centered: mega serif headline, a two-line sans subhead, a reassurance chip, then a stacked auth block (email input + lime button, an "or" rule, two OAuth buttons, legal fine print). Below, content moves into large rounded product-demo cards and occasional full-bleed teal/coral section panels. Rhythm is vertical and generous; alignment is centered through the conversion path and left-anchored in denser sections.

## Typography Signature
Apollo runs a deliberate two-voice split. **Display voice:** Season Mix, a serif, at 40–88px / weight 550 with tight leading — it makes a sales tool read like editorial print, which is the whole differentiation. **Working voice:** Söhne and ABC Diatype grotesques at 14–24px / weight 400–550, quiet and neutral, so the serif never has to compete. The tension between a broadsheet headline and utilitarian body copy is the signature — restraint everywhere except that one serif and that one lime button.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (bone `#F7F5F2` secondary) / text: `#000000` (muted `#736F6C`) / surface: `#CCC9C6` / border: `#CCC9C6` (strong `#94918E`) / accent: `#F8FF2C` highlighter / primary action: `#EBF212` electric lime (black text)

## Example Component Prompts
1. **Primary CTA button**: Electric-lime `#EBF212` fill, black `#000000` label, 18px Söhne weight 400, 8px radius, `0 16px` padding, no border, no shadow. Full-round pill (9999px) variant for the top nav.
2. **Serif hero headline**: Season Mix serif, 72–88px, weight 550, color `#000000` (accent lines in plum `#3F3653`), tight ~1.05 leading, two lines centered on a white canvas, with an 18px Söhne subhead beneath in `#000000`.
3. **Auth block**: White email input with `#1A1A1A` text and a hairline `#CCC9C6` border beside the lime button; below, an "or" rule and two white OAuth buttons with `1px` black borders and 8px radius; 12px `#736F6C` legal text with underlined black links.
4. **Product demo card**: Rounded 16px card on a warm tan/gold gradient ground, white inner surface, `#47423D` warm-brown body text, chat bubbles, and a `#F8FF2C` highlighter swipe behind one key phrase.
5. **Full-bleed section panel**: Edge-to-edge `#1F4A4C` teal (or `#E67E6C` coral) ground, white reversed headline in Season Mix, flat with no shadow.

## Similar Brands
- **Klim Type Foundry** — the Söhne/Founders Grotesk pairing, achromatic palette, and hairline restraint are straight from Klim's own house aesthetic.
- **Stripe** — the same disciplined, near-monochrome UI where a single saturated color carries all the action.
- **Ramp** — SaaS confidence expressed through flat surfaces, generous whitespace, and one high-voltage accent.
- **The New York Times / editorial print** — the serif-masthead-over-sans-body voice borrows the authority of a broadsheet.
- **Linear** — flat, shadow-averse, luminance-driven depth and a tightly rationed palette.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-ink-soft: #1A1A1A;
  --color-text-warm: #47423D;
  --color-text-muted: #736F6C;
  --color-plum: #3F3653;
  --color-white: #FFFFFF;
  --color-bone: #F7F5F2;
  --color-warm-grey: #CCC9C6;
  --color-border-strong: #94918E;
  --color-lime: #EBF212;
  --color-highlight: #F8FF2C;
  --color-teal: #1F4A4C;
  --color-coral: #E67E6C;

  /* Typography — Families */
  --font-display: 'Season Mix', Canela, 'GT Sectra', Georgia, serif;
  --font-body: 'Söhne', Inter, 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-paragraph: 'ABC Diatype', Inter, 'Helvetica Neue', ui-sans-serif, sans-serif;
  --font-mono: 'Founders Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-display-xl: 88px;
  --text-display: 72px;
  --text-h1: 64px;
  --text-h2: 56px;
  --text-h3: 48px;
  --text-h4: 40px;
  --text-subheading: 24px;
  --text-lead: 20px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --leading-tight: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-ink-soft: #1A1A1A;
  --color-text-warm: #47423D;
  --color-text-muted: #736F6C;
  --color-plum: #3F3653;
  --color-white: #FFFFFF;
  --color-bone: #F7F5F2;
  --color-warm-grey: #CCC9C6;
  --color-border-strong: #94918E;
  --color-lime: #EBF212;
  --color-highlight: #F8FF2C;
  --color-teal: #1F4A4C;
  --color-coral: #E67E6C;

  /* Typography — Families */
  --font-display: 'Season Mix', Canela, 'GT Sectra', Georgia, serif;
  --font-body: 'Söhne', Inter, 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-paragraph: 'ABC Diatype', Inter, 'Helvetica Neue', ui-sans-serif, sans-serif;
  --font-mono: 'Founders Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-display-xl: 88px;
  --text-display: 72px;
  --text-h1: 64px;
  --text-h2: 56px;
  --text-h3: 48px;
  --text-h4: 40px;
  --text-subheading: 24px;
  --text-lead: 20px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --leading-tight: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}
```