ClickHouse

version alpha

name ClickHouse

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

Overview

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.

Colors

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.

Typography

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}