CircleCI Design System

Overview

CircleCI's marketing site runs a restrained, near-corporate layout that saves its single theatrical moment for a social-proof number. Neon Green as Earned Accent. Where many CI/CD brands paint the hero in their brand color, CircleCI holds its neon green ({colors.primary} — #00db75) exclusively for primary CTA buttons. The above-fold hero is entirely in near-black and near-white: a dark product-mockup card on a light-gray canvas, with "AI code make you nervous?" as the headline and two small CTA pills beneath it. The green appears only on the "Get started for free" button. Below the fold, the page builds to "Join 2mil+ devs" in Space Grotesk at 170px — the single theatrical moment — before closing in a midnight-navy dark-footer band.

The design is closer to Okta or Postman than to the developer-tool brands (Linear, Vercel, Warp) that use dark canvases and atmospheric gradients. Where GitHub uses its Primer system with green as a trust signal, CircleCI uses Inter as the structural backbone and reserves Space Grotesk for a single quantified claim. The palette is almost entirely achromatic: near-white gray floor, near-black ink, white card surfaces, dark-navy footer, and one neon-green accent.

Key Characteristics:

• Near-white gray canvas ({colors.canvas} — #ededed) as the page floor — not pure white; the slight gray softens the card surface lift.
• Single neon-green voltage ({colors.primary} — #00db75) on primary CTA buttons only — 7 total occurrences in the captured page.
• Inter as the typographic backbone — 278 elements at 16px / weight 400, the dominant text expression by count.
• Space Grotesk at 170px / weight 700 for the social-proof display headline — the only Space Grotesk usage on the page.
• Midnight-navy footer ({colors.surface-dark} — #1c273a) as the second surface type, used for the footer and the pipeline-dashboard product card.
• 16px default rounding on all cards and feature tiles — generous by dev-tools standards.
• 1.75px tracked uppercase Inter at 14px / weight 700 for section overline labels — a label convention that doesn't appear in the main typeface hierarchy.
• Trust-logo wall (Nextdoor, Google, Okta, Hinge) in monochrome below the hero.

Colors

Brand

• Neon Green ({colors.primary} — #00db75): frequency 7 (text 1, bg 5, border 1). Wired as --color-slime-500. Primary CTA button fill — the sole chromatic brand element on the page. Appears on "Get started for free" in the hero, mid-page, and footer CTA.
• Green Light ({colors.primary-light} — #85d69c): frequency 2 (border only). Declared as --color-green-200. Border variant for the neon-green states; not rendered as a fill.
• Green Dark ({colors.primary-dark} — #005700): frequency 13 (text 9, border 4). Declared as --color-green-700. Used for accessible dark-green text on light surfaces — appears on confirmation copy and pipeline-success status labels.

Structural Text

• Body Dark ({colors.ink} — #343434): frequency 2640 (text 1331, border 1309). The dominant color in the system — wired as --color-body-dark. Every paragraph, heading, and card border at a near-black that is slightly warmer than pure black.
• Near Black ({colors.ink-dark} — #161616): frequency 61 (text 30, border 31). Wired as --color-morph-terminal and --color-cool-grey-900. The darkest text tier — used on the top-nav background and the "Join 2mil+ devs" social-proof headline.
• Gray Muted ({colors.ink-muted} — #6a6a6a): frequency 24 (text 12, border 12). Wired as --color-neutral-400. Secondary text — section overline labels in small uppercase, footnotes, trust-chip text.

Surface

• Canvas ({colors.canvas} — #ededed): the page floor. Wired as --color-morph-fog, --color-gray-100, --color-cool-grey-30. Near-white gray — the key surface decision that sets CircleCI apart from white-canvas dev-tools.
• White Surface ({colors.surface-1} — #ffffff): frequency 523 total (bg 282, text 122, border 119). Card fills, nav background, trust-chip fills. Wired as --color-white, --color-body-light, --color-gray-50.
• Midnight Navy ({colors.surface-dark} — #1c273a): frequency 4 (bg 3, gradient 1). Wired as --color-morph-midnight, --color-9pm-600. The footer background and the pipeline-dashboard product card fill.
• Slate Navy ({colors.surface-dark-2} — #2e3c52): frequency 3 (bg 3). Wired as --color-9pm-500. A slightly lighter navy — used inside the product-mockup card for inner UI chrome.

Hairline and Shadow

• Hairline ({colors.hairline} — #d4d4d4): frequency 54 (bg 38, border 16). Wired as --color-gray-300, --color-neutral-80. The card border tone and internal divider — a neutral light gray.
• Shadow ({colors.shadow} — #000000): frequency 11 (shadow 9, text 1, border 1). Standard black-with-opacity shadow ink.

Accent

• Sky Blue ({colors.sky-blue} — #75cdff): frequency 2 (bg). Wired as --color-blue-200. Appears on two UI elements inside the pipeline-mockup card — a status-indicator chip. Not part of the general brand palette.

Typography

Font Families

The system runs three families: Inter for all prose, navigation, and component labels; Space Grotesk for the single 170px social-proof display headline; and Roboto Mono for code annotations. Inter is registered as --font-sans; Space Grotesk as --font-mega; Roboto Mono as --font-mono. A Silkscreen pixel font is declared as --font-pixel but does not appear in the captured surface.

The split is disciplined: Inter carries the system, Space Grotesk is held for one moment, mono appears only in technical copy.

Hierarchy

Principles

The 57px display-md ({typography.display-md}) is the main editorial headline tier — it's weight 400, not the heavier 700 used on the Space Grotesk stadium headline. Light-weight display at 57px signals confidence through scale rather than weight, in the same register as Cloudflare's editorial approach. The uppercase label-sm tier (1.75px tracking, weight 700, 14px) is the contrast voice — it sits above feature sections as an overline and uses none of the display size, creating a visible rhythm between "here's the category" (uppercase) and "here's the headline" (57px weight 400).

Note on Font Substitutes

Inter is freely available via Google Fonts and ships with many OS distributions. Space Grotesk is also free via Google Fonts. For Roboto Mono, JetBrains Mono or IBM Plex Mono transfer cleanly at the same sizes.

Layout

Spacing System

• Base unit: 8px (308 occurrences at 8px, the most frequent single value).
• Tokens: {spacing.xs} 4px · {spacing.sm} 6px · {spacing.base} 8px · {spacing.md} 12px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 48px · {spacing.4xl} 64px · {spacing.5xl} 96px.
• Card internal padding: {spacing.xl} 24px vertical × {spacing.2xl} 32px horizontal (213 instances at 8×16px and 41 instances at 24×32px).
• Section vertical padding: ~96px on major bands (hero, dark CTA, footer).
• Dark-footer padding: 64px vertical, 24px horizontal.

Grid and Container

• Max content width: approximately 1280px at desktop.
• Hero layout: centered content stack — product mockup card, headline, sub-copy, dual CTA buttons, and a trust-logo row.
• Feature section: alternating left-right split — text column (heading + body + green CTA) beside a dark product-mockup card in midnight navy.
• Pipeline-tech grid: full-width scrolling tag cloud of supported languages, frameworks, and platforms (JavaScript, React, Python, Docker, Kubernetes, etc.).
• Social proof: single full-width section with the 170px Space Grotesk headline.
• Blog/resource grid: 3-column card grid with feature image, tag overline, heading, and date.

Rhythm

The page alternates between light and dark surfaces to create section contrast: hero (light-gray), feature rows (light-gray with dark mockup cards), tag cloud (light-gray), social-proof (light-gray), blog cards (light-gray), dark CTA (near-black), dark footer (midnight navy). Two dark bands close the page after an entirely light-gray body — the structural inversion happens at the end rather than the beginning.

Elevation

The system uses light-gray-to-white card lift rather than shadow layers. The near-white gray canvas ({colors.canvas} — #ededed) is the floor; white card surfaces ({colors.surface-1} — #ffffff) sit on it with a 1px {colors.hairline} (#d4d4d4) border. The hairline-on-gray contrast provides enough elevation without any shadow. Shadow ink ({colors.shadow} — #000000) appears 9 times on the captured surface, all as soft drop-shadow-md values (0 3px 3px rgba(0,0,0,0.12)) on specific product-mockup card frames.

Shapes

The radius scale is generous and standardized:

• {rounded.none} 0px — the dark CTA band and footer section are square-edged.
• {rounded.sm} 8px — inner UI chrome elements and form inputs; 78 occurrences.
• {rounded.md} 16px — the dominant card radius; 265 occurrences — the most common radius in the system by far.
• {rounded.lg} 40px — the singular large pill for a promotional CTA or badge element; 1 occurrence.
• {rounded.full} 9999px — fully-rounded pill CTAs and trust-chip labels; ~49 occurrences.

The 16px default makes every card feel approachable relative to the tight 4–8px radius that Linear or Vercel use. The generous rounding is the warmest UI move in an otherwise cool achromatic system.

Components

button-primary — Neon green {colors.primary} fill, near-black {colors.ink-dark} text for contrast, {rounded.full} pill, 8×16px padding, 40px height. "Get started for free" is the canonical instance. The only use of green in the system.

button-secondary — Transparent fill, white text, 1px white border, {rounded.full} pill. "Watch demo" or "Start building for free" in ghost form — appears on dark surfaces.

top-nav — Near-black {colors.ink-dark} background, white text, 52px height, 12×24px padding. CircleCI logo flush left, product nav links (Product / Solutions / Enterprise / Resources / Pricing / Blog) centered, right-aligned "Log In" + neon-green CTA.

nav-link — Transparent background, white text in {typography.nav-link}. No padding rendered in the captured surface.

hero-heading — The social-proof 170px Space Grotesk in {typography.display-xl}, near-black {colors.ink-dark}, on the light-gray canvas. The only Space Grotesk render.

section-heading — Inter at {typography.display-md} (57px / weight 400), body-dark ink. Used for "Ship at AI speed, confidently" and "Learn more" section titles.

body-paragraph — Default body-dark text at {typography.body-lg} (18px / 400). The hero sub-paragraph and feature-section body copy.

label-overline — Muted {colors.ink-muted} text in {typography.label-sm} (14px / 700 / uppercase / 1.75px tracked). Section overline labels above feature headings — the typographic category marker.

card — White {colors.surface-1} fill, 1px {colors.hairline} border, {rounded.md} 16px radius, 24×32px padding. The blog post card, feature description card, and testimonial card.

pipeline-card — Midnight-navy {colors.surface-dark} fill, white text, {rounded.md} 16px radius, 24px padding. The above-fold product-mockup card showing the CI/CD pipeline dashboard.

text-input — White surface, 1px hairline border, {rounded.sm} 8px radius, 8×16px padding, 40px height.

trust-chip — White surface, body-dark text, {rounded.full} pill, 6×12px padding. The trusted-by customer logo chips in the trust wall.

footer — Midnight-navy {colors.surface-dark} background, white text, 64×24px padding. Multi-column footer links with the CircleCI logo, social icons, and legal links.

dark-cta-section — Near-black {colors.ink-dark} fill, white heading in {typography.display-md}, 96×24px padding. The penultimate ">build the future" closing CTA band.

feature-tile — Midnight-navy {colors.surface-dark} fill, {rounded.md} 16px radius, 0 padding. The product feature illustration tile — the dark mock screenshots and pipeline diagrams that appear beside feature copy.

Do's and Don'ts

Do hold neon green exclusively for the primary CTA button fill. The system has 7 occurrences of {colors.primary} (#00db75), all on action elements. Adding green to icons, section backgrounds, or decorative stripes would dilute the signal that green = "the thing to click."

Do use the light-gray canvas ({colors.canvas} — #ededed) rather than pure white as the page floor. Card surfaces in white ({colors.surface-1}) lift off the gray floor with only a 1px hairline border — no shadow needed. Switching the floor to pure white would collapse the contrast and require adding shadows to every card.

Do use the 14px / weight 700 / uppercase / 1.75px tracked Inter label ({typography.label-sm}) as section overlines, before large headings. The contrast between the uppercase micro-label and the 57px display heading is the page's typographic rhythm device.

Do put the Space Grotesk display headline ({typography.display-xl}) only on a genuinely large social-proof number. The 170px treatment earns its space because "2mil+" is a verifiable, meaningful claim. A placeholder like "Join our community" at 170px would read as hollow.

Don't add a gradient or atmospheric background to the hero. The hero canvas is flat {colors.canvas} (#ededed). Adding a gradient — even a subtle one — would pull the page toward the decorative-SaaS aesthetic that CircleCI's restraint deliberately avoids.

Don't use {colors.primary-dark} (#005700, --color-green-700) as a brand accent on light surfaces. This dark green appears as accessible text on light backgrounds for confirmation copy; using it as a fill or border accent on non-success surfaces would create semantic confusion with pipeline success states.

Don't introduce a second display typeface. The system has two declared display families (Inter for everything, Space Grotesk for one moment). Adding a third — or using Space Grotesk on secondary headings — would undermine the "one theatrical moment" discipline.

Don't round card corners below 16px ({rounded.md}). The 16px radius is the generous-soft signature of the system. Tightening to 8px or 4px would pull the cards into the colder dev-tools register (Vercel, Linear) rather than CircleCI's warmer, more accessible positioning.

Known Gaps

• Primary button hover and active states: the captured surface shows the resting neon-green fill only; hover (likely a darker slime-550/600 tone) and active press states are not captured.
• Form validation states: {component.text-input} carries the resting state only; error, success, and focus-ring colors from the CSS variables (red-500, green-400, slime-500 focus ring) are declared but not rendered.
• Pipeline dashboard tokens: the product mockup card inside the hero shows a CI/CD pipeline interface with its own status-indicator color set (green LED lime for passing, red for failing, bronze for waiting). These are declared in the CSS (--color-green-led-lime, --color-bronze-300, --color-morph-bricked) but captured as illustration rather than as live component tokens.
• Motion: the tag-cloud strip on the page animates as an infinite horizontal scroll; the feature-section illustrations may animate on scroll. Easing and duration values are declared in CSS but not captured in component form.
• Dark mode: the site has no declared dark-mode surface in the captured pages; the CircleCI dashboard app carries its own dark-panel theme not represented here.
• Pixel font (Silkscreen): declared as --font-pixel but no rendered instance is visible on the captured marketing page.