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.
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
NameWidthKey Changes
Mobile< 768pxHamburger nav; hero h1 72→36px; code-window-card stacks below; feature grids 1-up; pricing 1-up.
Tablet768–1024pxTop nav tightens; feature cards 2-up; pricing 2-up.
Desktop1024–1440pxFull top-nav; 3-up feature cards; 3-4 up pricing tiers.
Wide> 1440pxSame as desktop with more breathing room; max content 1280px.
375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

Touch Targets

Collapsing Strategy