ClickHouse — design system & UI screens

Data · 1 screen · 11 sections · https://clickhouse.com/

Dark hero with yellow CTAs, millisecond queries at petabyte scale, over a Meta/Spotify/HubSpot logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/clickhouse.

Decoded design system

ClickHouse's decoded design system: background #131312, text #ECECEE, accent #FAFF69, link #161600, primary #FAFF69; type scale h1 96px / h2 36px / body 24px; 4px spacing base; 8px base radius. The single interactive/action color is #FAFF69 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#131312`
surface	`#20201F`
border	`#333333`
text	`#ECECEE`
text_muted	`#99999A`
primary	`#FAFF69`
accent	`#FAFF69`
link	`#161600`
secondary	`#4F5101`
button_bg	`#FAFF69`
button_text	`#151515`

Using these colors

Action color #FAFF69 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #FAFF69 — one role, not several (the action color).
accent #FAFF69 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #161600 — fails contrast on the background (~1.0:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #4F5101 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Inter
Body: Inter
h1: 96px
h2: 36px
body: 24px

Spacing

base unit: 4px
scale: 2px, 5px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 40px

Radii

base: 8px
button: 4px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--color-neutral-750`	`lab(11.6695% -.575654 2.20573)`
`--color-neutral-600`	`lab(40.7356% -.0000149012 .00000596046)`
`--color-neutral-500`	`lab(53.5884% 0 0)`
`--color-amber-600`	`lab(60.3514% 40.5624 87.1228)`
`--color-primary-900`	`lab(6.80894% -2.73491 10.0176)`
`--color-neutral-300`	`lab(77.7048% -.0000298023 0)`
`--color-primary-400`	`lab(93.4022% -17.6904 90.034)`
`--color-red-200`	`lab(86.017% 19.8815 7.75869)`
`--color-neutral-200`	`lab(88.8292% 0 -.0000119209)`
`--color-blue-300`	`lab(77.5052% -6.4629 -36.42)`

…and 104 more measured on the page.

Button states (measured)

primary hover: background #14532D
primary focus: outline 1px solid rgb(20, 20, 20)

Layout (measured)

container max-width: 1280px
nav: 73px sticky, backdrop blur(8px)
common grid: 2 columns

Motion choreography (measured)

Load order: h1.animate-fade-up → div.absolute → p.animate-fade-up → div.animate-fade-up×2 → div.w-full → div.cc-window

Overlay recipe (measured)

dialog panel: #141414 · radius 10px

Responsive (measured)

breakpoints: 330px · 416px · 528px · 549px · 768px · 930px
mobile (390px): hero 24px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

The leading database for AI