ClickHouse Design System

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.

...

Key Characteristics:

• Near-pure black canvas ({colors.canvas} — #0a0a0a) with white type. The system has no light-mode marketing surface.
• ...

Brand & Accent

• Primary (Electric Yellow) ({colors.primary} — #faff69): The signature brand color. All primary CTA backgrounds, large stat-callout numbers, full-bleed yellow CTA cards. The yellow is the brand.
• Primary Active ({colors.primary-active} — #e6eb52): Press / hover-darker variant.
• ...

Surface

• Canvas ({colors.canvas} — #0a0a0a): The default page floor. Near-pure black.
• Surface Soft ({colors.surface-soft} — #121212): Section dividers, very-soft band tints.
• ...

Text

• Ink / On Dark ({colors.on-dark} — #ffffff): All headline and primary text.
• Body ({colors.body} — #cccccc): Default running-text color.
• ...

Semantic / Accent

• Accent Emerald ({colors.accent-emerald} — #22c55e): Success states, "active" status indicators in product UI.
• Accent Rose ({colors.accent-rose} — #ef4444): Error states, "down" indicators.
• ...

Font Family

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.

Hierarchy

Principles

Note on Font Substitutes

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
• ...

Grid & Container

• Max content width: ~1280px centered.
• Editorial body: Single 12-column grid; hero often uses 7/5 split (h1 left, code mockup right).
• ...

Whitespace Philosophy

Decorative Depth

• Code-window cards carry their own internal product chrome — line numbers, syntax highlighting, status bars at the bottom — adding visual density without external shadows.
• The yellow-on-black contrast does most of the elevation work for CTAs.

Border Radius Scale

Top Navigation

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).

Buttons

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.

Cards & Containers

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).

Inputs & Forms

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.

Tags / Badges

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}.

Tab / Filter

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 / Footer

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}.

Do

• Anchor every page on the black canvas. The yellow + black pairing is the brand voltage.
• Reserve {colors.primary} (yellow) for primary CTAs, stat-callout numbers, and full-bleed yellow CTA bands. The yellow's scarcity at the element level + abundance at the band level is what makes it powerful.
• Use Inter at weight 700 for every display headline, with -1 to -2.5px letter-spacing.
• Show actual SQL code blocks inside {component.code-window-card} — ClickHouse is a database; show the query, don't paint marketing illustrations of queries.
• Use {component.stat-callout} numbers to establish credibility (community size, contributors, performance benchmarks). The yellow stat numbers are signature.
• Anchor every band with {spacing.section} (96px) vertical rhythm.

Don't

• Don't introduce a second brand color. ClickHouse is monochromatic + yellow.
• Don't bold display weight beyond 700 or use weight 500 for headlines. The hierarchy depends on size, not on weight gradation.
• Don't use yellow for body text or large surface fills outside of intentional yellow cards.
• Don't use rounded buttons / pills outside of small badges. The standard button radius is 8px (md).
• Don't repeat the same surface mode in two consecutive bands. Black canvas → dark feature card → yellow CTA card → black canvas → code-window card.
• Don't replace SQL code mockups with abstract illustrations. The code IS the marketing voltage.
• Don't add hover state styling beyond what the system already encodes.

Breakpoints

Touch Targets

• {component.button-primary} at minimum 40 × 40px.
• {component.button-icon-circular} at exactly 36 × 36 — slightly under WCAG 44, visually centered.
• ...

Collapsing Strategy

• Top nav collapses to hamburger at < 768px.
• Hero 7-5 grid → single-column on mobile.
• ...

Image Behavior

• Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
• Customer logos in monochrome strip retain native widths; row wraps on mobile.

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.

• ...

"Build a high-performance DB console mockup: void black base (#0a0a0a), electric yellow actions (#faff69), and monospace tables."

The parsed design tokens extracted from the core stylesheet of this design system: