---
title: "Apollo design system"
variant: extended
source: https://www.apollo.io/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/apollo-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Apollo · Design System

> Editorial clarity with a bright signal of lime

**Theme:** light · **Industry:** saas · **Source:** https://www.apollo.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Apollo presents its connected GTM platform through editorial typography, broad white space, and restrained product-interface imagery. Bright lime marks key signup actions, while warm neutral bands give selected proof and conversion sections a distinct backdrop.

## North star

Keep the page editorial and spacious, using black type for hierarchy and lime only where users should act.

## Overview

Apollo’s visual system pairs a predominantly white canvas with occasional warm neutral section bands, keeping the long SaaS homepage calm and readable. Black display headlines carry the editorial character; compact sans-serif body copy and navigation keep product explanations practical. The vivid lime accent is reserved for signup actions and selected interface details, so it reads as a clear interaction signal rather than a background colour. The page alternates centered hero content with broad, alternating product-feature splits, then uses a three-part process diagram, a pale proof grid, enterprise information, and testimonial cards to vary the rhythm. Product screenshots sit inside soft neutral frames, while people photography appears in customer proof. Rounded cards and restrained hairlines provide definition without heavy shadows. The measured palette is authoritative; bright multicolour artwork visible in the final CTA belongs to its graphic treatment, not the site’s general surface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, hero, most feature sections, and card surfaces. |
| Warm Concrete | `#ccc9c6` | `--color-warm-concrete` | surface | Distinct closing CTA and footer background bands. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Display headings, navigation, primary text, dark CTA states, and strong outlines. |
| Soft Black | `#1a1a1a` | `--color-soft-black` | semantic | Muted body copy and supporting text where full black is too strong. |
| Warm Umber | `#47423d` | `--color-warm-umber` | semantic | Secondary copy and subdued text links, including workspace navigation. |
| Signal Lime | `#ebf212` | `--color-signal-lime` | accent | Primary signup buttons and selective product-interface highlights. |
| Sage Hairline | `#e4e5d9` | `--color-sage-hairline` | semantic | Fine borders and dividers around cards and controls. |
| Stone Gray | `#736f6c` | `--color-stone-gray` | neutral | Low-emphasis utility text, footer details, and secondary control labels. |
| Oat Milk | `#f7f5f2` | `--color-oat-milk` | surface | Pale proof-section band and warm testimonial card surfaces. |
| Olive Charcoal | `#4d4d41` | `--color-olive-charcoal` | neutral | Occasional subdued supporting text; not a defining page background. |
| Pewter Line | `#94918e` | `--color-pewter-line` | neutral | Low-contrast borders and minor interface outlines. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ccc9c6` (Warm Concrete) · `--color-surface-2` → `#f7f5f2` (Oat Milk) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#1a1a1a` (Soft Black) · `--color-text-subtle` → `#47423d` (Warm Umber) · `--color-border` → `#e4e5d9` (Sage Hairline) · `--color-accent` → `#ebf212` (Signal Lime) · `--color-on-accent` → `#000000` (Carbon Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ccc9c6` | 12.74:1 | AAA |
| `#000000` | `#f7f5f2` | 19.3:1 | AAA |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#ccc9c6` | 10.56:1 | AAA |
| `#1a1a1a` | `#f7f5f2` | 15.99:1 | AAA |
| `#47423d` | `#ffffff` | 9.93:1 | AAA |
| `#47423d` | `#ccc9c6` | 6.02:1 | AA |
| `#47423d` | `#f7f5f2` | 9.13:1 | AAA |
| `#ebf212` | `#ffffff` | 1.22:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| abcDiatype | `--font-body` | webfont | 400, 700 | Body copy, navigation, captions, and bold text links. | Inter |
| seasonMix | `--font-display` | webfont | 550 | Display headlines and major section headings. | DM Serif Display |
| foundersGroteskMono | `--font-mono` | webfont | 400 | Small uppercase labels and code-like eyebrow text. | Space Mono |

- **abcDiatype:** Use regular body weights, bold links, and compact practical copy; avoid adding decorative tracking.
- **seasonMix:** Editorial serif-like display treatment, medium weight, tight negative tracking, and close leading.
- **foundersGroteskMono:** Use sparingly for short uppercase metadata with slightly open tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 550 | 1 | -0.01em | — | seasonMix | Oversized editorial statements and prominent campaign headlines. |
| h1 | 64px | 550 | 1.05 | -0.01em | — | seasonMix | Primary hero headline and major page-level statement. |
| h2 | 56px | 550 | 1.05 | -0.01em | — | seasonMix | Section headlines such as enterprise and proof narratives. |
| h3 | 48px | 550 | 1.1 | -0.01em | — | seasonMix | Feature and supporting content headings. |
| h4 | 40px | 550 | 1.1 | -0.01em | — | seasonMix | Smaller card or subsection headings. |
| body | 16px | 400 | 1.3 | 0 | — | abcDiatype | Feature descriptions, signup guidance, and general explanatory copy. |
| caption | 14px | 400 | 1.3 | 0 | — | abcDiatype | Compact labels, helper text, and customer-role details. |
| nav | 16px | 400 | 1.3 | 0 | — | abcDiatype | Top-level navigation and menu labels. |
| link | 16px | 700 | 1.3 | 0 | — | abcDiatype | Emphasized inline links and feature exploration actions. |
| code | 12px | 400 | 1.2 | 0.014em | uppercase | foundersGroteskMono | Eyebrow labels and short uppercase section identifiers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 54, 56, 80 px.
- Section rhythm 56px · element gap 8px · card padding 24px · max content width —.

The page uses a centered, wide desktop composition with a compact top navigation and a large centered hero. Below, alternating two-column feature sections switch text and product media from side to side, followed by full-width process, proof, and testimonial areas. The measured page has no fixed maximum width; screenshots show generous outer margins and comfortable density. Repeated section gaps and card padding create a steady long-scroll rhythm, while the CTA and footer form a more substantial closing band.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `12px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `27px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: section backgrounds, rounded cards, and subtle borders do the structural work instead of prominent shadows. Cards use measured rounded corners, with neutral fills distinguishing testimonial surfaces. Product imagery sits on pale frames. Keep layering restrained and use thin outlines for controls and separators.

## Imagery

Product UI screenshots are the primary feature imagery, framed within pale neutral panels and shown large enough to read as software rather than decoration. Customer portraits and company marks support trust and testimonials. The process section uses small explanatory illustrations. The hero includes a motion-led product or people showcase; the vivid, multicolour treatment in the final CTA is an isolated campaign graphic, not a general colour rule.

## Components

### Header navigation

A compact horizontal bar with black navigation labels, brand mark, demo action, and a Signal Lime signup button.

### Hero signup panel

Centered editorial headline and supporting copy above signup choices, email entry, and outlined Google or Microsoft options.

### Primary CTA

Signal Lime fill (#ebf212), black text (#000000), and measured 8px corner radius.

### Feature split

Alternating text and product screenshot columns, with concise copy, feature bullets, and a plain text exploration link.

### Process cards

Three connected Data, Intelligence, and Execution cards with explanatory copy and small illustrations.

### Proof cards

Pale warm cards with customer quotes or capability claims; use measured 16px card radius for testimonial surfaces.

### Footer link columns

Dense multi-column product, resource, and company links on a broad warm gray closing surface.

### Measured component styles

- **Primary button** (“Sign up for free”): background #ebf212 · text #000000 · radius 8px · padding 0px 16px · 400 18px soehne
- **Secondary button** (“Sign up with Google”): transparent background · text #000000 · border 1px solid #000000 · radius 8px · padding 0px 20px · 400 18px soehne
- **Link** (“Workspace”): transparent background · text #47423d · radius 0px · padding 0px · 700 16px abcDiatype
- **Input**: transparent background · text #1a1a1a · radius 0px · padding 0px 12px · 400 16px soehne
- **Card** (“Built on deep GTM context GTM Harness tr”): background #ffffff · text #000000 · radius 8px · padding 24px · 400 18px soehne
- **Navigation item** (“Products Solutions Resources Customers P”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px soehne

## Do

- Use Gallery White for the default canvas.
- Set major headlines in the editorial display face.
- Keep supporting copy compact and easy to scan.
- Reserve Signal Lime for signup and selected highlights.
- Alternate product media and copy across feature sections.
- Use warm neutral bands to distinguish proof and conversion areas.

## Don't

- Do not spread lime across large page backgrounds.
- Do not use heavy shadows to separate every card.
- Do not turn product screenshots into decorative thumbnails.
- Do not crowd the hero with extra competing messages.
- Do not apply the CTA’s multicolour graphic treatment across the page.
- Do not make every section a centered card grid.

## Agent prompt

Build a new Apollo-style SaaS page with a calm Gallery White (#ffffff) canvas and strong editorial headlines in a display serif-like face. Use Carbon Ink (#000000) for headings and navigation; keep explanatory copy compact and restrained. Signal Lime (#ebf212) should identify the main signup action, not become a broad background colour. Structure the page with a centered hero, alternating two-column feature sections, and full-width proof or process blocks. Use Oat Milk (#f7f5f2) for selected card or section surfaces and Warm Concrete (#ccc9c6) only for a distinct closing band. Frame legible product UI in pale neutral panels, use customer imagery for proof, and rely on rounded cards and fine borders rather than strong shadows. Preserve generous whitespace and clear scan paths.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above signup controls, with broad product media below. | primary signup, email capture, social signup | large editorial headline, lime CTA, outlined provider buttons |
| 2 | logo-cloud | A compact horizontal band of company logos. | social proof | small uppercase eyebrow, monochrome logos |
| 3 | feature-split | Single feature section with product media beside explanatory copy. | feature exploration, integration reassurance | product screenshot, feature bullets, text link |
| 4 | feature-split | Alternating text and product-image columns. | benefit explanation, layer exploration | interface mockup, short bullet list |
| 5 | feature-split | Alternating product illustration and text columns. | automation explanation, feature link | workflow interface, feature bullets |
| 6 | feature-split | Text and product UI in an alternating two-column feature layout. | data-quality proof, explore data layer | dashboard screenshot, metric bullets |
| 7 | how-it-works | A centered explanatory heading above three connected layer cards. | system explanation, layer discovery | three-part diagram, illustrated cards |
| 8 | feature-grid | Pale full-width band with centered heading and four feature cards. | capability comparison | four-column card grid, icon-led claims |
| 9 | faq | Two-column enterprise introduction and expandable information rows. | enterprise exploration, expandable details | outlined action, divided disclosure rows |
| 10 | logo-cloud | Eight evenly spaced certification marks in one horizontal row. | compliance reassurance | badge tiles, small labels |
| 11 | testimonials | Large customer-count statistic followed by a four-column testimonial carousel. | customer proof, carousel navigation | oversized statistic, portrait cards, company marks |
| 12 | cta | Two-column closing CTA with copy and signup form beside campaign artwork. | email capture, free signup, social signup | contrasting CTA band, lime action, graphic backdrop |
| 13 | footer | Large warm gray footer with brand area and multiple link columns. | site navigation, policy access, social discovery | brand mark, multi-column links, compact text |

## Source CSS custom properties (selected)

```css
--PhoneInput-color--focus: #03b2cb;
--PhoneInputCountrySelectArrow-borderWidth: 1px;
--PhoneInputCountrySelectArrow-color: currentColor;
--PhoneInputCountrySelectArrow-color--focus: #03b2cb;
--PhoneInputCountryFlag-borderWidth: 1px;
--PhoneInputCountryFlag-borderColor: #00000080;
--PhoneInputCountryFlag-borderColor--focus: #03b2cb;
--PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/apollo-io