What is ClickHouse's primary brand color?

ClickHouse's brand color is an electric yellow at #faff69 — a lemon-leaning chartreuse, brighter and greener than a typical highlighter yellow. It's the single brand voltage across the entire system, used on every primary CTA button, every stat-callout number ('779+', '47k+', '2.8k+'), and full-bleed yellow CTA bands that close most pages. The press variant darkens to #e6eb52, and the disabled variant desaturates to #3a3a1f. There is no second brand color — ClickHouse is monochromatic plus this one yellow.

What typography does ClickHouse use, and what are the substitutes?

ClickHouse runs Inter for everything — display, body, navigation, buttons, captions — and JetBrains Mono for code blocks. Display sizes from 32px to 72px all sit at weight 700 with aggressive negative letter-spacing (-1px to -2.5px); without the tight tracking, Inter 700 reads too wide and loses the engineered feel. Body runs at weight 400, sub-titles and buttons at 600. If Inter is unavailable, Söhne is the closest commercial substitute and Geist is a modern open alternative. There is no serif counter-voice in the system.

Does ClickHouse have a light mode?

No. The entire public marketing surface lives on a near-pure black canvas (#0a0a0a) with white type. There is no light-mode equivalent documented in this spec. Depth comes from the subtle contrast between canvas and surface-card (#1a1a1a, only a hair lighter than black) rather than from drop shadows — the system uses zero shadows. The yellow-on-black contrast does most of the elevation work, with the yellow CTAs and stat numbers pulling the eye against the dim panels.

Why do code windows show up everywhere in the marketing?

ClickHouse is a database, and the spec is explicit: show the SQL query, don't paint marketing illustrations of queries. Code-window cards render in JetBrains Mono at 14px / 400 inside surface-card (#1a1a1a) panels with 12px rounded corners and 24px padding. SQL syntax is highlighted in muted blues, yellows, and grays. These cards usually sit on the right side of a 7/5 hero grid opposite the h1, and they replace abstract illustrations on developer-focused pages — the code itself is the marketing voltage.

Can I use this DESIGN.md to build my own React data tooling site?

Yes. The file is structured for AI tools like Claude, Cursor, or Copilot to read directly — feed it in and the agent reproduces ClickHouse's restraint (single yellow accent, dark-only canvas, Inter 700 with negative tracking, JetBrains Mono code windows) rather than a generic SaaS theme. Every value is a quoted token you can paste straight into Tailwind config or CSS variables. The 25 components cover buttons, navigation, pricing tiers (including the yellow-fill featured variant), code windows, stat callouts, and the full-bleed yellow CTA band — enough to scaffold a full marketing site.

What's missing from this DESIGN.md spec?

Documented in the Known Gaps section: the exact #faff69 hex was sampled from screenshots and may differ slightly from ClickHouse's official brand color; Inter weight axis values beyond 400/500/600/700 aren't formalized; animation timings (code typewriter effects, stat counter ticks) are out of scope; form validation states past text-input-focused weren't extracted; and the actual ClickHouse Cloud product UI (query console, monitoring dashboards, table browser) shares tokens with the marketing site but adds many product-specific components that aren't captured here. The customer logo strip's exact opacity treatment is also approximate.

ClickHouse Design System

ClickHouse's design system as a DESIGN.md file.

About ClickHouse DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source clickhouse.com

Backend, Database & DevOps
Developer Tools & IDEs

ClickHouse's design system runs on one electric idea: yellow plus black. Near-pure black canvas (#0a0a0a) underneath, electric yellow (#faff69) on top — used scarcely on individual buttons and stat numbers, then poured generously into full-bleed CTA bands. No second brand color. No gradient softening. The voltage IS the identity.

This page packages the full spec into a single DESIGN.md file. Inside: 22 colors, 16 type styles built on Inter and JetBrains Mono, 6 corner radii, 8 spacing tokens, and 25 components — buttons, stat callouts, code-window cards, pricing tiers (with a yellow-fill featured variant), and the signature yellow CTA band that closes every page.

Feed the file to Claude, Cursor, or GitHub Copilot and the React components come back in ClickHouse's voice — Inter 700 headlines at -2.5px tracking, SQL code blocks rendered in JetBrains Mono on dark surface cards, yellow reserved for the moments that matter. Or read it as a reference for how a developer-tooling brand earns recognition with one color instead of ten.

What makes it distinct

Single brand voltageelectric yellow #faff69 carries every primary CTA, stat number, and full-bleed CTA band, never as secondary
Near-pure black canvas#0a0a0a is the page floor; the system has no light-mode marketing surface anywhere
Inter at weight 700 with -2.5px trackingdisplay headlines run 72px tight; no serif counter-voice in the entire scale
JetBrains Mono code windows on #1a1a1aSQL syntax embedded directly in marketing pages, not painted illustrations
Yellow stat-callouts at 56px / 700'779+', '47k+', '2.8k+' are the system's signature credibility moments

Live at clickhouse.com

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

clickhouse.com

Explore ClickHouse

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.

Semantic

Status, errors, success, inline links.

ClickHouse design system FAQ

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

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

The DESIGN.md specification

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

Browse all design systems

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

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use ClickHouse in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→