# DESIGN REFERENCE: clickhouse.com --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://clickhouse.com analysis_timestamp: 2026-07-10T17:00:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: React (inferred) design_system_used: ClickHouse Design System (custom) core_philosophy: high‑contrast database interface, near‑pure black canvas with electric yellow as singular brand voltage ``` --- ## BRAND IDENTITY ### Brand Essence ``` 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. ``` ### Visual Hierarchy Principles ``` - Primary weight: Display headlines (Inter 700) — large, confident, engineered precision - Secondary weight: Yellow elements (CTAs, stat numbers, badges) — singular brand voltage - Tertiary weight: Dark surface cards — subtle elevation from black canvas - Code blocks and product UI fragments provide authenticity and developer credibility - The yellow + black pairing is iconic and instantly recognizable ``` ### Emotional Tone ``` Primary emotion: Confidence Secondary emotion: Precision Overall mood: High‑contrast, engineered, performance‑focused — communicates database excellence without marketing softness ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family (Display + Body + UI) ```yaml name: Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 500, 600, 700 styles_used: normal usage: All text — display headlines, body, navigation, buttons, captions note: Single‑family approach — Inter at weight 700 + 600 + 400 covers entire hierarchy ``` ### Secondary Font Family (Code) ```yaml name: JetBrains Mono fallback: ui-monospace, monospace weights_used: 400 styles_used: normal usage: Code blocks, SQL syntax, terminal output ``` ### Typographic Scale ```yaml display_xl: { size: 4.5rem, weight: 700, line-height: 1.05, tracking: -0.15625rem } # 72px display_lg: { size: 3.5rem, weight: 700, line-height: 1.1, tracking: -0.125rem } # 56px display_md: { size: 2.5rem, weight: 700, line-height: 1.15, tracking: -0.09375rem } # 40px display_sm: { size: 2rem, weight: 700, line-height: 1.2, tracking: -0.0625rem } # 32px title_lg: { size: 1.5rem, weight: 700, line-height: 1.3, tracking: -0.01875rem } # 24px title_md: { size: 1.125rem, weight: 600, line-height: 1.4, tracking: 0 } # 18px title_sm: { size: 1rem, weight: 600, line-height: 1.4, tracking: 0 } # 16px stat_display: { size: 3.5rem, weight: 700, line-height: 1, tracking: -0.09375rem } # 56px, ALWAYS yellow body_md: { size: 1rem, weight: 400, line-height: 1.55, tracking: 0 } # 16px body_sm: { size: 0.875rem, weight: 400, line-height: 1.55, tracking: 0 } # 14px caption: { size: 0.8125rem, weight: 500, line-height: 1.4, tracking: 0 } # 13px caption_uppercase: { size: 0.75rem, weight: 600, line-height: 1.4, tracking: 0.09375rem } # 12px code: { size: 0.875rem, weight: 400, line-height: 1.55, tracking: 0 } # 14px, JetBrains Mono button: { size: 0.875rem, weight: 600, line-height: 1, tracking: 0 } # 14px nav_link: { size: 0.875rem, weight: 500, line-height: 1.4, tracking: 0 } # 14px ``` ### Letter Spacing Classes ```yaml tight: -0.15625rem to -0.0625rem (scales with display sizes) normal: 0 wide: 0.09375rem (caption uppercase) ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Electric Yellow) ```yaml primary: { hex: #FAFF69, rgb: (250,255,105), usage: Primary CTAs, stat numbers, full‑bleed yellow bands — singular brand voltage } primary_active: { hex: #E6EB52, rgb: (230,235,82), usage: Active/pressed states for yellow elements } primary_disabled: { hex: #3A3A1F, rgb: (58,58,31), usage: Disabled yellow states } ``` ### Canvas & Surfaces (Near‑Pure Black) ```yaml canvas: { hex: #0A0A0A, rgb: (10,10,10), usage: Default page floor — near‑pure black } surface_soft: { hex: #121212, rgb: (18,18,18), usage: Section dividers, soft band tints } surface_card: { hex: #1A1A1A, rgb: (26,26,26), usage: Feature cards, code windows, product mockups, pricing tiers } surface_elevated: { hex: #242424, rgb: (36,36,36), usage: Nested cards inside larger dark cards } surface_yellow_band: { hex: #FAFF69, rgb: (250,255,105), usage: Yellow CTA bands — same as primary } hairline: { hex: #2A2A2A, rgb: (42,42,42), usage: 1px borders on cards } hairline_strong: { hex: #3A3A3A, rgb: (58,58,58), usage: Heavier dividers, input underlines } ``` ### Text Colors ```yaml ink: { hex: #FFFFFF, rgb: (255,255,255), usage: Headlines and primary text on dark } body_strong: { hex: #E6E6E6, rgb: (230,230,230), usage: Emphasized paragraphs } body: { hex: #CCCCCC, rgb: (204,204,204), usage: Default running text } muted: { hex: #888888, rgb: (136,136,136), usage: Footer links, captions, breadcrumbs } muted_soft: { hex: #5A5A5A, rgb: (90,90,90), usage: Tertiary text, fine print } on_primary: { hex: #0A0A0A, rgb: (10,10,10), usage: Text on primary buttons and yellow bands } on_yellow: { hex: #0A0A0A, rgb: (10,10,10), usage: Text on yellow surfaces — black for high contrast } on_dark: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on dark surfaces } ``` ### Semantic & Accent Colors ```yaml accent_emerald: { hex: #22C55E, rgb: (34,197,94), usage: Success states, active status indicators } accent_rose: { hex: #EF4444, rgb: (239,68,68), usage: Error states, down indicators } accent_blue: { hex: #3B82F6, rgb: (59,130,246), usage: Info states, code syntax highlighting } success: { hex: #22C55E, rgb: (34,197,94), usage: Success messages } warning: { hex: #F59E0B, rgb: (245,158,11), usage: Warning notices } error: { hex: #EF4444, rgb: (239,68,68), usage: Validation errors } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 11.8:1 (#0A0A0A on #FAFF69) text_on_canvas: 15.4:1 (#FFFFFF on #0A0A0A) text_on_surface: 14.8:1 (#FFFFFF on #1A1A1A) text_on_yellow: 11.8:1 (#0A0A0A on #FAFF69) color_harmony: monochromatic (black + single accent yellow) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 4px scaling_factor: 1.5 ``` ### Spacing Scale ```yaml spacing_xxs: { value: 4px, usage: Tiny gaps } spacing_xs: { value: 8px, usage: Small paddings } spacing_sm: { value: 12px, usage: Element gaps } spacing_md: { value: 16px, usage: Standard spacing } spacing_lg: { value: 24px, usage: Medium spacing } spacing_xl: { value: 32px, usage: Large spacing (card padding) } spacing_xxl: { value: 48px, usage: XL spacing } spacing_section: { value: 96px, usage: Section spacing (between major bands) } ``` ### Breakpoints ```yaml mobile: { min: 0px, max: 768px, columns: 4, gutter: 16px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 24px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } wide: { min: 1441px, max: 1920px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } # Primary content width full: { max_width: 100%, padding: 0 } # Full‑bleed sections ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Top Navigation ```yaml type: horizontal (desktop) / hamburger (mobile) position: static or sticky (top) height: 64px background: #0A0A0A (canvas) alignment: left (logo + wordmark) / center (menu) / right (actions) typography: nav_link (Inter 14px, 500) components: - logo: { size: 32px, link to home } - menu: [Product, Use Cases, Pricing, Resources, Customers] - actions: [Sign in (text link), Get Started (button-primary)] ``` ### Button System #### Primary Button (Yellow) ```yaml default: { bg: #FAFF69, text: #0A0A0A, padding: 12px 20px, radius: 8px, height: 40px } hover: { bg: #E6EB52, text: #0A0A0A } active: { bg: #E6EB52, text: #0A0A0A } focus: { outline: 2px solid #FAFF69, offset: 2px } disabled: { bg: #3A3A1F, text: #888888 } ``` #### Secondary Button (Dark Surface) ```yaml default: { bg: #1A1A1A, text: #FFFFFF, padding: 12px 20px, radius: 8px, height: 40px } hover: { bg: #242424, text: #FFFFFF } active: { bg: #242424, text: #FFFFFF } focus: { outline: 2px solid #FAFF69, offset: 2px } disabled: { opacity: 0.5 } ``` #### Text Link Button ```yaml default: { bg: transparent, text: #FFFFFF, padding: 0 } hover: { bg: transparent, text: #FAFF69, text-decoration: underline } ``` #### Inline Text Link (Yellow) ```yaml default: { bg: transparent, text: #FAFF69, text-decoration: underline } hover: { bg: transparent, text: #E6EB52 } ``` #### Icon Circular Button ```yaml default: { bg: #1A1A1A, text: #FFFFFF, radius: 9999px, size: 36px } hover: { bg: #242424, text: #FFFFFF } ``` ### Cards & Containers #### Hero Band ```yaml type: Full‑width band, 7‑5 grid split (h1 left, code mockup right) background: #0A0A0A (canvas) padding: 96px vertical typography: display_xl for h1 components: [h1, subheadline, button row, code-window-card] ``` #### Hero Stat Card (Inline) ```yaml type: Inline stat numbers on canvas (no card surface) text: #FAFF69 (yellow) typography: stat_display (56px, 700) usage: "779+", "2.8k+", "47k+" — community/contributor/star counts ``` #### Feature Card (Yellow) ```yaml background: #FAFF69 (primary) text: #0A0A0A (on_yellow) rounded: 12px (lg) padding: 32px (xl) typography: title_md for heading usage: "Built for every modern data challenge" — full‑bleed yellow card ``` #### Feature Card (Dark) ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) rounded: 12px (lg) padding: 32px (xl) typography: title_md for heading ``` #### Code Window Card ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) typography: code (JetBrains Mono, 14px) rounded: 12px (lg) padding: 24px (lg) content: SQL code blocks with syntax highlighting usage: Hero right‑side artifact, developer‑focused pages ``` #### Product Mockup Card ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) rounded: 12px (lg) padding: 24px (lg) content: ClickHouse product UI fragments (query editor, dashboard, monitoring panel) ``` #### Pricing Tier Cards ```yaml standard: background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) rounded: 12px (lg) padding: 32px (xl) typography: title_lg for plan name featured: background: #FAFF69 (primary) — yellow surface IS featured signal text: #0A0A0A (on_yellow) rounded: 12px (lg) padding: 32px (xl) typography: title_lg for plan name ``` #### Stat Callout ```yaml type: Inline yellow stat numbers background: transparent text: #FAFF69 (primary) typography: stat_display (56px, 700) usage: "779+", "2.8k+", "47k+" — flat layout block, no card surface ``` #### Events Card ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) rounded: 12px (lg) padding: 24px (lg) components: [event title, date (caption_uppercase), location, "Register" CTA] ``` #### Customer Logo Strip ```yaml background: #0A0A0A (canvas) text: #888888 (muted) padding: 32px (xl) vertical content: Horizontal monochrome customer logos ``` ### Form Elements #### Text Input ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) border: 1px solid #2A2A2A (hairline) rounded: 8px (md) padding: 10px 14px height: 40px typography: body_md focused: { border: 2px solid #FAFF69 (primary) } disabled: { opacity: 0.5 } ``` ### Tabs & Badges #### Category Tabs ```yaml inactive: background: transparent text: #888888 (muted) padding: 8px 14px rounded: 8px (md) typography: nav_link active: background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) padding: 8px 14px rounded: 8px (md) typography: nav_link ``` #### Badge Pill (Dark) ```yaml background: #1A1A1A (surface_card) text: #FFFFFF (on_dark) padding: 4px 12px rounded: 9999px (pill) typography: caption (13px, 500) ``` #### Badge Pill (Yellow) ```yaml background: #FAFF69 (primary) text: #0A0A0A (on_yellow) padding: 4px 12px rounded: 9999px (pill) typography: caption_uppercase (12px, 600, 1.5px tracking) usage: "NEW", "GET STARTED" emphasis ``` ### CTA & Footer #### CTA Band (Yellow) ```yaml background: #FAFF69 (primary) text: #0A0A0A (on_yellow) rounded: 12px (lg) padding: 64px vertical typography: display_md for h2 components: [h2, subline, primary CTA (black button on yellow)] usage: Pre‑footer "Deploy your way" CTA band ``` #### Footer ```yaml background: #0A0A0A (canvas) text: #888888 (muted) padding: 64px vertical layout: 4‑column link list (Product / Use Cases / Resources / Company) feature: ClickHouse wordmark at top in #FFFFFF (on_dark) ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage: - hero_band: { 7‑5 split, h1 + code mockup, padding: 96px } - stat_strip: { inline yellow numbers, 3‑up: "779+", "2.8k+", "47k+" } - yellow_feature_card: { full‑bleed yellow card, "Built for every modern data challenge" } - dark_feature_grid: { 3‑up, dark cards, spacing: 32px } - product_showcase: { code windows and product mockups } - customer_logo_strip: { monochrome logos } - pricing_grid: { 3‑up, featured tier in yellow } - cta_band: { yellow, full‑bleed } - footer: { 4‑column, black } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } feature_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 32px } pricing_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Section Patterns ```yaml hero: { height: auto (min 60vh), alignment: left, bg: #0A0A0A, padding: 96px } stats: { layout: inline row, numbers: yellow, no cards } features: { columns: 3, alignment: center, variants: yellow card + dark cards } showcase: { code windows + product mockups, dark surface } cta: { layout: centered, bg: #FAFF69, rounded: 12px, padding: 64px } ``` ### Content Hierarchy ```yaml reading_pattern: F‑pattern (developer landing pages) content_weight_distribution: headline_to_body_ratio: 1:2 code_to_text_ratio: 1:1.5 (hero), 1:2 (feature cards) whitespace_density: moderate (engineering‑grade, not marketing‑soft) ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 150ms fast: 200ms default: 300ms slow: 500ms macro: 750ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.02, duration: 150ms } # feature cards, code windows lift: { value: -2px, duration: 150ms } # cards color_shift: { speed: 150ms } # buttons, text links (yellow shift) ``` ### Code‑Window Interactions ```yaml typewriter: { speed: 50ms per char } # hero code reveal copy_button: { hover: yellow, position: top‑right } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: [Inferred: Custom SVG icons / Lucide] style: outline (UI), custom (brand elements) size: small: 16px, medium: 20px, large: 24px color: inherit (uses currentColor, typically #FFFFFF or #FAFF69) ``` ### Code Blocks & Syntax ```yaml font: JetBrains Mono (14px, 400) background: #1A1A1A (surface_card) language: SQL (primary), Python, Bash syntax_colors: - keywords: #FAFF69 (yellow) - strings: #22C55E (emerald) - functions: #3B82F6 (blue) - comments: #5A5A5A (muted_soft) - numbers: #FAFF69 (yellow) ``` ### Image Treatment ```yaml default_ratio: 16:9 (product screenshots), 4:3 (diagrams) rounded_corners: 12px (code windows), 12px (mockups) object_fit: cover (most images), contain (product UI) shadow: none (flat surfaces) ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [hero headline, CTA, stat numbers, feature cards, pricing, footer] tablet_priority: [hero 7‑5 split, stat strip 3‑up, feature grid 2‑up, pricing 2‑up] desktop_priority: [hero 7‑5 split, stat strip 3‑up, feature grid 3‑up, pricing 3‑up] ``` ### Collapse Points ```yaml navigation: 768px (hamburger appears) hero_layout: 768px (7‑5 grid → single column, code window stacks below) feature_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) pricing_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) code_window: { horizontal scroll on mobile, font‑size fixed } ``` ### Touch Targets ```yaml minimum_size: 40x40px (buttons) | 44x44px recommended for WCAG spacing_between: 12px tap_feedback: scale (buttons), highlight (cards) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,