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

# Apollo GraphQL · Design System

> Technical clarity, lit by a restrained signal orange

**Theme:** light · **Industry:** devtools · **Source:** https://www.apollographql.com/ · **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 pairs a cinematic, near-black hero with a long, bright editorial journey through its AI and GraphQL platform. Restrained orange calls to action and product diagrams give the technical story focus without making the page feel crowded.

## North star

Let a near-black cinematic opening lead into clean, spacious white storytelling, using Apollo orange only to mark the next action.

## Overview

The page opens with a near-black hero, white centered headline, quiet supporting copy, and a subtle network-like visual that gives the technical message atmosphere. The rest of the page shifts into white and pale-gray content areas, with black or deep blue-gray text and thin gray dividers. Apollo orange is reserved for high-intent actions and small emphasis rather than broad colour fields; the closing CTA introduces a light cyan-to-warm gradient, while brighter cyan and orange hues also occur in diagrams. Aeonik supplies the characteristic rounded, clean display and body voice, supported by Inter for navigation, buttons, and captions. Content alternates centered statements with two-column product explanations, cards, proof points, and testimonial panels. Generous section breaks and restrained borders create a clear reading sequence, while product screenshots and diagrams provide the visual colour and technical specificity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, white content sections, and light button text. |
| Cloud Surface | `#f8f8f8` | `--color-cloud-surface` | surface | Pale footer and muted section backgrounds; occasionally used for text on orange buttons. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Headings, body copy, and dark text in measured component styles. |
| Apollo Orange | `#e75e15` | `--color-apollo-orange` | brand | Primary filled CTA background and key action emphasis. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted explanatory and supporting text. |
| Graphite Night | `#02060a` | `--color-graphite-night` | brand | Hero and footer backgrounds; anchors the page’s dark cinematic bookends. |
| Ember Orange | `#f06d2b` | `--color-ember-orange` | accent | Supporting warm hue in decorative gradient or button-edge treatments. |
| Rule Gray | `#d1d1d1` | `--color-rule-gray` | semantic | Fine card outlines and restrained dividers. |
| Diagram Teal | `#4ca6b5` | `--color-diagram-teal` | accent | A minor cool accent measured in button or gradient details. |
| Signal Coral | `#ff7b3c` | `--color-signal-coral` | accent | Warm gradient highlight and occasional decorative accent. |
| Ice Tint | `#eaf8fc` | `--color-ice-tint` | surface | Pale cyan section surface, used sparingly beyond the white content canvas. |
| Blue Charcoal | `#15252d` | `--color-blue-charcoal` | brand | Brand and content text token; also appears on dark buttons and cards. |
| Bright Cyan | `#68c8d8` | `--color-bright-cyan` | accent | Cool end of the measured gradient and occasional product-graphic detail. |
| Diagram Amber | `#e88c00` | `--color-diagram-amber` | accent | Warm gradient stop and illustration colour, not a dominant page surface. |
| Rust Link | `#c74100` | `--color-rust-link` | accent | Text-link colour for inline actions such as Talk to Apollo and Read more. |
| Deep Slate | `#111e24` | `--color-deep-slate` | semantic | Secondary dark graphic or interface surface, not a dominant canvas colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Cloud Surface) · `--color-surface-2` → `#02060a` (Graphite Night) · `--color-surface-3` → `#eaf8fc` (Ice Tint) · `--color-surface-4` → `#15252d` (Blue Charcoal) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#666666` (Quiet Gray) · `--color-text-subtle` → `#f8f8f8` (Cloud Surface) · `--color-border` → `#d1d1d1` (Rule Gray) · `--color-accent` → `#e75e15` (Apollo Orange) · `--color-accent-2` → `#ff7b3c` (Signal Coral) · `--color-accent-3` → `#68c8d8` (Bright Cyan) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f8f8` | 19.77:1 | AAA |
| `#000000` | `#02060a` | 1.03:1 | fail |
| `#000000` | `#eaf8fc` | 19.33:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f8f8f8` | 5.41:1 | AA |
| `#666666` | `#02060a` | 3.54:1 | AA-large |
| `#666666` | `#eaf8fc` | 5.29:1 | AA |
| `#f8f8f8` | `#ffffff` | 1.06:1 | fail |
| `#f8f8f8` | `#02060a` | 19.14:1 | AAA |

### Gradients

- `radial-gradient(at 50% 44%, rgb(2, 6, 10) 0px, color(srgb 0.00784314 0.0235294 0.0392157 / 0.9) 30%, rgba(0, 0, 0, 0) 68%)`
- `linear-gradient(rgba(0, 0, 0, 0) 55%, rgb(2, 6, 10) 100%)`
- `linear-gradient(to right, rgb(104, 200, 216), rgb(232, 140, 0) 46.154%, rgb(255, 123, 60))`
- `linear-gradient(rgb(2, 6, 10), rgb(2, 6, 10)), conic-gradient(from 425.94deg, rgb(76, 166, 181), rgb(240, 109, 43), rgb(76, 166, 181))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __aeonikFont_a2019c | `--font-body` | webfont | 400, 500, 700 | Display, headings, body copy, and prominent content links. | Inter |
| __Inter_69d019 | `--font-inter-69d019` | webfont | 400, 500, 700, 600, 900 | Navigation, buttons, captions, and uppercase eyebrow labels. | Inter |

- **__aeonikFont_a2019c:** Use a clean geometric sans feel; measured headings are regular weight with tight negative tracking, while body copy stays open and readable.
- **__Inter_69d019:** Medium weight for controls; compact tracking on navigation and buttons, with spaced uppercase eyebrow styling.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.05 | -0.025em | — | __aeonikFont_a2019c | Large hero and high-impact campaign headline. |
| h1 | 42px | 400 | 1.25 | -0.025em | — | __aeonikFont_a2019c | Primary page title or major section headline. |
| h2 | 36px | 400 | 1.25 | -0.025em | — | __aeonikFont_a2019c | Main section headings, often centered. |
| h3 | 32px | 400 | 1.15 | -0.025em | — | __aeonikFont_a2019c | Product and feature subsection headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | __aeonikFont_a2019c | Smaller card or supporting content headings. |
| body | 16px | 400 | 1.5 | 0 | — | __aeonikFont_a2019c | Explanatory paragraphs and product descriptions. |
| caption | 14px | 400 | 1.43 | 0 | — | __Inter_69d019 | Small labels, captions, and supporting metadata. |
| button | 15px | 500 | 1.5 | -0.01em | — | __Inter_69d019 | CTA labels and other actionable control text. |
| nav | 15px | 500 | 1.5 | -0.01em | — | __Inter_69d019 | Top-level navigation and site controls. |
| eyebrow | 18px | 500 | 1.25 | 0.08em | uppercase | __Inter_69d019 | Uppercase section labels and short pre-headings. |
| code | 14px | 400 | 1.43 | 0.05em | uppercase | __firaCodeFont_e66e50 | Technical labels or code-oriented interface text. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 5, 6, 8, 12, 13, 16, 24, 32, 40, 48, 60, 64, 72, 80, 96 px.
- Section rhythm 32px · element gap 8px · card padding 32px · max content width 1376px.

The opening is a full-width, centered hero beneath announcement and navigation bars. Main content uses a measured page max width of 1376px, with frequent two-column product and explanatory sections, centered section introductions, and occasional three-column content. White is the dominant canvas; pale and dark bands distinguish specific moments rather than every section. Section spacing follows a compact measured system with a 32px section gap and 8px element gap, while product cards use 32px padding. Thin rules and consistent alignment keep the long page easy to scan.

## Shape & elevation

- Radius: button `9999px` · card `16px` · nav `8px` · link `9999px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `lg` (button): `oklab(0.676334 -0.0761707 -0.0438474 / 0.25) 2.93067px -1.06933px 16px 0px, oklab(0.684393 0.128583 0.123575 / 0.25) -2.93067px 1.06933px 16px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall treatment is flat and editorial: white sections, fine gray borders, and minimal card separation. Cards have measured 16px radii and 32px padding, while navigation and CTA shapes use their own measured rounded treatments. A complex colored shadow was measured on a button, but the screenshots favour restrained outlines and subtle glow accents rather than broad elevation.

## Imagery

The hero uses a dark, atmospheric network visual behind centered text, with customer logos arranged beneath. Product sections use interface screenshots, diagrams, and a video thumbnail, typically paired with explanatory copy rather than filling the viewport. A later architecture graphic carries cyan, teal, and warm orange hues; treat those as illustration colours, not the main site palette. Testimonial cards rely on text, attribution, and customer marks.

## Components

### Top announcement

Slim dark livestream strip above the main navigation, with compact event messaging, a light pill action, and a close control.

### Navigation bar

Dark horizontal header with Apollo mark, compact Inter navigation, search, outlined Contact Us action, and orange Start for free pill.

### Hero actions

Centered hero copy paired with two rounded actions: an orange-accent Talk to Apollo link and a quiet outlined secondary action.

### Product feature cards

Two-column GraphOS feature presentation with eyebrow labels, Aeonik headings, product imagery, concise descriptions, and text links.

### Customer testimonial card

White quote card with a thin #d1d1d1 outline, 16px radius, 32px padding, attribution, and customer logo.

### Primary CTA

Strong orange, fully rounded action; lower-page CTA sits over a cyan-to-warm gradient background.

### Footer link columns

Near-black footer with Apollo identity, multiple grouped link columns, thin divider, and compact social and legal details.

### Measured component styles

- **Primary button** (“Start for free”): background #e75e15 · text #ffffff · border 1px solid #e75e15 · radius 999px · padding 0px 18px · 500 14px __Inter_69d019
- **Secondary button** (“Watch livestream”): background #ffffff · text #000000 · radius 999px · padding 4px 24px · 400 18px Aeonik
- **Link** (“Talk to Apollo →”): transparent background · text #c74100 · radius 999px · padding 0px · 500 16px __aeonikFont_a2019c
- **Card** (““Now our agents can analyze spend agains”): transparent background · text #000000 · border 1px solid #d1d1d1 · radius 16px · padding 32px · 400 16px __aeonikFont_a2019c
- **Navigation item** (“Products Solutions Resources Company Pri”): transparent background · text #15252d · radius 0px · padding 0px · 400 16px __Inter_69d019

## Do

- Open with a near-black hero and high-contrast centered message.
- Use Apollo Orange #e75e15 for primary actions, not large content panels.
- Pair product explanations with interface imagery or diagrams.
- Keep section headings crisp, regular-weight, and generously separated.
- Use thin neutral borders to define cards and content transitions.
- Reserve bright cyan and warm gradients for graphics and the closing CTA.

## Don't

- Don't turn the mostly white content body into a sequence of coloured bands.
- Don't use orange as the default text or paragraph colour.
- Don't crowd the hero with extra elements around its central message.
- Don't add heavy drop shadows to ordinary cards.
- Don't treat illustration colours as the core brand palette.
- Don't replace product diagrams with unrelated lifestyle photography.

## Agent prompt

Build a new Apollo-style SaaS page with a cinematic #02060a hero, white headline and quiet supporting copy, then transition into spacious white editorial sections. Use Gallery White #ffffff as the main canvas, Cloud Surface #f8f8f8 for occasional muted areas, and Apollo Orange #e75e15 only for primary actions. Use Rust Link #c74100 for text links and Rule Gray #d1d1d1 for fine borders. Set headings and body in a clean Aeonik-like sans, with Inter-like navigation, captions, and controls. Arrange product stories in centered introductions and two-column layouts, pairing concise copy with interface screenshots or diagrams. Keep cards lightly outlined, use rounded pill CTAs, and finish with a near-black multi-column footer. Bright cyan and warm gradient colours belong in graphics or the closing CTA, not everywhere.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width near-black hero beneath the site header; centered headline, description, actions, and customer marks. | Primary and secondary actions, Customer trust logos, Motion pause control | Near-black canvas, White centered type, Subtle network backdrop, Rounded actions |
| 2 | feature-split | White two-column explanatory section with a centered heading and supporting content. | Explain the core concept, Inline further-reading link | Centered section title, Two-column text, Fine section divider |
| 3 | video | Two-column section with text on the left and a video thumbnail on the right. | Play video, Customer case study | White canvas, Product storytelling, Video thumbnail |
| 4 | cta | Centered callout on a pale, full-width section band. | Readiness-oriented CTA, Talk-to-sales link | Centered copy, Muted surface, Small text link |
| 5 | product-showcase | Centered headline followed by two side-by-side product feature columns. | Compare platform capabilities, Explore product links | Eyebrow labels, Product screenshots, Two-column feature layout |
| 6 | other | Standalone centered heading with generous surrounding white space. | Set up next section | Centered headline, Open white space |
| 7 | how-it-works | Three-column use-case navigation beside a large architecture diagram. | Switch between use cases, Show shared system model | Feature labels, Product diagram, Cyan and warm graphic accents |
| 8 | stats | A short centered introduction above proof points and metrics. | Build enterprise confidence, Quantify platform adoption | Compact heading, Supporting copy, Metrics-led proof |
| 9 | testimonials | Horizontally arranged testimonial cards in a multi-column row. | Browse customer quotes, Use carousel arrows | Outlined white cards, Quote and attribution, Customer logos |
| 10 | cta | Full-bleed atmospheric gradient with centered label, headline, and CTA. | Contact Apollo, Single focused action | Cyan-to-warm gradient, Centered composition, Orange pill button |
| 11 | footer | Full-width near-black footer with brand row, five link columns, and a bottom utility strip. | Browse grouped site links, Access social and legal links | Dark surface, Multi-column navigation, Thin divider |

## Source CSS custom properties (selected)

```css
--color-brand-primary: #15252d;
--color-brand-accent: #e75e15;
--color-surface-default: #f8f8f8;
--color-surface-elevated: #f6f6f6;
--color-surface-muted: #9fb2bc;
--color-surface-deep: #15252d;
--color-surface-alt: #f6f6f6;
--color-surface-alt-2: #efefef;
--color-surface-alt-3: #e3e3e3;
--color-content-primary: #15252d;
--color-content-muted: #666;
--color-border-default: #d1d1d1;
--aa-spacing-factor: 1;
--aa-spacing: calc(16*1*1px);
--aa-spacing-half: calc(calc(16*1*1px)/2);
--aa-font-size: calc(16*1px);
--aa-font-family: inherit;
--aa-font-weight-medium: 500;
--aa-font-weight-semibold: 600;
--aa-font-weight-bold: 700;
--aa-icon-color-rgb: 119,119,163;
--aa-icon-color-alpha: 1;
--aa-text-color-rgb: 38,38,39;
--aa-text-color-alpha: 1;
--aa-primary-color-rgb: 62,52,211;
--aa-primary-color-alpha: .2;
--aa-muted-color-rgb: 128,126,163;
--aa-muted-color-alpha: .6;
--aa-panel-border-color-rgb: 128,126,163;
--aa-panel-border-color-alpha: .3;
--aa-input-border-color-rgb: 128,126,163;
--aa-input-border-color-alpha: .8;
--aa-background-color-rgb: 255,255,255;
--aa-background-color-alpha: 1;
--aa-input-background-color-rgb: 255,255,255;
--aa-input-background-color-alpha: 1;
--aa-selected-color-rgb: 179,173,214;
--aa-selected-color-alpha: .205;
--aa-description-highlight-background-color-rgb: 245,223,77;
--aa-description-highlight-background-color-alpha: .5;
```

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