A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Clickhouse, in one page
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:
- Near-pure black canvas (
{colors.canvas}— #0a0a0a) with white type. The system has no light-mode marketing surface. - Electric yellow primary (
{colors.primary}— #faff69). Used on primary CTAs, large stat-callout numbers ("2.8k+", "74k+"), and full-bleed yellow CTA bands. - Inter at weight 700 for display, weight 600 for sub-titles + buttons, weight 400 for body. No serif counterpoint.
- Dark surface cards (
{colors.surface-card}— #1a1a1a) for feature cards, code windows, and product mockups. Cards barely lighter than canvas — color-block contrast is subtle. - Code blocks render in JetBrains Mono inside
{colors.surface-card}. SQL syntax-highlighted in muted blues / yellows / grays. - Stat numbers in yellow + sans-700 + huge size carry the credibility moment ("779+", "2.8k+", "47k+" community / contributor / star counts).
- Border radius is hierarchical:
{rounded.md}(8px) for buttons,{rounded.lg}(12px) for content cards. No pill except in tag badges. - Section rhythm
{spacing.section}(96px) between major editorial bands.
Do's and don'ts
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.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Clickhouse design language. Follow the measured tokens below — do not substitute your own palette.
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
Type:
- families: Inter, JetBrains Mono, ui-monospace, Söhne
- scale: 12, 13, 14, 16, 18, 24, 32, 40, 56
- weights: 400, 500, 600, 700
Shape:
- radius: 4, 6, 8, 12
Spacing: 4, 8, 10, 12, 16, 24, 32, 48, 64, 96
Rules:
- 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 + abunda…
- 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.
Avoid:
- 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.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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. - Primary Disabled (
{colors.primary-disabled}— #3a3a1f): Desaturated dark-yellow on dark canvas.
Surface
- Canvas (
{colors.canvas}— #0a0a0a): The default page floor. Near-pure black. - Surface Soft (
{colors.surface-soft}— #121212): Section dividers, very-soft band tints. - Surface Card (
{colors.surface-card}— #1a1a1a): Feature cards, code windows, product mockups, pricing tier cards. - Surface Elevated (
{colors.surface-elevated}— #242424): Nested cards inside larger dark cards. - Surface Yellow Band (
{colors.surface-yellow-band}— #faff69): The yellow CTA card / band fill — same hex as primary. - Hairline (
{colors.hairline}— #2a2a2a): 1px borders on cards. - Hairline Strong (
{colors.hairline-strong}— #3a3a3a): Heavier divider on input underlines and emphasis.
Text
- Ink / On Dark (
{colors.on-dark}— #ffffff): All headline and primary text. - Body (
{colors.body}— #cccccc): Default running-text color. - Body Strong (
{colors.body-strong}— #e6e6e6): Emphasized paragraphs. - Muted (
{colors.muted}— #888888): Footer links, captions, breadcrumbs. - Muted Soft (
{colors.muted-soft}— #5a5a5a): Tertiary text — fine print. - On Primary / On Yellow (
{colors.on-primary}/{colors.on-yellow}— #0a0a0a): Black text on yellow CTAs and yellow CTA bands. The high-contrast yellow + black combo is the brand action signal.
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. - Accent Blue (
{colors.accent-blue}— #3b82f6): Info states, code-syntax highlighting.
Type scaleRead the full spec
Font Family
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.
Hierarchy
| 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 |
Principles
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.
Note on Font Substitutes
Inter is open-source and the documented choice. Söhne is a close commercial alternative if licensed. Geist is another modern alternative.
Components and layoutRead the full spec
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}.
Responsive behaviourRead the full spec
Breakpoints
| 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 |
Touch Targets
{component.button-primary}at minimum 40 × 40px.{component.button-icon-circular}at exactly 36 × 36 — slightly under WCAG 44, visually centered.{component.text-input}height is 40px.
Collapsing Strategy
- Top nav collapses to hamburger at < 768px.
- Hero 7-5 grid → single-column on mobile.
- Feature card grids reduce columns rather than scaling.
- Code-window cards retain font-size; horizontal scroll inside the card on mobile.
- Pricing tier cards collapse 4 → 2 → 1; featured tier yellow stays distinct.
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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-clickhouse {--page-bg: #0a0a0a;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #faff69;
--link-hover-color: #f8ff36;
--border-color: #363636;
--card-bg: #0a0a0a;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #1e1e1e;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0a0a0a;
--footer-text-color: #a9a9a9;
--button-bg: #faff69;
--button-text-color: #0a0a0a;
--button-hover-bg: #f8ff36;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #191919;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #272727;
--button-secondary-border: 1px solid #363636;
--prompt-bg: #161616;
--prompt-text-color: #ffffff;
--base-font: var(--font-inter);
--heading-font: var(--font-mono);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/clickhouse/DESIGN.md· 25.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.