Design Md Clickhouse

---
name: "design-md-clickhouse"
description: "Design system reference for design md clickhouse."
risk: low
source: internal
date_added: '2026-04-20'
---

# Design System: ClickHouse

## 1. Visual Theme & Atmosphere

ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black  a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.

The typography is aggressively heavy  Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point  it mirrors the product's promise of extreme speed and performance.

What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.

**Key Characteristics:**
- Pure black canvas (#000000) with neon yellow-green (#faff69) accent  maximum contrast
- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
- Dark charcoal card system with #414141 borders at 80% opacity
- Forest green (#166534) secondary CTA buttons
- Performance stats as oversized display numbers
- Uppercase labels with wide letter-spacing (1.4px) for navigation structure
- Active/pressed state shifts text to pale yellow (#f4f692)
- All links hover to neon yellow-green  unified interactive signal
- Inset shadows on select elements creating "pressed into the surface" depth

## 2. Color Palette & Roles

### Primary
- **Neon Volt** (`#faff69`): The signature brand color  a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
- **Forest Green** (`#166534`): Secondary CTA color  a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.

### Secondary & Accent
- **Pale Yellow** (`#f4f692`): Active/pressed state text color  a softer, more muted version of Neon Volt for state feedback.
- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders  the neon's muted sibling.
- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.

### Surface & Background
- **Pure Black** (`#000000`): The primary page background  absolute black for maximum contrast.
- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.
- **Charcoal** (`#414141`): The primary border color at 80% opacity  the workhorse for card and container containment.
- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.
- **Hover Gray** (`#3a3a3a`): Button hover state background  slightly lighter than Near Black.

### Neutrals & Text
- **Pure White** (`#ffffff`): Primary text on dark surfaces.
- **Silver** (`#a0a0a0`): Secondary body text and muted content.
- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.
- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).

### Gradient System
- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself  neon yellow-green against pure black creates a visual intensity that gradients would dilute.

## 3. Typography Rules

### Font Family
- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)
- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`
- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |
| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |
| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |
| Sub-heading | Inter / Basier | 24px (1.5rem) | 600700 | 1.171.38 | normal | Card headings |
| Feature Title | Inter / Basier | 20px (1.25rem) | 600700 | 1.40 | normal | Small feature titles |
| Body Large | Inter | 18px (1.13rem) | 400700 | 1.56 | normal | Intro paragraphs, button text |
| Body / Button | Inter | 16px (1rem) | 400700 | 1.50 | normal | Standard body, nav, buttons |
| Caption | Inter | 14px (0.88rem) | 400700 | 1.43 | normal | Metadata, descriptions, links |
| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |
| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |
| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |
| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |

### Principles
- **Weight 900 is the weapon**: The display headline uses Inter Black (900)  a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900  covering the full gamut. Weight IS hierarchy.
- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing  wider than most systems  creating bold structural labels that stand out against the dense dark background.
- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.

## 4. Component Stylings

### Buttons

**Neon Primary**
- Background: Neon Volt (`#faff69`)
- Text: Near Black (`#151515`)
- Padding: 0px 16px
- Radius: sharp (4px)
- Border: `1px solid #faff69`
- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
- Active: text shifts to Pale Yellow (`#f4f692`)
- The eye-catching CTA  neon on black

**Dark Solid**
- Background: Near Black (`#141414`)
- Text: Pure White (`#ffffff`)
- Padding: 12px 16px
- Radius: 4px or 8px
- Border: `1px solid #141414`
- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
- Active: text to Pale Yellow
- The standard action button

**Forest Green**
- Background: Forest Green (`#166534`)
- Text: Pure White (`#ffffff`)
- Padding: 12px 16px
- Border: `1px solid #141414`
- Hover: same dark shift
- Active: Pale Yellow text
- The "Get Started" / primary conversion button

**Ghost / Outlined**
- Background: transparent
- Text: Pure White (`#ffffff`)
- Padding: 0px 32px
- Radius: 4px
- Border: `1px solid #4f5100` (olive-tinted)
- Hover: dark bg shift
- Active: Pale Yellow text
- Secondary actions with neon-tinted border

**Pill Toggle**
- Background: transparent
- Radius: pill (9999px)
- Used for toggle/switch elements

### Cards & Containers
- Background: transparent or Near Black
- Border: `1px solid rgba(65, 65, 65, 0.8)`  the signature charcoal containment
- Radius: 4px (small elements) or 8px (cards, containers)
- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`)  the "pressed" effect
- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent

### Navigation
- Dark nav on black background
- Logo: ClickHouse wordmark + icon in yellow/neon
- Links: white text, hover to Neon Volt (#faff69)
- CTA: Neon Volt button or Forest Green button
- Uppercase labels for categories

### Distinctive Components

**Performance Stats**
- Oversized numbers (72px+, weight 700900)
- Brief descriptions beneath
- High-contrast neon accents on key metrics
- The primary visual proof of performance claims

**Neon-Highlighted Card**
- Standard dark card with neon yellow-green border highlight
- Creates "selected" or "featured" treatment
- The accent border makes the card pop against the dark canvas

**Code Blocks**
- Dark surface with Inconsolata at weight 600
- Neon and white syntax highlighting
- Terminal-like aesthetic

**Trust Bar**
- Company logos on dark background
- Monochrome/white logo treatment
- Horizontal layout

## 5. Layout Principles

### Spacing System
- Base unit: 8px
- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
- Section vertical spacing: generous (4864px)

### Grid & Container
- Max container width: up to 2200px (extra-wide) with responsive scaling
- Hero: full-width dark with massive typography
- Feature sections: multi-column card grids with dark borders
- Stats: horizontal metric bar
- Full-dark page  no light sections

### Whitespace Philosophy
- **Dark void as canvas**: The pure black background provides infinite depth  elements float in darkness.
- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.
- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.

### Border Radius Scale
- Sharp (4px): Buttons, badges, small elements, code blocks
- Comfortable (8px): Cards, containers, dividers
- Pill (9999px): Toggle buttons, status indicators

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Black background, text blocks |
| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements  "sunk into the surface" |
| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |

**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible  they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.

## 7. Do's and Don'ts

### Do
- Use Neon Volt (#faff69) as the sole chromatic accent  it must pop against pure black
- Use Inter at weight 900 for hero display text  the extreme weight IS the personality
- Keep everything on pure black (#000000)  never use dark gray as the page background
- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
- Apply Forest Green (#166534) for primary CTA buttons  distinct from neon for action hierarchy
- Show performance stats as oversized display numbers  it's the core visual argument
- Use uppercase with wide letter-spacing (1.4px) for section labels
- Apply Pale Yellow (#f4f692) for active/pressed text states
- Link hovers should ALWAYS shift to Neon Volt  unified interactive feedback

### Don't
- Don't introduce additional colors  the palette is strictly black, neon, green, and gray
- Don't use the neon as a background fill  it's an accent and border color only (except on CTA buttons)
- Don't reduce display weight below 700  heavy weight is core to the personality
- Don't use light/white backgrounds anywhere  the entire experience is dark
- Don't round corners beyond 8px  the sharp geometry reflects database precision
- Don't use soft/diffused shadows on black  they're invisible. Use border-based depth instead
- Don't skip the inset shadow on active states  the "pressed" effect is distinctive
- Don't use warm neutrals  all grays are perfectly neutral

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked cards |
| Small Tablet | 640768px | Minor adjustments |
| Tablet | 7681024px | 2-column grids |
| Desktop | 10241280px | Standard layout |
| Large Desktop | 12801536px | Expanded content |
| Ultra-wide | 15362200px | Maximum container width |

### Touch Targets
- Buttons with 12px 16px padding minimum
- Card surfaces as touch targets
- Adequate nav link spacing

### Collapsing Strategy
- **Hero text**: 96px  72px  48px  36px
- **Feature grids**: Multi-column  2  1 column
- **Stats**: Horizontal  stacked
- **Navigation**: Full  hamburger

### Image Behavior
- Product screenshots maintain aspect ratio
- Code blocks use horizontal scroll on narrow screens
- All images on dark backgrounds

## 9. Agent Prompt Guide

### Quick Color Reference
- Brand Accent: "Neon Volt (#faff69)"
- Page Background: "Pure Black (#000000)"
- CTA Green: "Forest Green (#166534)"
- Card Border: "Charcoal (rgba(65,65,65,0.8))"
- Primary Text: "Pure White (#ffffff)"
- Secondary Text: "Silver (#a0a0a0)"
- Active State: "Pale Yellow (#f4f692)"
- Button Surface: "Near Black (#141414)"

### Example Component Prompts
- "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
- "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
- "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
- "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
- "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."

### Iteration Guide
1. Keep everything on pure black  no dark gray alternatives
2. Neon Volt (#faff69) is for accents and CTAs only  never large backgrounds
3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body
4. Active states use Pale Yellow (#f4f692)  not just opacity changes
5. All links hover to Neon Volt  consistent interactive feedback
6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism