What is CircleCI's primary brand color?

CircleCI's brand voltage is neon green (#00db75), wired as `--color-slime-500`. It appears 7 times in the captured render — once as text, five times as background fill, once as border — all on primary CTA buttons ('Get started for free', 'Start building for free'). The color does not appear on any decorative element, background band, or icon. Every other surface is either near-black (#343434), near-white (#ededed), or midnight navy (#1c273a). The CSS also declares a slightly lighter variant (#00f583, `--color-slime-450`) and a darker one (#005700, `--color-green-700`), but neither renders on the captured marketing page.

What typefaces does CircleCI use, and what should I use as substitutes?

CircleCI uses two typefaces. Inter is the primary voice — 278 elements at 16px / weight 400, plus heavier weights (600, 700) for labels and overlines. The CSS registers it as `--font-sans`. Space Grotesk is the secondary display voice, reserved exclusively for the 170px 'Join 2mil+ devs' social-proof headline. Wired as `--font-mega`. There is also a Roboto Mono stack for code contexts (`--font-mono`) and a Silkscreen pixel font (`--font-pixel`) declared but not visible in the captured surface. Inter is free and widely available via Google Fonts. For Space Grotesk, the nearest open-source match is **Plus Jakarta Sans** or **Outfit** at heavy weights; the proportion difference is small at 700 weight.

Why is CircleCI's canvas light gray instead of white?

The marketing canvas is #ededed — a neutral near-white gray, not pure white. This is wired in CSS as `--color-morph-fog`, `--color-gray-100`, and `--color-cool-grey-30`. The choice is intentional: at 265 16px radius tokens, the page uses a lot of rounded cards and chip surfaces. Against pure white, the card borders would need to carry all the contrast. Against the light-gray #ededed floor, white card surfaces (`--color-white` / `--color-body-light` at #fafafa) read as elevated without any border or shadow. The gray canvas does the elevation work that a shadow system would otherwise handle.

Where exactly does the neon green appear on the page?

In the captured render, #00db75 (`--color-slime-500`) appears in exactly 7 instances: 1 as text (a link label), 5 as background fills (the primary CTA buttons in the hero, the mid-page CTA strip, and the dark-footer CTA), and 1 as a border (a focus-ring or chip outline). It is not used on any icon, illustration, background band, or decorative element. The constraint is strict: neon green means 'primary action,' nowhere else. The lighter slime-450 (#00f583) and the darker green-700 (#005700) are declared but not visible on the marketing surface.

Can I use this DESIGN.md to build a CI/CD or developer-tools marketing site?

Yes — the tokens resolve directly in Claude, Cursor, or any AI tool that reads structured design specs. The reproducible moves: light-gray canvas (#ededed) as the floor instead of white, neon-green CTA voltage held exclusively for the primary button, Inter at 16px / weight 400 for all body copy, 16px rounding as the default card shape, and a dark-navy footer for the closing CTA band. The stadium-scale Space Grotesk headline only works when you have a social-proof number that earns the scale. For smaller dev-tools that cannot claim '2mil+ devs,' consider dropping the Space Grotesk tier entirely and running Inter through the full hierarchy.

CircleCI Design System

CircleCI's marketing system uses neon green (#00db75) CTAs on a near-white light-gray canvas, Space Grotesk for stadium-scale display, and Inter for all body copy.

About CircleCI DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source circleci.com

Backend, Database & DevOps
Developer Tools & IDEs

CircleCI's marketing site opens on a near-white gray canvas and makes one chromatic bet: neon green. The hero product mockup (a dark-navy card showing a pipeline dashboard) sits on the neutral #ededed background, flanked by a small green CTA pill and a ghost secondary button. There are no gradients, no floating shapes, no full-bleed brand-color sections above the fold. The system is restrained to the point of severity — until the page reaches "Join 2mil+ devs," a Space Grotesk headline at 170px / weight 700 that fills the full viewport width at desktop. This stadium-type treatment is the single theatrical moment in an otherwise methodical layout.

The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 14 color tokens anchored by a near-black body-dark (#343434) and a near-white canvas (#ededed), with one brand-layer neon green (#00db75) wired as `--color-slime-500`; 13 typography tokens spanning the 170px Space Grotesk display tier, Inter across body and navigation, and a 14px / weight 700 / 1.75px tracked uppercase label tier for section overlines; 4 radius tokens (16px default, 8px for inner chips, pill for CTAs); and 10 spacing values on an 8px base. Components cover the neon-green primary button, the dark-navy pipeline card, the feature-section illustration tiles, the trust-logo wall, and the dark footer.

Feed this spec to an AI coding tool and it reproduces CircleCI's moves: near-white canvas instead of pure white, neon green held exclusively for the primary action, Inter for all prose and navigation, Space Grotesk reserved for the one social-proof moment, 16px rounding as the default card shape. The move worth borrowing selectively: the stadium-type social-proof number only works when you have a genuinely large number worth displaying — 2 million developers earns the 170px treatment, but a smaller number would look aspirational rather than factual.

What makes it distinct

Neon green CTA voltage#00db75 appears as the single brand accent, exclusively on primary CTA buttons; the canvas stays neutral light-gray throughout
Stadium-scale Space Groteskthe social-proof headline 'Join 2mil+ devs' renders at 170px / weight 700, the largest display size in the CI/CD category
Light-gray canvas, not whitethe body canvas is #ededed (near-white gray), not pure white, giving the page a cooler and flatter feel than a typical SaaS landing page
Dark navy footer inversionthe page closes on a midnight-navy (#1c273a) band that provides the only dark-surface contrast, with the neon green repeating as the CTA color
Inter as the backbone278 elements run Inter at 16px / weight 400, making it the most frequent typographic expression in the system by a wide margin

Live at circleci.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

circleci.com

Explore CircleCI

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

CircleCI design system FAQ

Common questions about CircleCI's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

CircleCI — official site

CircleCI's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.