# Design System Inspiration of ClickHouse

A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident bold sans, yellow CTAs, and yellow stat numbers carry the brand voice.

query.sql · clickhouse

    -- Aggregate billions of rows in milliseconds
    SELECT
      toDate(event_time) AS day,
      uniqExact(user_id) AS users,
      count() AS events
    FROM analytics
    WHERE event_time >= '2026-01-01'
    GROUP BY day
    ORDER BY day DESC
    LIMIT 100;

01 — Color Palette

## Yellow + black + white

Single-accent system. Electric yellow handles CTAs, stat numbers, and full-bleed yellow CTA bands. Everything else is black canvas + white type + dark surface cards.

### Brand

primary (yellow)
#faff69
All primary CTAs, stat numbers, full-bleed yellow CTA bands.
primary-active
#e6eb52
Press / hover-darker variant.
primary-disabled
#3a3a1f
Desaturated yellow on dark canvas.

### Surface

canvas
#0a0a0a
Default page floor — near-pure black.
surface-soft
#121212
Section dividers.
surface-card
#1a1a1a
Feature cards, code windows, pricing tiers.
surface-elevated
#242424
Nested cards inside larger dark cards.
hairline
#2a2a2a
1px borders on dark cards.

### Text

on-dark / ink
#ffffff
All headlines and primary text.
body
#cccccc
Default running-text. Cooler than pure white.
muted
#888888
Footer links, captions.
muted-soft
#5a5a5a
Tertiary text, fine-print.
02 — Typography Scale

## Inter-only · weight 700 display

Single-family system. Inter at 700 for display (with -1 to -2.5px tracking), 600 for sub-titles + buttons, 400 for body. JetBrains Mono for code.

display-xl72px / 700 / 1.05 / -2.5px
The leading database for AI
display-lg56px / 700 / 1.1 / -2px
Built for every modern data challenge
display-md40px / 700 / 1.15 / -1.5px
Why ClickHouse is so fast
display-sm32px / 700 / 1.2 / -1px
Deploy your way
title-lg24px / 700 / 1.3 / -0.3px
Pricing that scales with you
title-md18px / 600 / 1.4
Real-time analytics
title-sm16px / 600 / 1.4
Built for AI workloads
stat-display56px / 700 / 1.0 / -1.5px
47k+
body-md16px / 400 / 1.55
Process billions of rows per second with the open-source database that powers real-time analytics at scale.
body-sm14px / 400 / 1.55
Footer body, fine-print legal text.
caption13px / 500 / 1.4
Trusted by Uber, Cloudflare, and 100,000+ teams
caption-uppercase12px / 600 / 1.5px
NEW · CLICKHOUSE CLOUD
code14px / 400 / 1.55
JetBrains Mono
SELECT count() FROM events WHERE ts > now() - 1h
button14px / 600 / 1.0
Get Started
03 — Button Variants

## Yellow primary, dark secondary

button-primary
yellow / on-primary black / md radius
button-primary-active
primary-active darker yellow
button-primary-disabled
button-secondary
surface-card / on-dark / hairline outline
button on yellow band
Black button on yellow CTA card.
button-text-link
text-link-yellow
View benchmarks →
Inline yellow link in body.
button-icon-circular
36 × 36 / surface-card / hairline
04 — Cards & Containers

#### Built for every modern data challenge

From real-time analytics to observability, ClickHouse handles workloads that make other databases buckle.

⚡

#### Fastest queries in production

Petabyte-scale aggregations in milliseconds. Compressed columnar storage with vectorized execution.

🌐

#### Open source, deploy anywhere

Self-host on bare metal, containers, or any cloud. Or run on ClickHouse Cloud with zero-ops.

benchmark.sql

    SELECT uniqExact(user_id) FROM events
    WHERE ts >= now() - INTERVAL 1 DAY
    -- 32B rows scanned in 184ms

$ clickhouse-client --query
events table · 32.8B rows · OK
query latency · 184ms · INDEX
compression ratio · 11x · LZ4
🔧

#### Works with everything

Native integrations with Kafka, Postgres, S3, Snowflake, dbt, Grafana, and 100+ data tools.

05 — Stat Callouts (Yellow Numbers)
779+
Contributors
2.8k+
Customers
47k+
GitHub stars
74k+
Community members
06 — Pricing Tiers

#### Development

$0

- Up to 1 TB
- Single replica
- Community support

#### Production

$1k+

- Unlimited storage
- Multi-replica HA
- SLA + 24/7 support

#### Scale

Custom

- Petabyte scale
- Dedicated nodes
- Custom SLA + TAM

#### Enterprise

Custom

- BYOC + on-prem
- SOC 2 + HIPAA
- Dedicated success

07 — Yellow CTA Band

### Deploy your way

Self-host on any cloud, or run on ClickHouse Cloud with zero-ops. Free trial — no credit card required.

08 — Events & Form Elements
JAN 24 · SAN FRANCISCO

##### ClickHouse Meetup

Open-source release party + roadmap walkthrough.
FEB 12 · BERLIN

##### Real-Time Analytics Workshop

Hands-on workshop covering production deployments.
MAR 8 · LONDON

##### ClickHouse for AI Workloads

Vector search + observability + agentic data pipelines.
Email address
Email (focused)
Company
09 — Badges
Featured Open Source NEW CLOUD GET STARTED
10 — Spacing Scale
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
11 — Border Radius Scale
4 · xs
6 · sm
8 · md
12 · lg
pill
full
12 — Elevation & Depth

No drop shadows. Depth comes from black-canvas vs surface-card subtle contrast and yellow-vs-black extreme contrast.

##### Flat / Canvas

Body sections, top nav, hero.

##### Surface soft

Section dividers, very-soft tints.

##### Surface card

Feature cards, code windows, pricing tiers.

##### Yellow band

Full-bleed yellow CTA fill — extreme contrast.

##### Subtle hairline

1px hairline #2a2a2a.

##### Yellow focus ring

3px yellow at 20% alpha.

13 — Responsive Behavior

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.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA at min 40 × 40px.
- Icon button at 36 × 36 — visually centered.
- Text input height 40px.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px.
- Hero 7-5 grid → single-column on mobile.
- Code blocks retain font-size; horizontal scroll inside the card on mobile.
- Pricing tier cards collapse 4 → 2 → 1; featured yellow tier stays distinct.