ClickHouse Design System

---

version: alpha

name: ClickHouse-design-analysis

description: A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident sans, yellow CTAs, and yellow-text stat numbers carry the brand voice across every page. Code blocks and product UI fragments embed directly in dark cards. The yellow + black pairing (and yellow used scarcely as accent) is the system's signature — brand identity without atmospheric decoration.

colors:

primary: "#faff69"

primary-active: "#e6eb52"

primary-disabled: "#3a3a1f"

ink: "#ffffff"

body: "#cccccc"

body-strong: "#e6e6e6"

muted: "#888888"

muted-soft: "#5a5a5a"

hairline: "#2a2a2a"

hairline-strong: "#3a3a3a"

canvas: "#0a0a0a"

surface-soft: "#121212"

surface-card: "#1a1a1a"

surface-elevated: "#242424"

surface-yellow-band: "#faff69"

on-primary: "#0a0a0a"

on-dark: "#ffffff"

on-yellow: "#0a0a0a"

accent-emerald: "#22c55e"

accent-rose: "#ef4444"

accent-blue: "#3b82f6"

success: "#22c55e"

warning: "#f59e0b"

error: "#ef4444"

typography:

display-xl:

fontFamily: "Inter, sans-serif"

fontSize: 72px

fontWeight: 700

lineHeight: 1.05

letterSpacing: -2.5px

display-lg:

fontFamily: "Inter, sans-serif"

fontSize: 56px

fontWeight: 700

lineHeight: 1.1

letterSpacing: -2px

display-md:

fontFamily: "Inter, sans-serif"

fontSize: 40px

fontWeight: 700

lineHeight: 1.15

letterSpacing: -1.5px

display-sm:

fontFamily: "Inter, sans-serif"

fontSize: 32px

fontWeight: 700

lineHeight: 1.2

letterSpacing: -1px

title-lg:

fontFamily: "Inter, sans-serif"

fontSize: 24px

fontWeight: 700

lineHeight: 1.3

letterSpacing: -0.3px

title-md:

fontFamily: "Inter, sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "Inter, sans-serif"

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

stat-display:

fontFamily: "Inter, sans-serif"

fontSize: 56px

fontWeight: 700

lineHeight: 1.0

letterSpacing: -1.5px

body-md:

fontFamily: "Inter, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

body-sm:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

caption:

fontFamily: "Inter, sans-serif"

fontSize: 13px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

caption-uppercase:

fontFamily: "Inter, sans-serif"

fontSize: 12px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 1.5px

code:

fontFamily: "JetBrains Mono, ui-monospace, monospace"

fontSize: 14px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

button:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 600

lineHeight: 1

letterSpacing: 0

nav-link:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 40px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.md}"

button-primary-disabled:

backgroundColor: "{colors.primary-disabled}"

textColor: "{colors.muted}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 40px

button-text-link:

backgroundColor: transparent

textColor: "{colors.on-dark}"

typography: "{typography.button}"

button-icon-circular:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

size: 36px

text-link:

backgroundColor: transparent

textColor: "{colors.primary}"

typography: "{typography.body-md}"

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.nav-link}"

height: 64px

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.on-dark}"

typography: "{typography.display-xl}"

padding: 96px

hero-stat-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.stat-display}"

feature-card-yellow:

backgroundColor: "{colors.surface-yellow-band}"

textColor: "{colors.on-yellow}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 32px

feature-card-dark:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 32px

code-window-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.code}"

rounded: "{rounded.lg}"

padding: 24px

product-mockup-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

pricing-tier-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-lg}"

rounded: "{rounded.lg}"

padding: 32px

pricing-tier-card-featured:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.title-lg}"

rounded: "{rounded.lg}"

padding: 32px

stat-callout:

backgroundColor: transparent

textColor: "{colors.primary}"

typography: "{typography.stat-display}"

cta-band-yellow:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.display-md}"

rounded: "{rounded.lg}"

padding: 64px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 10px 14px

height: 40px

text-input-focused:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

rounded: "{rounded.md}"

category-tab:

backgroundColor: transparent

textColor: "{colors.muted}"

typography: "{typography.nav-link}"

rounded: "{rounded.md}"

padding: 8px 14px

category-tab-active:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.nav-link}"

rounded: "{rounded.md}"

badge-pill:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.caption}"

rounded: "{rounded.pill}"

padding: 4px 12px

badge-yellow:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 12px

events-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

customer-logo-strip:

backgroundColor: "{colors.canvas}"

textColor: "{colors.muted}"

typography: "{typography.body-md}"

padding: 32px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.muted}"

typography: "{typography.body-sm}"

padding: 64px

---

ClickHouse's marketing surface is the highest-contrast interface in the database / data-platform category. The base atmosphere is **near-pure black canvas** (`{colors.canvas}` — #0a0a0a) with **electric yellow** (`{colors.primary}` — #faff69) as the singular brand voltage. The yellow handles every primary CTA, every stat-callout number, every "GET STARTED" badge — used scarcely on individual elements but generously on full-bleed yellow CTA cards. White typography in confident weight-700 sans-serif anchors the editorial body.

The yellow + black pairing is what makes ClickHouse instantly recognizable. Where Snowflake uses cool blue gradients and Databricks uses red + slate, ClickHouse leans hard into one electric yellow that does all the brand work. Code blocks, terminal output, and product UI fragments embed directly in dark `{colors.surface-card}` (#1a1a1a) cards across every page.

Type voice runs **Inter** at confident weights — 700 for display headlines (with negative letter-spacing -1 to -2.5px), 600 for sub-titles and buttons, 400 for body. The system has no display-serif counter-voice; everything is one geometric humanist sans, scaled and weighted for hierarchy.

**Key Characteristics:**

The system runs **Inter** for everything — display, body, navigation, buttons, captions. **JetBrains Mono** handles code blocks. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The single-family approach is deliberate: Inter at weight 700 + 600 + 400 covers the entire hierarchy without needing a serif or display counter-voice. The geometric humanist character of Inter at confident bold weight gives ClickHouse a precise, engineered feel that matches the database's performance-first positioning.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 72px | 700 | 1.05 | -2.5px | Homepage h1 ("The leading database for AI") |

| `{typography.display-lg}` | 56px | 700 | 1.1 | -2px | Section heads |

| `{typography.display-md}` | 40px | 700 | 1.15 | -1.5px | Sub-section heads, CTA-band heads |

| `{typography.display-sm}` | 32px | 700 | 1.2 | -1px | Card titles, pricing tier prices |

| `{typography.title-lg}` | 24px | 700 | 1.3 | -0.3px | Pricing plan names, larger feature titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |

| `{typography.stat-display}` | 56px | 700 | 1.0 | -1.5px | Stat callouts ("779+", "47k+") — ALWAYS yellow |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |

| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |

| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |

| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, "NEW" badges |

| `{typography.code}` | 14px | 400 | 1.55 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |

Display weights stay at 700 across all sizes. Negative letter-spacing (-1 to -2.5px) is essential — Inter at weight 700 without negative tracking reads as too wide / Apple-marketing. The tightened tracking gives ClickHouse the precise, engineered feel.

Body and labels stay at weights 400 / 500 / 600. The hierarchy is built on size + weight, not on family contrast.

Inter is open-source and the documented choice. **Söhne** is a close commercial alternative if licensed. **Geist** is another modern alternative.

ClickHouse uses dense, slightly-compressed whitespace appropriate for a developer-tooling brand — generous enough to read editorially, tight enough to feel "engineering-grade" rather than "marketing-soft." Section rhythm at 96px is standard; card internal padding stays at 32px for feature cards.

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero |

| Soft hairline | 1px `{colors.hairline}` border | Code-window cards, content cards |

| Surface card | `{colors.surface-card}` background — no shadow | Feature cards, pricing tiers, event cards |

| Yellow band | `{colors.primary}` background — no shadow | Full-bleed yellow CTA cards / bands |

The system uses no drop shadows. Depth comes from the contrast between black canvas and `{colors.surface-card}` (a barely-lighter-than-canvas tone) — the contrast is subtle, more like an "engineering-grade dim panel" than an "elevated card."

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Reserved for badge accents |

| `{rounded.sm}` | 6px | Small inline buttons |

| `{rounded.md}` | 8px | Standard CTA buttons, text inputs |

| `{rounded.lg}` | 12px | Content cards, code-window cards, pricing tiers |

| `{rounded.pill}` | 9999px | Badge pills |

| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |

**`top-nav`** — Black nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the ClickHouse logo + wordmark at left, primary horizontal menu (Product, Use Cases, Pricing, Resources, Customers) center-left, right-side cluster with "Sign in" + "Get Started" `{component.button-primary}` (yellow). Menu items in `{typography.nav-link}` (Inter 14px / 500).

**`button-primary`** — The signature yellow CTA. Background `{colors.primary}` (#faff69), text `{colors.on-primary}` (black), type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). The yellow + black combination is iconic.

**`button-secondary`** — Dark surface card button. Background `{colors.surface-card}`, text `{colors.on-dark}`, same shape as primary.

**`button-text-link`** — Inline text button, no background. Used for "Sign in" and inline link CTAs.

**`text-link`** — Inline body links in `{colors.primary}` (yellow on dark). Underlined.

**`button-icon-circular`** — 36 × 36 circular icon button on dark.

**`hero-band`** — Black-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, code-window or product mockup on the right. Vertical padding `{spacing.section}` (96px).

**`hero-stat-card`** — Yellow stat-display numbers ("779+", "47k+") inline on the canvas. No card surface — just yellow text in `{typography.stat-display}` (56px / 700).

**`feature-card-yellow`** — Full-bleed yellow card ("Built for every modern data challenge"). Background `{colors.primary}`, text `{colors.on-yellow}` (black), rounded `{rounded.lg}` (12px), padding `{spacing.xl}` (32px). The yellow card IS the visual emphasis.

**`feature-card-dark`** — Standard dark feature card. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).

**`code-window-card`** — Dark card showing a SQL code block. Background `{colors.surface-card}`, code in JetBrains Mono with syntax highlighting, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Often the hero's right-side artifact on developer-focused pages.

**`product-mockup-card`** — Card showing actual ClickHouse product UI (query editor, dashboard, monitoring panel). Same shape as `{component.feature-card-dark}` but with embedded product chrome inside.

**`pricing-tier-card`** — Standard tier card. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).

**`pricing-tier-card-featured`** — The featured tier flips to `{colors.primary}` (yellow). The yellow surface IS the featured signal.

**`stat-callout`** — Inline yellow stat numbers ("779+", "2.8k+", "47k+"). Transparent background, text `{colors.primary}`, type `{typography.stat-display}`. Used as a flat layout block, not a card with surface.

**`events-card`** — Used on /company/events. Dark card with event title, date in `{typography.caption-uppercase}`, location, and a "Register" CTA. Rounded `{rounded.lg}`, padding `{spacing.lg}`.

**`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `{colors.canvas}`, logos in `{colors.muted}`, vertical padding `{spacing.xl}` (32px).

**`text-input`** — Dark text input. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px.

**`text-input-focused`** — Border thickens to `{colors.primary}` (yellow) for emphasis.

**`badge-pill`** — Small dark pill label. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.caption}`, rounded `{rounded.pill}`.

**`badge-yellow`** — Yellow pill for "NEW", "GET STARTED" emphasis. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`.

**`category-tab`** + **`category-tab-active`** — Dark tab navigation. Inactive: transparent + muted text. Active: surface-card background + on-dark text. Padding 8px × 14px, rounded `{rounded.md}`.

**`cta-band-yellow`** — A pre-footer "Deploy your way" CTA band. Full yellow fill, black type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-md}` and a CTA — usually a black-button on the yellow surface.

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Product / Use Cases / Resources / Company. Vertical padding 64px. The ClickHouse wordmark sits at the top in `{colors.on-dark}`.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 72→36px; code-window-card stacks below; feature grids 1-up; pricing 1-up |

| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |

| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-4 up pricing tiers |

| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |

1. Focus on ONE component at a time. Reference its YAML key (`{component.code-window-card}`, `{component.pricing-tier-card-featured}`).

2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries.

3. Use `{token.refs}` everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay Inter 700 with negative letter-spacing. Body stays Inter 400.

6. The yellow + black pairing is the brand contract. Don't soften with secondary accents.

7. When in doubt about emphasis: bigger Inter 700 before adding color.