Cirrus

Cirrus

Cirrus is the infrastructure-docs register: Cloudflare, Fastly, Akamai, Vercel’s platform docs. Neutral grayscale chrome, a single warm accent doing all the work, hairlines separating everything, and type noticeably tighter than the other themes.

It is built for reference material you scan rather than prose you read start to finish.

When to use it

• API, platform, or infrastructure docs with a lot of pages and a deep sidebar.
• Reference-heavy content: tables, parameter lists, config keys.
• Anywhere density beats airiness, and the reader is looking something up.

If your content is long-form narrative, pith or readable give it more room. If you want the same grayscale restraint without the density, geist is the calmer sibling.

Set it

{ "theme": "cirrus" }

Token table

From packages/theme-cirrus/src/styles/theme.css:

Colors: light

Colors: dark

Same accent, inverted ground: #0f0f0f background, #fafafa foreground, #2a2a2a borders. The accent does not change between modes, so a project’s brand color reads the same on both.

Typography

Layout

What makes cirrus different

• Full-bleed shell, centred measure. The other themes cap the whole shell and centre it, which leaves the sidebar floating in from the edge on a wide display. Cirrus pins the chrome to the viewport edges and centres the reading column inside what’s left.
• Links derive from the accent. --cirrus-link is color-mixed from --tangly-color-primary rather than hardcoded, and darkened for contrast, so setting colors.primary in docs.json recolors links to match instead of leaving them orange.
• Density. Body leading is 1.55, not 1.65. Headings step down in small increments and h2 carries a hairline rule. Tables render at 15px.
• Hairline chips, not pills. Inline code is a bordered chip on the elevated surface rather than a filled pill.

Pairs well with bare code blocks

Cirrus was designed alongside the bare code-block chrome. Drop the caption bar and float the copy button on hover:

{
  "theme": "cirrus",
  "styling": {
    "codeblocks": { "chrome": "bare", "copyButton": "hover" }
  }
}

See code blocks for the full set of options.

Customizing

Cirrus’s accent is a Cloudflare-family orange. Swap it for your own and the links, selection, and CTAs follow:

{
  "theme": "cirrus",
  "colors": {
    "primary": "#2563eb",
    "light":   "#60a5fa",
    "dark":    "#1d4ed8"
  }
}

Source

packages/theme-cirrus/src/styles/theme.css