What is Biome's primary brand color?

Biome's brand voltage is cobalt blue #0065da, wired as --sl-color-accent, --sl-color-text-accent, --sl-color-bg-accent, --sl-badge-default-border, and --ec-frm-edActTabIndTopCol. It appears 75 times on the captured page — 36 as text, 3 as background, 36 as border — exclusively on the primary CTA button ('Get started'), active sidebar items, badge outlines, and inline link accents. A pale version (#c2d9fa, wired as --sl-color-accent-low) appears in gradient end-stops. A dark version (#093066) wires --sl-badge-default-bg and --sl-color-accent-high for badge fill on dark surfaces. The cobalt is the only chromatic brand color; every other color either belongs to the Starlight documentation system or is borrowed from the One Dark Pro syntax palette.

What typeface does Biome use?

Biome uses the system-ui sans-serif stack for all prose and headings — the same pattern as Drizzle, but with one meaningful difference: the hero headline at 64px / weight 600 is heavier than Drizzle's 40px / weight 700, and the system-ui stack is doubled in the CSS variable declarations (--sl-font references the stack twice, likely from Starlight's default variable structure). For code, the system uses ui-monospace (resolving to Cascadia Code / Menlo / Monaco) at 11.2px for inline spans and 14px for code block body text. Source Code Pro is referenced as --code-font in one CSS variable but does not appear to be loaded. For substitution: Inter at 64px / weight 600 is the most consistent cross-platform substitute for the hero tier.

What are the colors in Biome's code formatter diff panel?

The code comparison panel below the fold uses the One Dark Pro palette: tomato red #ff6347 for deleted tokens (130 occurrences across text and border), medium green #3cb371 for added/success tokens (64 text occurrences), steel blue #3b61b0 for keywords and operators (60 occurrences), purple #8844ae for function names and imports (58 occurrences), and light gray #abb2bf for standard identifiers (72 occurrences — One Dark Pro's default code text color). These are not Biome brand colors. They belong to the Atom One Dark / VS Code One Dark Pro theme that the Expressive Code library (used by Astro/Starlight) renders by default. Do not use these colors outside code blocks.

Why does Biome use a pill-shaped CTA button?

The primary 'Get started' button uses an 800px border-radius (32 occurrences), which renders as a full pill at any button height. This is the Starlight documentation framework's default pill treatment for primary CTAs — Starlight ships pill buttons as its standard interactive affordance. The 800px value is not a typo; it follows the CSS convention of using a very large value that exceeds the element's natural height, ensuring full-pill rounding regardless of button size. Secondary action buttons ('Read the announcement') use the same pill radius. The pill treatment is the warmest, most tappable element in an otherwise flat documentation surface.

Can I use this DESIGN.md to build a Biome-style toolchain landing page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool. The agent will reproduce Biome's specific moves: white light-document canvas, cobalt #0065da pill CTAs, One Dark syntax colors for code demonstration panels, hairline-bordered feature cards at 12px radius, and system-ui headlines at 64px / weight 600. All tokens resolve cleanly. Two caveats: first, the One Dark color tokens ({colors.syntax-red}, {colors.syntax-green}, etc.) should be used only inside code block panels — they are not brand colors and look out of place in non-code contexts. Second, the Starlight design system variables are deeply layered; if you need a custom color, override --sl-color-accent and --sl-color-accent-low simultaneously, as both appear in the rendered cobalt tier.

Biome Design System

Biome's design system as a DESIGN.md file — cobalt #0065da brand voltage, system-ui at 64px display, One Dark code panels, light-document surface.

About Biome DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source biomejs.dev

Developer Tools & IDEs
Backend, Database & DevOps

Biome's marketing page is a documentation site doing marketing work — the same Starlight/Astro framework that powers the reference docs also carries the landing page, so the hero shares its structural chrome (top-nav height, sidebar width, hairline border palette) with the API reference a click away. The above-fold experience is a light white surface with a 64px system-ui headline "One toolchain for your web project" at weight 600 in near-black (#17181c), a cobalt-blue "Get started" CTA pill at the left, and the Biome wordmark + geometric logo on the right. Below the fold the page shifts into a wide dark-background code-comparison panel that demonstrates the formatter working on real JavaScript — this is where the One Dark Pro color palette enters: tomato red (#ff6347) for deleted tokens, medium green (#3cb371) for added tokens, steel blue (#3b61b0) for keywords, purple (#8844ae) for function names. Not brand colors — borrowed syntax colors.

The DESIGN.md file packages this into machine-readable tokens. Inside: 17 color tokens including the cobalt brand voltage (#0065da) and a One Dark subset (tomato, green, blue, purple, muted red) plus the Starlight gray scale; 12 typography tokens using system-ui for all prose and the system mono stack for code; 8 radius values with an 800px pill as the dominant CTA shape (32 occurrences) and 12px as the card default; 9 spacing values; and 15 components covering the pill CTA button, the dark code-diff panel, the feature comparison grid, the syntax-highlight inline code chip, and the light document card.

Feed this file to Claude or Cursor and it reproduces Biome's specific moves: white light-document canvas with a single cobalt accent, pill-shaped primary CTAs, One Dark syntax colors for code demonstration panels, and a Starlight-inherited hairline and gray system for all structural chrome. The most transferable pattern for any developer toolchain landing page: place a live code formatter diff directly below the fold, using real before/after code rather than illustrative screenshots. Biome's diff panel is the strongest product argument on the page.

What makes it distinct

Cobalt-as-the-only-color#0065da appears 75 times as the single chromatic accent on an otherwise monochrome white-and-near-black doc surface
One Dark code panelsthe full formatter diff section uses One Dark Pro's palette: tomato red, medium green, steel blue, purple — borrowed entirely from VS Code's most popular dark theme
64px system-ui at weight 600the hero headline uses no custom typeface and outweighs every other typography-brand decision in this directory at the same size
Pill-dominant radius32 occurrences of 800px radius (effectively full-pill) for the hero CTA buttons, against a 12px default for cards
Starlight documentation aestheticthe page is a Starlight/Astro docs site repurposed as a marketing surface; the sidebar nav chrome, badge system, and color variables all belong to the Starlight design system

Live at biomejs.dev

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

biomejs.dev

Explore Biome

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.

Biome design system FAQ

Common questions about Biome'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.

Biome — official site

Biome'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.