<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: CircleCI
tagline: Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent.
updated_at: 2026-05-28T23:12:04.434Z
published_at: 2026-05-28T23:12:04.434Z
author: webdesignhot
source_url: https://circleci.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [light, structured, sans, developer, ci]
preview_swatch: ['#ffffff', '#00db75', '#2e3c52']
related: [vercel, stripe, linear]
description: 'CircleCI is a CI/CD platform whose marketing site runs a two-register split: a near-black hero band carrying a 71px white Inter headline at weight 500, dropping into a light `#ffffff` content canvas with `#343434` body text. The chrome is navy `#2e3c52` — the secondary CTA (''Watch a demo'') is a full-pill navy button with white text, while the dominant call to action inverts to near-black-on-white. The brand''s chromatic signature is CircleCI green `#00db75`, used as a restrained accent: status dots, success states, link emphasis, and the occasional pipeline-stage indicator — never as a section fill. (Note: the same green surfaces on the cookie-consent ''Allow all cookies'' button, but that is a reuse of the brand accent, not a separate colour.) The type is Inter throughout — display and body — with display held at weight 500 rather than the 700-weight most SaaS sites push to, which gives the headlines a calm, engineered confidence rather than a shout. The atmosphere is dashboard-coherent: a platform that monitors pipelines should look like a tool that reads green-for-pass, navy-for-structure, near-black-for-focus, and reserves colour for signal.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-faint
  border: border
colors:
  bg: '#ffffff'
  surface: '#f7f7f7'
  surface-elev: '#f0f1f3'
  hero-ink: '#161618'
  hero-ink-soft: '#1f2024'
  text: '#343434'
  text-secondary: '#5a5a5a'
  text-tertiary: '#767676'
  text-faint: '#9a9a9a'
  text-on-dark: '#ffffff'
  text-on-dark-soft: '#c5c8cf'
  brand: '#00db75'
  brand-deep: '#00b85f'
  brand-ink: '#005700'
  brand-soft: 'rgba(0, 219, 117, 0.12)'
  brand-tint: 'rgba(0, 219, 117, 0.06)'
  navy: '#2e3c52'
  navy-deep: '#243044'
  navy-soft: 'rgba(46, 60, 82, 0.08)'
  on-brand: '#005700'
  on-navy: '#ffffff'
  cta-bg: '#161618'
  cta-text: '#ffffff'
  cta-secondary-bg: '#2e3c52'
  cta-secondary-text: '#ffffff'
  link: '#1a73c7'
  link-hover: '#155a9e'
  border: '#e3e4e8'
  border-soft: '#eeeff1'
  border-strong: '#cdcfd6'
  shadow-ambient: 'rgba(20, 24, 33, 0.04)'
  shadow-card: 'rgba(20, 24, 33, 0.08)'
  shadow-elev: 'rgba(20, 24, 33, 0.12)'
  scrim: 'rgba(22, 22, 24, 0.55)'
  success: '#00b85f'
  success-soft: 'rgba(0, 184, 95, 0.12)'
  warning: '#e0a000'
  warning-soft: 'rgba(224, 160, 0, 0.12)'
  danger: '#d93838'
  danger-soft: 'rgba(217, 56, 56, 0.12)'
  info: '#1a73c7'
  info-soft: 'rgba(26, 115, 199, 0.10)'

typography:
  display:
    family: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [500, 600, 700]
    opentype-features: ['kern', 'liga', 'cv11']
  body:
    family: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 500, 600]
    opentype-features: ['kern', 'liga']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
    opentype-features: ['liga', 'calt']
  scale:
    display-hero:    { size: 71, weight: 500, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    display-lg:      { size: 56, weight: 500, lineHeight: 1.08, tracking: '-0.018em', family: display }
    h1:              { size: 40, weight: 600, lineHeight: 1.12, tracking: '-0.015em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.006em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0.01em',  family: body }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.4,  tracking: '0.06em',   family: body, transform: uppercase }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    code-inline:     { size: 14, weight: 500, lineHeight: 1.5,  tracking: '0',        family: mono }
    code-block:      { size: 13, weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:    { bg: cta-bg, text: cta-text, padding: '12px 22px', radius: 9999 }
  button-secondary:  { bg: navy, text: on-navy, padding: '12px 22px', radius: 9999 }
  button-ghost:      { bg: transparent, text: text, border: border-strong, padding: '12px 22px', radius: 9999 }
  button-accent:     { bg: brand, text: on-brand, padding: '12px 22px', radius: 9999 }
  card:              { bg: bg, border: border, radius: 12, padding: 24 }
  input:             { bg: bg, border: border-strong, text: text, radius: 8, padding: '10px 14px' }
  badge:             { bg: brand-soft, text: brand-ink, radius: 9999, padding: '4px 10px' }
  nav:               { bg: hero-ink, text: text-on-dark, height: 64 }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-out-soft: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: 'rgba(20, 24, 33, 0.04) 0 1px 2px'
  card: 'rgba(20, 24, 33, 0.08) 0 2px 8px, rgba(20, 24, 33, 0.04) 0 1px 2px'
  elevated: 'rgba(20, 24, 33, 0.12) 0 8px 24px -6px, rgba(20, 24, 33, 0.06) 0 2px 6px'
  popover: 'rgba(20, 24, 33, 0.16) 0 12px 32px -8px'
  modal: 'rgba(20, 24, 33, 0.24) 0 24px 64px -16px'

accessibility:
  contrast-text-on-bg: 10.9                 # #343434 on #ffffff — AAA at body sizes
  contrast-text-secondary-on-bg: 6.3        # #5a5a5a on #ffffff — AA+ at body sizes
  contrast-hero-text-on-ink: 16.3           # #ffffff on #161618 — AAA at all sizes
  contrast-on-navy: 9.6                      # #ffffff on #2e3c52 — AAA at all sizes
  contrast-brand-on-bg: 1.5                  # #00db75 on #ffffff — fails text; accent/iconography only
  contrast-brand-ink-on-brand: 5.0           # #005700 on #00db75 — AA at body sizes (pill text)
  focus-ring: '2px solid #00db75 + 2px outline-offset; navy ring on light, green ring on dark'
  reduced-motion-honored: true
  touch-target-min: 44

dark-mode: hero-band-only                    # No site-wide dark theme; the hero is a near-black band inside a light page

lineage:
  summary: 'CircleCI''s marketing identity belongs to the developer-tool tradition that pairs an engineered sans with disciplined colour: Inter for everything, a near-black hero band, a light content canvas, and a single vivid brand-green reserved for signal. The split between a dark hero and a light body descends from the GitHub / Stripe register where the top of the page reads as a terminal-comfortable showcase and the rest reads as documentation-adjacent prose. The navy chrome (`#2e3c52`) and full-pill CTAs echo the modern dev-platform consensus established by Vercel and Linear — text-colour-on-canvas primary CTAs, restrained accent colour, hairline borders — but CircleCI keeps its green as the chromatic memory of a brand built around the pass/fail semantics of continuous integration. Green means a build passed; that semantic is the brand. The type discipline (Inter held at weight 500 for display rather than 700) signals the same calm-precision register that Stripe and Vercel cultivate. What CircleCI rejects: warm cream surfaces, serif body copy, heavy consumer-product shadows, and using the brand-green as a section background — the green is a status indicator, not a wash.'
  influences:
    - name: 'Inter (Rasmus Andersson)'
      role: 'The entire type system — display and body — set in Inter; the engineered, screen-optimised sans that anchors the calm-precision register.'
      url: 'https://rsms.me/inter/'
    - name: 'Vercel'
      role: 'Adjacent dev-platform peer; shared discipline of text-colour-on-canvas primary CTAs, hairline borders, and restrained accent colour over fills.'
      url: 'https://vercel.com'
    - name: 'Linear'
      role: 'Dev-tool contemporary; the full-pill CTA geometry and navy/near-black chrome with a single signal colour trace to this register.'
      url: 'https://linear.app'
    - name: 'Stripe'
      role: 'Dark-hero-into-light-body section cadence and developer-product-as-magazine framing descend from Stripe''s marketing register.'
      url: 'https://stripe.com'
    - name: 'GitHub'
      role: 'CI/CD-adjacent platform; the pass/fail green semantic and dense status-driven UI inform CircleCI''s green-for-signal discipline.'
      url: 'https://github.com'
---

## 1. Visual Theme & Atmosphere

CircleCI's marketing site runs a deliberate two-register split. The page opens on a **near-black hero band** — a `#161618` ground carrying a 71px white headline set in Inter at weight 500 — then drops into a **light `#ffffff` content canvas** where body copy lands in `#343434` at 16px / 400. The transition is the brand's primary gesture: the dark band reads as a terminal-comfortable showcase (this is a developer tool; the top of the page should feel like a dashboard you'd trust to watch your pipelines), and the light body reads as documentation-adjacent prose (this is also a platform you'll read closely, configure carefully, integrate deliberately). The split is not decorative — it's the brand telling you, in the first scroll, that it lives in both worlds: the dark dashboard and the bright docs.

The chrome is **navy `#2e3c52`** — a desaturated blue-grey that carries the secondary call to action ('Watch a demo' renders as a full-pill navy button with white text) and structural framing. The navy is the brand's "structure" colour: it's calmer than the near-black hero, warmer than pure grey, and it gives the page a sense of engineered scaffolding without the loudness of a saturated blue. Where the hero is near-black for focus and the body is white for reading, the navy is the connective tissue — section accents, secondary actions, the occasional inverted band.

The chromatic signature — and the part most likely to be misread by an automated audit — is **CircleCI green `#00db75`**. The probe caught this green on the 'Allow all cookies' cookie-consent button, but that's a *reuse* of the brand accent, not a separate colour. CircleCI's identity has always been built around green: in continuous integration, green means a build passed, a test suite is clean, a pipeline is healthy. The green is the brand's semantic memory. It appears as status dots, success indicators, link emphasis on the dark band, pipeline-stage markers, and small accent fills — but **never as a section background or a primary button fill**. The discipline is identical to Vercel withholding its blue from buttons: the green is signal, and signal loses meaning the moment it becomes wallpaper.

The type is **Inter throughout** — display and body, no second face. What distinguishes CircleCI's typographic register is the display weight: where most SaaS sites push hero copy to 700 or 800, CircleCI holds the 71px hero at **weight 500**. The effect is calm rather than shouty — an engineered confidence that says "we don't need to raise our voice." Inter's screen-optimised silhouette (tall x-height, open apertures, near-zero tracking at body sizes) carries both the dark-hero display and the light-body prose without a tonal seam. The negative tracking compresses with size: `-0.02em` at the 71px hero, easing to zero by body.

The atmospheric vocabulary that captures CircleCI's feeling: *near-black-hero, light-body, navy-chrome, green-for-pass, Inter-everywhere, weight-500-calm, full-pill-CTA, hairline-grey, status-driven, dashboard-coherent, signal-not-wallpaper, terminal-comfortable, documentation-adjacent.* Every surface lands like it was designed by a team that watches pipelines for a living — green is precious, structure is navy, focus is near-black, and reading is bright white.

**Key Characteristics**
- Two-register split: near-black `#161618` hero band → light `#ffffff` content canvas
- Hero headline in white Inter at 71px / weight 500 — calm, not shouty
- Body text `#343434` at 16px / 400 on white — 10.9:1 contrast, AAA at body sizes
- Navy `#2e3c52` chrome — secondary CTA fill, structural framing, inverted bands
- CircleCI green `#00db75` as a *restrained accent* — status, success, signal — never a fill
- Inter for the entire system; no second typeface anywhere
- Display weight capped at 500–600 rather than the 700–800 SaaS default
- Full-pill (9999px) CTA geometry across primary, secondary, and accent buttons
- Primary CTA inverts to near-black-on-white; secondary is navy; accent is green
- Hairline borders `#e3e4e8` carry most of the elevation work on the light canvas
- Soft, near-invisible shadows tinted toward the navy ink rather than pure black
- Green carries the pass/fail semantic of continuous integration — the brand's core meaning

## 2. Color Palette & Roles

### Canvas & Surface

- **Canvas** (`#ffffff`): the content background — pure white. The reading surface for everything below the hero band. CircleCI commits to true white for the body rather than a near-white tint; the contrast against the dark hero is the brand's primary structural signal.
- **Surface** (`#f7f7f7`): subtle elevation — section bands, inset blocks, code-block fills on the light canvas. A barely-grey lift above the white.
- **Surface Elev** (`#f0f1f3`): second-tier surface — nested panels, comparison-table stripes, quiet card fills.
- **Hero Ink** (`#161618`): the near-black hero band ground — the dark register that opens the page and frames inverted sections. Carries white display copy at 16.3:1.
- **Hero Ink Soft** (`#1f2024`): a lifted near-black for cards or panels resting *inside* the hero band.

### Text

- **Body Text** (`#343434`): primary text and prose — near-charcoal on white at 10.9:1, AAA at body sizes. The brand's default reading colour (probed live).
- **Text Secondary** (`#5a5a5a`): supporting copy, dense-row body, captions on the light canvas.
- **Text Tertiary** (`#767676`): meta, timestamps, quiet labels.
- **Text Faint** (`#9a9a9a`): placeholder, disabled controls, faintest meta.
- **Text on Dark** (`#ffffff`): white display and body copy on the hero band and navy chrome.
- **Text on Dark Soft** (`#c5c8cf`): secondary copy on the dark band — a cool light-grey.

### Brand

- **CircleCI Green** (`#00db75`): the canonical brand accent — a vivid signal green. Applied to status dots, success indicators, accent fills, pipeline markers, and link emphasis on the dark band. **Never a section background or primary button fill.** (Surfaces on the cookie-consent button as a reuse of this accent.)
- **Brand Deep** (`#00b85f`): a darkened green for hover states and on light grounds where the vivid green needs more body.
- **Brand Ink** (`#005700`): deep green text/iconography placed *on* the green pill or wash — the only legible foreground on the green accent (5.0:1, AA at body).
- **Brand Soft** (`rgba(0, 219, 117, 0.12)`): a soft green wash for success banners, badge backgrounds, and status-pill fills.
- **Brand Tint** (`rgba(0, 219, 117, 0.06)`): the subtlest green tint for `aria-current` rows or very quiet emphasis.

### Navy (Structural)

- **Navy** (`#2e3c52`): the chrome colour — secondary CTA fill ('Watch a demo'), structural accents, inverted feature bands. White text on navy reads at 9.6:1.
- **Navy Deep** (`#243044`): pressed/active navy, hover deepening for navy buttons.
- **Navy Soft** (`rgba(46, 60, 82, 0.08)`): a quiet navy wash for selected nav, info accents, and structural tints.

### Interactive

- **Link** (`#1a73c7`): inline body links on the light canvas — a calm blue, no underline at rest, underline on hover. (CircleCI uses a blue link colour on white rather than the brand-green, which lacks text contrast against white.)
- **Link Hover** (`#155a9e`): darkened link blue on hover.
- **CTA Background** (`#161618`): primary CTA fill — near-black, matching the hero ink. The dominant action is inverted, not green.
- **CTA Secondary** (`#2e3c52`): navy secondary CTA fill ('Watch a demo').
- **Focus** (`#00db75` with a 2px ring): keyboard focus indicator — the green ring on dark grounds, navy on light, with 2px outline-offset.

### Borders

- **Border Default** (`#e3e4e8`): the default hairline on the light canvas — card edges, input borders, dividers.
- **Border Soft** (`#eeeff1`): the quietest separation — internal dividers, table row lines.
- **Border Strong** (`#cdcfd6`): outlined ghost buttons, focused inputs, high-emphasis dividers.

### Shadow Colors

CircleCI's shadows are tinted toward the **navy ink** (`rgba(20, 24, 33, …)`) rather than pure black, so cards on the white canvas pick up a faint cool cast that ties them to the navy chrome.

- `rgba(20, 24, 33, 0.04) 0 1px 2px` — ambient
- `rgba(20, 24, 33, 0.08) 0 2px 8px, rgba(20, 24, 33, 0.04) 0 1px 2px` — card
- `rgba(20, 24, 33, 0.12) 0 8px 24px -6px, rgba(20, 24, 33, 0.06) 0 2px 6px` — elevated
- `rgba(20, 24, 33, 0.16) 0 12px 32px -8px` — popover
- `rgba(20, 24, 33, 0.24) 0 24px 64px -16px` — modal

### Semantic

- **Success** (`#00b85f` on `rgba(0, 184, 95, 0.12)`): success leans on the brand-deep green — for a CI/CD platform, success *is* the brand. Passed builds, green checks, healthy pipelines.
- **Warning** (`#e0a000` on `rgba(224, 160, 0, 0.12)`): advisory amber — rate limits, deprecation notices, partial failures.
- **Danger** (`#d93838` on `rgba(217, 56, 56, 0.12)`): failure red — failed builds, broken pipelines, destructive actions. The semantic opposite of the brand green.
- **Info** (`#1a73c7` on `rgba(26, 115, 199, 0.10)`): informational blue — matches the link colour; notices, tips, neutral status.

## 3. Typography Rules

### Font Family

**Primary**: `Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Inter** (Rasmus Andersson) carries the entire system — display *and* body. It's the screen-optimised, engineered sans that has become the dev-tool default: tall x-height, open apertures, near-zero tracking at reading sizes, and a comprehensive variable-weight axis. CircleCI uses Inter for the 71px hero, the section headings, the body prose, the labels, and the captions — there is no second face. The single-family discipline keeps the dark hero and the light body tonally unified.

**Mono companion**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. CircleCI uses the system monospace stack (not a bespoke mono) for inline code, CLI commands, config-file snippets (`.circleci/config.yml`), environment-variable names, and pipeline-step identifiers. The mono is functional rather than identity-bearing — it signals "this is code you'll copy" without competing with Inter for the brand voice.

**OpenType features**: Inter renders with `kern` and `liga` always on; `cv11` is used for the disambiguated single-storey lowercase `l` and `1` in code-adjacent contexts. The mono stack enables `liga` and `calt` where the rendering font supports code ligatures.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Inter | 71px | 500 | 1.05 | -0.02em | Hero H1 on near-black band (probed live) |
| display-lg | Inter | 56px | 500 | 1.08 | -0.018em | Major section opener |
| h1 | Inter | 40px | 600 | 1.12 | -0.015em | Page title, article title |
| h2 | Inter | 32px | 600 | 1.20 | -0.012em | Marketing section H2 |
| h3 | Inter | 24px | 600 | 1.25 | -0.006em | Card heading, article H3 |
| h4 | Inter | 20px | 600 | 1.30 | 0 | Sub-card heading |
| body-lg | Inter | 18px | 400 | 1.60 | 0 | Hero deck, lede paragraph |
| body | Inter | 16px | 400 | 1.60 | 0 | Default body — primary reading size (probed live) |
| body-sm | Inter | 14px | 400 | 1.55 | 0 | Card body, dense-row body |
| label | Inter | 13px | 500 | 1.40 | 0.01em | Form field label, nav link |
| eyebrow | Inter | 13px | 600 | 1.40 | 0.06em | Section pre-label, uppercase |
| caption | Inter | 12px | 500 | 1.40 | 0.02em | Meta, image caption, footer micro |
| button | Inter | 16px | 500 | 1.20 | 0 | Default button copy |
| button-sm | Inter | 14px | 500 | 1.20 | 0 | Compact / nav button |
| code-inline | Mono | 14px | 500 | 1.50 | 0 | Inline `code` references |
| code-block | Mono | 13px | 400 | 1.60 | 0 | Config snippet, CLI block |

### Principles

- **Single-family discipline.** Inter for display, body, labels, captions; system mono for code only. There is no third face anywhere in the system.
- **Display weight caps at 500–600.** The 71px hero is set at weight 500, not 700 — the calm, engineered register that distinguishes CircleCI from louder SaaS sites. Section headings step up to 600 for hierarchy, but the brand never reaches 800.
- **Body holds at weight 400.** Crisp 400-weight Inter body at 16px / 1.60 line-height keeps prose calm-and-precise rather than dense-and-loud.
- **Negative tracking compresses with size.** `-0.02em` at the 71px hero, `-0.015em` at 40px, `-0.012em` at 32px, near-zero by body. Inter's metrics want near-zero tracking at reading sizes.
- **16px body, 1.60 line-height.** Slightly generous line-height for documentation-adjacent readability — the body register has to survive long technical prose.
- **Uppercase eyebrows at 0.06em tracking.** Section pre-labels render uppercase Inter at weight 600 / 13px — the brand's secondary-identity tell, used to introduce feature bands.
- **Reading width caps at ~720px.** Even on the 1280px page, prose columns stay at 720px / ~70 characters for readability.
- **Mono is functional, not branded.** Code blocks and CLI snippets use the system mono stack; the mono never competes with Inter for the brand voice.

## 4. Component Stylings

### Buttons

CircleCI's buttons share a **full-pill (9999px) geometry** — the 'Watch a demo' CTA probed at the full-pill radius, and the family follows. The differentiation is by fill, not by shape.

**Primary (Inverted Near-Black)** — `#161618` near-black background, white text at 16px / 500, **9999px pill radius**, 12×22px padding. Hover deepens marginally and the shadow lifts over 240ms standard. **No transform, no scale** — the colour and shadow carry the affordance. Use case: *Start building*, *Sign up*, *Get started for free* — the dominant action. The primary is inverted (matching the hero ink), *not* green — the green is signal, not action.

**Secondary (Navy)** — `#2e3c52` navy fill, white text at 16px / 500, 9999px pill radius, 12×22px padding. Hover deepens to `#243044` over 240ms. Use case: *Watch a demo*, *Talk to sales*, *Contact us* — the structural secondary action, paired adjacently with the primary (probed live as the navy 'Watch a demo' pill).

**Ghost (Outlined)** — Transparent background, near-charcoal text at 16px / 500, 1px border at `#cdcfd6` (border-strong), 9999px radius, 12×22px padding. Hover fills with `#f7f7f7` surface and deepens the border. Use case: *Learn more*, *Read the docs*, tertiary in-card actions.

**Accent (Green)** — `#00db75` green fill, deep-green text (`#005700`) at 16px / 500, 9999px radius, 12×22px padding. Used sparingly for *positive-affirmation* moments — "Your pipeline passed", success confirmations, a single emphasised free-tier CTA. **Rare**; the green-as-fill is reserved for genuine success/affirmation contexts, never the default primary. (This is the same green/ink pairing the cookie-consent button reuses.)

### Cards

**Default Card** — `#ffffff` white fill, 1px hairline border at `#e3e4e8`, **12px radius**, 24px padding, soft navy-tinted card shadow (`rgba(20, 24, 33, 0.08) 0 2px 8px`). The signature card across feature grids, integration tiles, and customer logos. The shadow is soft and cool-tinted, tying cards to the navy chrome.

**Surface Card** — `#f7f7f7` surface fill, no border, 12px radius, 24px padding, no shadow. Used in tightly-stacked grids where the border-and-shadow combination would be too busy; the surface tint alone separates the card from the white canvas.

**Dark Card** — `#1f2024` hero-ink-soft fill, white text, 1px border at `rgba(255, 255, 255, 0.08)`, 12px radius, 32px padding. Used for cards resting *inside* the near-black hero band or in inverted feature sections — a lifted near-black panel.

### Inputs / Forms

**Text Input** — `#ffffff` fill, near-charcoal text at 16px / 400 in Inter, 1px border at `#cdcfd6` (border-strong), **8px radius**, 10×14px padding. Placeholder colour at `#9a9a9a` faint. On focus: border shifts to `#00db75` brand-green and a 2px green ring appears (`rgba(0, 219, 117, 0.30) 0 0 0 2px`) — focus is the one place the green touches an interactive control on the light canvas.

**Select** — Same shape as text-input with a chevron icon at right (14px) at tertiary-text colour.

**Checkbox / Toggle** — Checked state fills with `#00b85f` brand-deep green (success semantic); the check/thumb is white. Unchecked is a `#cdcfd6` border on white.

### Badges, Tags, Pills

**Status Badge (Pass)** — `rgba(0, 219, 117, 0.12)` brand-soft fill, deep-green text (`#005700`) at 13px / 500, **9999px pill radius**, 4×10px padding. Use case: `PASSED`, `READY`, `LIVE`, `STABLE` — the pass/success status the brand is built around. Often paired with a 6px green status dot.

**Status Badge (Fail)** — `rgba(217, 56, 56, 0.12)` danger-soft fill, danger-red text at 13px / 500, 9999px radius. Use case: `FAILED`, `BLOCKED` — the failure counterpart, with a 6px red dot.

**Tag Chip** — `#f0f1f3` surface-elev fill, secondary-text colour, 13px / 500, 9999px radius, 4×10px padding. Use case: language tags, framework labels, region chips, version numbers.

**Eyebrow Label** — Not a pill but a typographic device: uppercase Inter 13px / 600 / 0.06em tracking in navy or brand-deep green, used to pre-label feature sections.

### Navigation

**Top Nav** — `#161618` near-black fill (matching the hero ink, so the nav and hero read as a single dark band), **64px height**, no bottom border (the band continues into the hero). Wordmark left in white. Center: nav links (Product, Solutions, Resources, Pricing, Docs) at 14px / 500 in `#c5c8cf` text-on-dark-soft, hovering to white. Right: ghost `Log in` (white text) + primary near-black-on-white `Sign up` pill — or on the dark band, an inverted white pill with near-black text.

**Footer** — `#161618` near-black band (mirroring the hero), white wordmark, multi-column link grid in `#c5c8cf` at 14px / 400, with brand-green accents on the social/status icons and a "All systems operational" status indicator carrying a green dot.

### Optional / Decorative

**Pipeline / Status Indicator** — A horizontal sequence of stage markers (build → test → deploy) where each completed stage carries a `#00db75` green dot or connector and the current stage pulses. The brand's signature dense-status unit — green for passed, amber for running, red for failed.

**Code / Config Block** — `#f7f7f7` surface fill on the light canvas (or `#1f2024` on the dark band), 8px radius, 1px hairline border, 16×20px padding. System mono 13px / 1.60. Used for `.circleci/config.yml` snippets and CLI commands — the brand's primary "this is how you configure it" device.

**Modal** — `#ffffff` fill, 16px radius, 32px padding, modal shadow stack. Backdrop scrim at `rgba(22, 22, 24, 0.55)`. Max-width 480px for confirmations, 640px for dialogs.

## 5. Layout Principles

### Spacing System

- Base unit: **4px**
- Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`
- Section padding (vertical): 96–128px for major marketing bands; 48–64px between content sections; 24–32px between content blocks
- Card internal padding: 24px on default cards; 32px on dark cards; 16×20px on code/config blocks
- Inter-card gutters: 24px between cards in 2-up; 16px in 3-up dense grids

### Grid & Container

- Canonical max width: **1280px** for marketing and content sections
- 12-column grid with 24px gutters
- Reading column caps at **720px** even inside the 1280px container — line length calibrated for ~70 characters
- Hero treatment: full-bleed near-black band, headline left-aligned (sometimes centered), CTA pair below, often with a product screenshot or pipeline visualization to one side

### Whitespace Philosophy

The page balances the **dense, status-driven register** of the product (pipeline stages, build matrices, integration grids) with **editorial breathing room** in the marketing bands (128px hero padding, generous 96px section gutters). The dual-mode mirrors the brand's two registers: the dark hero and product-preview surfaces run dense and information-rich; the light prose bands run editorial and calm. The user reads them as different content types because they're spaced and coloured differently.

### Section Cadence

A typical CircleCI page runs:

1. **Hero** — `#161618` near-black band, 71px / 500 white headline, 18px / 400 body deck in `#c5c8cf`, dual CTA (primary near-black-on-white pill + navy secondary 'Watch a demo'), product/pipeline visualization to one side
2. **Logo Bar** — light `#ffffff` band, customer logos in monochrome `#767676`, "Trusted by" eyebrow
3. **Feature Grid** — `#ffffff` cards in 3-up, hairline borders + soft navy-tinted shadow, 24px / 600 titles + 16px / 400 body
4. **Config / Code Tour** — light or `#f7f7f7` band with a centered config block, prose introducing the `.circleci/config.yml` example
5. **Pipeline Visualization** — possibly inverted `#161618` band with green pass-state stage markers
6. **Pricing** — surface cards in 3-up, the recommended tier ringed in navy or brand-green
7. **Closing CTA** — centered band (often near-black) with a single dominant action
8. **Footer** — `#161618` near-black band, multi-column link grid, green status indicator

The alternation is **register-based** (near-black hero → light body → optional inverted band → near-black footer) rather than purely brightness-based — the dark bands frame the page top and bottom, the light body carries the reading.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Decorative dividers, focus indicators inside chips |
| Small | 4px | Inline code chips, micro-tags |
| Standard | 8px | Inputs, code/config blocks, select fields — the dominant input radius |
| Comfortable | 12px | Cards (default), surface cards, modals-small |
| Relaxed | 16px | Large cards, modal corners, hero panels |
| Pill | 9999px | All buttons, status badges, tag chips — the dominant CircleCI shape |

CircleCI's signature shape is the **full pill (9999px)** on buttons and badges — confirmed by the live probe (the 'Watch a demo' CTA rendered at the full-pill radius, where the raw `3.35e7px` value is the engine's representation of a fully-rounded capsule). The pill geometry runs across every actionable element: primary, secondary, ghost, accent, status badges, and tag chips all share it. Containers (cards, inputs, code blocks, modals) use the gentler 8–16px scale — the contrast between fully-pilled actions and softly-rounded containers is a deliberate brand tell.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow, canvas/band bg | Page canvas, hero band, body sections |
| 1 — Hairline | 1px `#e3e4e8` border | Surface cards, inputs, dense tiles |
| 2 — Card | 1px border + `rgba(20, 24, 33, 0.08) 0 2px 8px, 0 1px 2px` | Default feature cards |
| 3 — Elevated | `rgba(20, 24, 33, 0.12) 0 8px 24px -6px, 0 2px 6px` | Dropdowns, hover-lifted cards |
| 4 — Popover | `rgba(20, 24, 33, 0.16) 0 12px 32px -8px` | Menus, tooltips, command surfaces |
| 5 — Modal | scrim `rgba(22, 22, 24, 0.55)` + `rgba(20, 24, 33, 0.24) 0 24px 64px -16px` | Dialogs, confirmations |

### Shadow Philosophy

CircleCI's shadows are **soft and navy-tinted** — the shadow colour is `rgba(20, 24, 33, …)`, biased toward the navy ink rather than pure black, so cards on the white canvas pick up a faint cool cast that ties them visually to the navy chrome. The hairline border `#e3e4e8` does most of the elevation work; the shadow is a quiet diffusion that lifts the card off the white ground without the dramatic depth of consumer-product shadows.

On the dark hero band, shadows are effectively invisible — elevation there is carried by the `#1f2024` lifted-ink surface against the `#161618` ground and a faint white-translucent border (`rgba(255, 255, 255, 0.08)`). The brand's elevation logic is *brightness contrast on dark, border-plus-soft-shadow on light* — two strategies for the two registers. Heavy shadows (popover, modal) are reserved for true overlay UI floating above the page.

## 8. Interaction & Motion

### Easing Curves

- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions
- **Out-Soft**: `cubic-bezier(0, 0, 0.2, 1)` — gentle settle; dropdown reveal, scroll-reveal, pipeline-stage progression

### Duration Buckets

| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Link underline grow, focus ring fade-in, status-dot pulse step |
| Standard | 240ms | Button hover deepen, card border + shadow lift |
| Slow | 320ms | Scroll-reveal fade, dropdown reveal, modal entry |

### Per-Component Recipes

- **Primary CTA hover**: near-black fill deepens marginally and the card shadow lifts over 240ms standard. **No transform, no scale** — the colour and shadow carry the affordance.
- **Secondary (navy) CTA hover**: fill deepens `#2e3c52` → `#243044` over 240ms.
- **Ghost button hover**: fills `transparent` → `#f7f7f7` and the border deepens `#cdcfd6` over 240ms.
- **Accent (green) hover**: fill deepens `#00db75` → `#00b85f` over 240ms; the deep-green text holds.
- **Link hover**: colour holds at `#1a73c7`, 1px underline grows from 0 to full width over 150ms ease-standard.
- **Card hover**: border deepens + the navy-tinted shadow intensifies (level 2 → level 3) over 240ms. **No translate, no lift.**
- **Input focus**: border shifts to brand-green and a 2px green ring fades in over 150ms.
- **Pipeline-stage progression**: completed stages fill green left-to-right with the connector animating over ease-out-soft; the active stage pulses (subtle opacity oscillation) until resolved.
- **Scroll-reveal**: marketing sections fade in over 320ms ease-out-soft when entering viewport. One-shot per section.

### Page Transitions

Page-to-page navigation uses a 320ms cross-fade with the sticky near-black nav staying static. Anchor links smooth-scroll over ~500ms. Most page changes feel near-instant; the cross-fade is only visible on cold navigation.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress entirely — replaced with instant render or opacity-only fades. Durations halve. The pipeline-stage pulse becomes a static "current" highlight rather than an oscillation. Scroll-reveal becomes static on-mount. Link hover underline appears instantly rather than growing.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| `#343434` text on `#ffffff` canvas | 10.9 | AAA at body sizes |
| `#5a5a5a` secondary on `#ffffff` | 6.3 | AA+ at body sizes |
| `#767676` tertiary on `#ffffff` | 4.5 | AA at body sizes |
| `#9a9a9a` faint on `#ffffff` | 2.6 | Fails AA — placeholder/disabled only |
| `#ffffff` text on `#161618` hero ink | 16.3 | AAA at all sizes |
| `#c5c8cf` soft text on `#161618` | 11.4 | AAA at body sizes |
| `#ffffff` text on `#2e3c52` navy | 9.6 | AAA at all sizes |
| `#1a73c7` link on `#ffffff` | 4.7 | AA at body; reinforced with hover-underline |
| `#00db75` green on `#ffffff` | 1.5 | Fails text — accent/iconography only, never body text |
| `#005700` ink on `#00db75` green pill | 5.0 | AA at body sizes (the legible green-pill pairing) |

The critical a11y discipline: **the brand-green `#00db75` fails text contrast on white (1.5:1)** and is therefore *never* used for body or link text on the light canvas. It functions only as an accent fill, a status dot, or a focus ring — and when it carries text (the green pill), the foreground is the deep `#005700` ink at 5.0:1. Links on white use the blue `#1a73c7` (4.7:1, reinforced with hover-underline) rather than the green.

### Focus Indicators

Focus is a **2px solid ring with 2px outline-offset** — brand-green `#00db75` on dark grounds (where green has contrast), and navy `#2e3c52` on the light canvas (where green would be too faint). The dual-ring strategy keeps focus visible in both registers. Interactive controls also surface a green focus ring on inputs as the one place green touches a light-canvas control.

### ARIA Patterns

- **Top nav**: `<nav aria-label="Primary">` landmark with skip-link to `<main>`; dropdowns use `aria-haspopup` / `aria-expanded`.
- **Pipeline / status indicator**: each stage is a `<li>` with `aria-label` announcing state ("Build: passed", "Test: running", "Deploy: pending") — the green dot is decorative `aria-hidden`, the state is announced in text.
- **Status badges**: `PASSED` / `FAILED` carry `aria-label` text; the colour and dot are not the only signal (text label always present).
- **Code/config blocks**: `<pre><code role="region" aria-label="CircleCI config example" tabindex="0">` — focusable, language-labelled.
- **Modal**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **System status footer**: `aria-live="polite"` with descriptive text ("All systems operational").

### Keyboard Navigation

- Tab order: skip-link → wordmark → primary nav → auth CTAs → main content (document order) → footer
- `Esc` closes modals and dropdown menus
- Code/config blocks are focusable (`tabindex="0"`) for keyboard copy
- Pricing tier toggles use radio-button keyboard semantics

### Screen Reader Hints

- Status is **never colour-only**: green/red dots are paired with text labels (`PASSED` / `FAILED`) so colour-blind and screen-reader users get the full signal
- Uppercase eyebrows use CSS `text-transform` so screen readers announce natural-case
- The brand wordmark uses `aria-label="CircleCI"`
- Decorative pipeline connectors and dots carry `aria-hidden="true"`

### Reduced Motion

All transitions degrade to opacity-only or instant. The pipeline-stage pulse freezes to a static current-state highlight. Modal entry becomes instant. Scroll-reveal becomes static on-mount. Nothing breaks, nothing disappears — the brand experience preserves visual consistency under reduced-motion.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 71→36px; cards 1-up; CTA pair stacks vertically; pipeline indicator scrolls horizontally |
| Tablet | 640–1024px | Nav keeps inline links (no mega-menu); hero H1 at ~52px; cards 2-up |
| Desktop | 1024–1280px | Full nav; hero H1 at full 71px; cards 3-up; full pipeline layout |
| Wide | >1280px | Content width caps at 1280; gutters absorb the rest |

### Touch Targets

- Buttons: 44px effective height (12px padding + 16px / 1.20 text) — meets the 44px tap-target minimum
- Pill CTAs: 44–48px height; always comfortably tappable
- Tag chips / status badges: 28px visual height with padding for a 44px effective tap area where interactive
- Top-nav links: 44×44px minimum tap area even at 14px text

### Collapsing Strategy

- **Top nav** at <1024px: primary links collapse into a hamburger sheet; the near-black band carries the full-screen sheet
- **Hero CTA pair** at <640px: stacks vertically (primary above, navy secondary below)
- **Card grids**: 3 → 2 → 1 columns
- **Pipeline indicator** at <640px: shifts from horizontal stage-row to a horizontally-scrollable strip or a vertical stack
- **Pricing cards** at <1024px: swipe-able horizontal scroll with snap points; 3-up at desktop
- **Customer logo grid**: 5 → 3 → 2 columns; logos maintain aspect ratio

### Image Behavior

Customer logos render monochrome (`#767676`) on the light canvas, inverting to a light grey on the dark bands. Product screenshots and pipeline visualizations use `aspect-ratio` to prevent layout shift. Below-fold images are lazy-loaded; the hero visualization is eager. Retina assets use `srcset` 1x/2x.

### Container Queries

Used inside feature and integration cards: when a card crosses ~320px width, the layout switches from icon-above-text (compact) to icon-beside-text (expansive). The same card component renders compactly in dense 3-up grids and expansively in 2-up hero contexts.

## 11. Content & Voice

### Tone

**Engineered, confident, outcome-focused.** CircleCI writes like a platform engineer who has automated the boring parts and wants you to do the same — direct, technically precise, modestly enthusiastic. Headlines are capability statements ("Autonomous validation for the AI era"); subheads explain the mechanism; product copy uses CI/CD vocabulary (pipeline, workflow, orb, executor, parallelism) without over-explaining it to non-developers. The voice sits in a peer-to-peer engineering register — neither consumer-product breathless nor enterprise-legalese.

### Microcopy Patterns

- **Button verbs**: *Start building*, *Watch a demo*, *Sign up*, *Talk to sales*, *Read the docs*, *Get started for free*. Direct, outcome-focused.
- **Status messages**: *"Pipeline passed"* / *"Build #1423 succeeded in 2m 14s"* / *"3 of 4 workflows green."* — specific, includes the metric, leans on the pass/fail semantic.
- **Error messages**: *"Build failed: step `run tests` exited with code 1. View the full log."* — specific, accountable, actionable; includes the exact failing step.
- **Success confirmations**: *"Deployment complete."* / *"All checks passed."* — brief, declarative, green-flagged, no exclamation.
- **Empty states**: *"No pipelines yet. Push a commit or add a `.circleci/config.yml` to get started."* — instruction-led, includes the exact next action.
- **Field labels**: *Project*, *Branch*, *Pipeline*, *Org*. Single-word, no friendly framing.

### Empty States

The dashboard empty state ("No projects yet — connect a repository to run your first pipeline") is the tonal anchor: name the state, offer the next step, include the exact action. Marketing-surface empty states follow the same convention: "No integrations match this filter. Try a different category."

### CTA Verb Conventions

- Primary: *Start building*, *Sign up*, *Get started for free*
- Secondary: *Watch a demo*, *Talk to sales*, *Read the docs*
- Tertiary text: *See pricing*, *Browse orbs*, *View documentation*, *Explore integrations*
- Avoided: *Click here*, *Submit*, *Buy now*, exclamation-heavy enthusiasm. CircleCI uses outcome verbs and product nouns directly.

## 12. Dark Mode & Theming

**No site-wide dark theme.** CircleCI's marketing site does not offer a user-toggled dark mode — the page is a fixed two-register composition: a **near-black hero band** (`#161618`) and footer framing a **light `#ffffff` content body**. The "dark mode" of the brand is the hero band itself, which is permanent, not preference-driven.

The inverted-band treatment (used for the hero, footer, and the occasional feature band) swaps the token set:

- **canvas** `#ffffff` → **hero-ink** `#161618`
- **surface** `#f7f7f7` → **hero-ink-soft** `#1f2024`
- **text** `#343434` → **text-on-dark** `#ffffff`
- **text-secondary** `#5a5a5a` → **text-on-dark-soft** `#c5c8cf`
- **border** `#e3e4e8` → `rgba(255, 255, 255, 0.08)`
- **brand** `#00db75` (unchanged — green has *more* contrast on the dark band, so it appears as link emphasis and status dots here)
- **CTA** inverts: near-black-on-white pill becomes white-on-near-black on the dark band

The brand-green is the one colour that gains prominence on the dark band — at `#00db75` on `#161618` it reads cleanly (well above text-contrast minimums), so links, status dots, and accents that stay quiet on the light canvas can carry more weight on the dark hero. The navy chrome is consistent across both registers.

## 13. Lineage & Influences

CircleCI's marketing identity belongs to the developer-tool tradition that pairs an engineered sans with disciplined colour: **Inter** for the entire system, a **near-black hero band** that signals "this is a tool you'll trust to watch your pipelines," and a **single vivid brand-green** reserved for signal. The dark-hero-into-light-body split is the clearest inheritance — it descends from the GitHub / Stripe register where the top of the page reads as a terminal-comfortable showcase and the body reads as documentation-adjacent prose. The navy chrome (`#2e3c52`) and full-pill CTAs echo the modern dev-platform consensus that Vercel and Linear codified: text-colour-on-canvas primary CTAs, restrained accent colour, hairline borders, no brand-colour button fills.

What makes CircleCI's palette *its own* is that the green is not a decorative accent — it's the **semantic memory of continuous integration**. In CI/CD, green means a build passed, a test suite is clean, a pipeline is healthy. The brand was built around that meaning, so the green appears as status dots, success states, and pass-indicators rather than as a marketing wash. The discipline is identical in shape to Vercel withholding its blue from buttons, but the *reason* is different: Vercel's blue is a link colour; CircleCI's green is a pass signal. Treating the green as wallpaper would drain it of the exact meaning the brand depends on. The type discipline — Inter held at weight 500 for the 71px hero rather than 700–800 — places CircleCI in the same calm-precision register as Stripe and Vercel: confident without shouting.

What CircleCI rejects: warm cream surfaces (Notion / Mintlify signal), serif body copy (Medium signal), heavy consumer-product drop shadows, brand-green as a section background or default primary fill, and a second accent colour. The system is *near-black hero + light body + navy structure + green signal* — four roles, no decoration.

**Influences:**

- **Inter (Rasmus Andersson)** — The entire type system, display and body; the engineered, screen-optimised sans that anchors the calm-precision register. *https://rsms.me/inter/*
- **Vercel** — Adjacent dev-platform peer; shared discipline of text-colour-on-canvas primary CTAs, hairline borders, and restrained accent colour over fills. *https://vercel.com*
- **Linear** — Dev-tool contemporary; the full-pill CTA geometry and navy/near-black chrome with a single signal colour trace to this register. *https://linear.app*
- **Stripe** — Dark-hero-into-light-body section cadence and developer-product-as-magazine framing descend from Stripe's marketing register. *https://stripe.com*
- **GitHub** — CI/CD-adjacent platform; the pass/fail green semantic and dense status-driven UI inform CircleCI's green-for-signal discipline. *https://github.com*

## 14. Do's and Don'ts

### Do

- **Do** open on a near-black `#161618` hero band with a light `#ffffff` content body below. The two-register split is the brand's primary gesture.
- **Do** set the hero headline in white Inter at ~71px / weight 500 — calm and engineered, not shouty.
- **Do** use `#343434` body text on white. The 10.9:1 contrast is the brand's reading default.
- **Do** use Inter for the *entire* system — display, body, labels, captions. No second face.
- **Do** invert the primary CTA to near-black-on-white; make the secondary navy `#2e3c52`. Match the live 'Watch a demo' navy pill.
- **Do** treat green `#00db75` as a *signal* — status dots, success states, pass-indicators, focus rings on dark.
- **Do** use the full-pill (9999px) radius on every button and badge; reserve 8–16px for containers.
- **Do** pair every green/red status with a text label so colour is never the only signal.
- **Do** use a blue link colour (`#1a73c7`) for body links on white — the green lacks text contrast.
- **Do** tint shadows toward the navy ink (`rgba(20, 24, 33, …)`) so cards tie to the chrome.
- **Do** keep prose columns at ~720px even on the 1280px page.
- **Do** use uppercase Inter eyebrows at 0.06em tracking to pre-label feature sections.

### Don't

- **Don't** use the brand-green `#00db75` as a section background or the default primary button fill — it's a pass signal, not wallpaper.
- **Don't** treat the cookie-consent green as a separate colour; it's a reuse of the brand accent.
- **Don't** set green text on white — it fails contrast (1.5:1). Use deep `#005700` ink on green pills only.
- **Don't** push the display weight to 700–800. The 71px hero is weight 500 — calm and confident.
- **Don't** introduce a serif or a second sans. Inter is the entire system.
- **Don't** use warm cream or off-white for the content canvas. CircleCI commits to true `#ffffff` body and near-black hero.
- **Don't** make the primary CTA navy *and* the secondary navy — primary inverts near-black-on-white, secondary is navy.
- **Don't** apply heavy black drop shadows. Soft navy-tinted shadows do the lifting.
- **Don't** rely on colour alone for build status — always pair the dot with a text label.
- **Don't** square off the buttons. The full pill is the brand's actionable-element shape.
- **Don't** widen prose beyond ~720px. The reading length is calibrated.
- **Don't** scatter the green across decorative elements — every green should mean "this passed / this is healthy / this is the affirmative path."

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas (body):     #ffffff
Surface:           #f7f7f7
Hero Ink:          #161618   (near-black hero band)
Body Text:         #343434
Text Secondary:    #5a5a5a
Text on Dark:      #ffffff
Brand Green:       #00db75   (SIGNAL ONLY — never a fill/bg)
Brand Ink (on green): #005700
Navy (chrome):     #2e3c52
CTA Bg (primary):  #161618   (inverted near-black — NEVER green)
CTA Secondary:     #2e3c52   (navy)
Link:              #1a73c7   (green fails text contrast)
Border:            #e3e4e8
Focus Ring:        #00db75 on dark / #2e3c52 on light, 2px + 2px offset
```

### Example Component Prompts

1. **"Create a CircleCI-style hero: near-black `#161618` band, 71px / weight-500 Inter headline in white with `-0.02em` tracking, 18px / 400 deck in `#c5c8cf` cool-grey at 1.6 line-height, dual CTA pair below — primary near-black-on-white full-pill (`#ffffff` fill, `#161618` text, 16px / 500, 9999px radius, ~44px height) and secondary navy full-pill (`#2e3c52` fill, white text). Product/pipeline visualization to one side. The hero is permanent dark, not a toggle."**

2. **"Design a CircleCI feature card: `#ffffff` background, 12px radius, 1px `#e3e4e8` hairline border, 24px padding, soft navy-tinted shadow `rgba(20, 24, 33, 0.08) 0 2px 8px`. Inside: 24×24 icon at top, 24px / 600 Inter heading in `#343434`, 16px / 400 body in `#5a5a5a`. Hover: border deepens to `#cdcfd6`, shadow lifts to level 3. No translate."**

3. **"Build a CircleCI pipeline-status row: horizontal sequence of stage chips (Build → Test → Deploy). Completed stages get a 6px `#00db75` green dot + green connector + `PASSED` label; the running stage gets an amber dot + pulse; failed gets a `#d93838` red dot + `FAILED` label. Each chip is a full-pill (`rgba(0,219,117,0.12)` fill, `#005700` text for passed). Status is always paired with a text label, never colour-only."**

4. **"Compose a CircleCI config block: `#f7f7f7` surface fill on light canvas (or `#1f2024` on the dark band), 8px radius, 1px `#e3e4e8` hairline border, 16×20 padding, system monospace 13px / 1.60 line-height. Above it: an uppercase Inter eyebrow `.CIRCLECI/CONFIG.YML` at 13px / 600 / 0.06em tracking in navy `#2e3c52`. The code is plain mono on grey — no syntax highlighting on the marketing surface."**

5. **"Render a CircleCI top nav: `#161618` near-black band matching the hero (so nav + hero read as one dark band), 64px height, no bottom border. White wordmark left. Center links (Product, Solutions, Resources, Pricing, Docs) in `#c5c8cf` at 14px / 500, hovering to white. Right: ghost `Log in` (white text) + inverted white `Sign up` full-pill (`#ffffff` fill, `#161618` text, 9999px radius)."**

6. **"Build a CircleCI success badge: full-pill (9999px), `rgba(0, 219, 117, 0.12)` brand-soft fill, deep-green `#005700` text at 13px / 500, 4×10 padding, with a 6px solid `#00db75` green dot on the left. Label reads `PASSED`. The green is the pass signal; never use it as a page background."**

### Iteration Guide

1. **Check the two-register split.** If the whole page is one brightness, you've drifted. CircleCI is near-black hero `#161618` → light `#ffffff` body. The dark band frames the top (and footer); the white carries the reading.
2. **Pull the brand-green out of fills.** If green is a section background or a primary button, you've broken the brand. Green `#00db75` is a *signal* — status dots, success states, focus rings on dark. The primary CTA is inverted near-black-on-white.
3. **Drop the display weight to 500.** If your 71px hero is at 700–800, it's too loud. CircleCI holds the hero at weight 500 with `-0.02em` — calm, engineered confidence.
4. **Switch links to blue, not green.** Green at `#00db75` fails text contrast on white (1.5:1). Body links use `#1a73c7`; green carries text only as `#005700` ink on a green pill.
5. **Make the secondary navy.** The 'Watch a demo' CTA is a navy `#2e3c52` full-pill with white text — confirmed by the live probe. The primary stays inverted near-black.
6. **Full-pill the actionable elements.** Buttons and badges are 9999px; containers (cards, inputs, code blocks) are 8–16px. The contrast between pilled actions and softly-rounded containers is the brand tell.
7. **Tint the shadows navy.** Use `rgba(20, 24, 33, …)` rather than pure black so cards on white pick up the cool cast that ties them to the navy chrome.
8. **Pair every status colour with a label.** `PASSED` / `FAILED` text always accompanies the green/red dot — colour is never the only signal. This is both the a11y discipline and the brand's pass/fail register.

---

*Theme-toggle audit: score=0, signals=[hero-band-only; no site-wide dark toggle]*