laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
design-md/clickhouse/DESIGN.md Normal file
View File

@@ -0,0 +1,281 @@
# 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) | 600–700 | 1.17–1.38 | normal | Card headings |
| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |
| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |
| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |
| Caption | Inter | 14px (0.88rem) | 400–700 | 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 700–900)
- 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 (48–64px)
### 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 | 640–768px | Minor adjustments |
| Tablet | 768–1024px | 2-column grids |
| Desktop | 1024–1280px | Standard layout |
| Large Desktop | 1280–1536px | Expanded content |
| Ultra-wide | 1536–2200px | 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

25
design-md/clickhouse/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Clickhouse — Design System
> Design.md extracted from the public [clickhouse](https://clickhouse.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Clickhouse design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Clickhouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)
### Light Mode
![Clickhouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)

834
design-md/clickhouse/preview-dark.html Normal file
View File

@@ -0,0 +1,834 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ClickHouse (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
/* ClickHouse brand tokens */
--color-neon-volt: #faff69;
--color-forest-green: #166534;
--color-dark-forest: #14572f;
--color-pale-yellow: #f4f692;
--color-border-olive: #4f5100;
--color-olive-dark: #161600;
--color-pure-black: #000000;
--color-near-black: #141414;
--color-charcoal: #414141;
--color-deep-charcoal: #343434;
--color-hover-gray: #3a3a3a;
--color-pure-white: #ffffff;
--color-silver: #a0a0a0;
--color-mid-gray: #585858;
--color-border-gray: #e5e7eb;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Dark mode — ClickHouse native */
--bg-page: #000000;
--bg-card: transparent;
--bg-nav: rgba(0,0,0,0.92);
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-muted: #585858;
--border-color: rgba(65,65,65,0.8);
--border-subtle: rgba(65,65,65,0.4);
--section-label-color: #faff69;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-body);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.nav-brand .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--color-neon-volt);
border-radius: 4px;
font-size: 14px;
font-weight: 900;
color: var(--color-pure-black);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-primary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.4px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-neon-volt); }
.nav-cta {
background: var(--color-forest-green);
color: var(--color-pure-white);
padding: 8px 16px;
border: 1px solid var(--color-near-black);
border-radius: 4px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(250,255,105,0.04) 0%, rgba(250,255,105,0.02) 30%, transparent 60%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-body);
font-size: 96px;
font-weight: 900;
line-height: 1.0;
letter-spacing: normal;
margin-bottom: 24px;
position: relative;
}
.hero h1 span { color: var(--color-neon-volt); }
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.56;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
/* BUTTONS */
.btn-neon {
background: var(--color-neon-volt);
color: #151515;
padding: 0px 16px;
border: 1px solid var(--color-neon-volt);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
line-height: 44px;
}
.btn-neon:hover { background: rgb(29,29,29); color: var(--color-pure-white); }
.btn-neon:active { color: var(--color-pale-yellow); }
.btn-dark {
background: var(--color-near-black);
color: var(--color-pure-white);
padding: 12px 16px;
border: 1px solid var(--color-near-black);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-dark:hover { background: var(--color-hover-gray); color: rgba(255,255,255,0.8); }
.btn-dark:active { color: var(--color-pale-yellow); }
.btn-forest {
background: var(--color-forest-green);
color: var(--color-pure-white);
padding: 12px 16px;
border: 1px solid var(--color-near-black);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-forest:hover { background: var(--color-hover-gray); }
.btn-forest:active { color: var(--color-pale-yellow); }
.btn-ghost {
background: transparent;
color: var(--color-pure-white);
padding: 0px 32px;
border: 1px solid var(--color-border-olive);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
line-height: 44px;
}
.btn-ghost:hover { background: rgb(29,29,29); }
.btn-ghost:active { color: var(--color-pale-yellow); }
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-body);
font-size: 36px;
font-weight: 700;
line-height: 1.11;
letter-spacing: normal;
margin-bottom: 48px;
color: var(--text-primary);
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--color-near-black);
}
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; color: var(--text-primary); }
.type-sample-label {
font-family: var(--font-code);
font-size: 12px;
color: var(--text-secondary);
}
/* BUTTON DEMOS */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-secondary);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-standard { border: 1px solid var(--border-color); }
.card-neon { border: 2px solid var(--color-neon-volt); }
.card-inset {
border: 1px solid var(--border-color);
box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;
}
.card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; color: var(--text-primary); }
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label {
font-family: var(--font-code);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--color-neon-volt);
margin-bottom: 16px;
}
/* CODE BLOCK */
.code-block {
background: var(--color-near-black);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px 24px;
margin-top: 24px;
font-family: var(--font-code);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--color-pure-white);
overflow-x: auto;
}
.code-block .keyword { color: var(--color-neon-volt); }
.code-block .string { color: #4ade80; }
.code-block .comment { color: var(--color-silver); }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(250,255,105,0.08);
border: 1px solid rgba(250,255,105,0.25);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-secondary);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: transparent;
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-secondary);
}
.radius-context {
font-size: 11px;
color: var(--text-secondary);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: transparent;
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--border-color); }
.elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
.elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }
.elevation-neon { border: 2px solid var(--color-neon-volt); }
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level {
font-family: var(--font-code);
font-size: 11px;
color: var(--color-neon-volt);
text-transform: uppercase;
letter-spacing: 0.55px;
margin-top: 12px;
}
/* PERFORMANCE STATS (ClickHouse distinctive) */
.stats-bar {
display: flex;
flex-wrap: wrap;
gap: 48px;
justify-content: center;
margin-top: 32px;
}
.stat-item { text-align: center; }
.stat-number {
font-family: var(--font-body);
font-size: 72px;
font-weight: 700;
line-height: 1.0;
color: var(--text-primary);
}
.stat-number .accent { color: var(--color-neon-volt); }
.stat-desc {
font-size: 14px;
color: var(--text-secondary);
margin-top: 8px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 48px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
.stats-bar { flex-direction: column; gap: 32px; }
.stat-number { font-size: 48px; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><span class="icon">CH</span> ClickHouse</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br><span>ClickHouse</span></h1>
<p>Auto-generated design token catalog from DESIGN.md &mdash; Dark mode (native)</p>
<div class="hero-buttons">
<button class="btn-neon">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
<!-- Performance Stats Bar (ClickHouse distinctive) -->
<div class="stats-bar">
<div class="stat-item">
<div class="stat-number">1000<span class="accent">x</span></div>
<div class="stat-desc">Faster than traditional databases</div>
</div>
<div class="stat-item">
<div class="stat-number"><span class="accent">100</span>+</div>
<div class="stat-desc">Data formats supported</div>
</div>
<div class="stat-item">
<div class="stat-number">0<span class="accent">.</span>1s</div>
<div class="stat-desc">Average query response</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary &mdash; Neon Volt Family</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #faff69;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Neon Volt</div>
<div class="color-swatch-hex">#faff69</div>
<div class="color-swatch-role">Signature brand accent, CTAs, accent borders, link hovers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #f4f692;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pale Yellow</div>
<div class="color-swatch-hex">#f4f692</div>
<div class="color-swatch-role">Active/pressed state text color</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #4f5100;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Olive</div>
<div class="color-swatch-hex">#4f5100</div>
<div class="color-swatch-role">Ghost button borders, muted neon sibling</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #161600; border-bottom: 1px solid rgba(65,65,65,0.8);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Olive Dark</div>
<div class="color-swatch-hex">#161600</div>
<div class="color-swatch-role">Darkest neon-tinted color for subtle brand text</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">CTA Greens</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #166534;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Forest Green</div>
<div class="color-swatch-hex">#166534</div>
<div class="color-swatch-role">Secondary CTA buttons, Get Started actions</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #14572f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Forest</div>
<div class="color-swatch-hex">#14572f</div>
<div class="color-swatch-role">Darker green for borders and secondary accents</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000; border: 1px solid rgba(65,65,65,0.8); border-bottom: none;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary page background, maximum contrast canvas</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #141414; border-bottom: 1px solid rgba(65,65,65,0.8);"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near Black</div>
<div class="color-swatch-hex">#141414</div>
<div class="color-swatch-role">Button backgrounds, slightly elevated surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #3a3a3a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Hover Gray</div>
<div class="color-swatch-hex">#3a3a3a</div>
<div class="color-swatch-role">Button hover state background</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Borders</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #a0a0a0;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Silver</div>
<div class="color-swatch-hex">#a0a0a0</div>
<div class="color-swatch-role">Secondary body text, muted content</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #414141;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Charcoal</div>
<div class="color-swatch-hex">#414141</div>
<div class="color-swatch-role">Primary border color at 80% opacity</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #343434;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Charcoal</div>
<div class="color-swatch-hex">#343434</div>
<div class="color-swatch-role">Darker border variant for subtle division</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #585858;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mid Gray</div>
<div class="color-swatch-hex">#585858</div>
<div class="color-swatch-role">Subtle gray overlay for depth effects (at 28%)</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;">Display Mega</div>
<div class="type-sample-label">Display Mega &mdash; 96px / 900 (Black) / 1.00 / normal &mdash; Inter &mdash; EXTREMELY heavy</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 72px / 700 / 1.00 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;">Feature Heading</div>
<div class="type-sample-label">Feature Heading &mdash; 36px / 600 / 1.30 / normal &mdash; Inter (Basier in production)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;">Sub-heading Bold</div>
<div class="type-sample-label">Sub-heading &mdash; 24px / 600-700 / 1.17-1.38 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 20px / 600-700 / 1.40 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56; color: var(--text-secondary);">Body large for intro paragraphs and button text. Inter provides geometric precision across the full weight spectrum from 400 to 900.</div>
<div class="type-sample-label">Body Large &mdash; 18px / 400-700 / 1.56 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50; color: var(--text-secondary);">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400-700 / 1.50 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions and links</div>
<div class="type-sample-label">Caption &mdash; 14px / 400-700 / 1.43 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--color-neon-volt);">UPPERCASE SECTION LABEL</div>
<div class="type-sample-label">Uppercase Label &mdash; 14px / 600 / 1.43 / 1.4px / uppercase &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;">SELECT count() FROM system.query_log</div>
<div class="type-sample-label">Code &mdash; 16px / 600 / 1.50 / normal &mdash; Inconsolata</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;">Small supporting text</div>
<div class="type-sample-label">Small &mdash; 12px / 500 / 1.33 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-secondary);">MICRO TAG LABEL</div>
<div class="type-sample-label">Micro &mdash; 11.2px / 500 / 1.79 / normal &mdash; Inter</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-neon">Neon Primary</button>
<div class="button-demo-label">Neon Volt CTA</div>
</div>
<div class="button-demo">
<button class="btn-dark">Dark Solid</button>
<div class="button-demo-label">Dark Solid</div>
</div>
<div class="button-demo">
<button class="btn-forest">Get Started</button>
<div class="button-demo-label">Forest Green</div>
</div>
<div class="button-demo">
<button class="btn-ghost">View Docs</button>
<div class="button-demo-label">Ghost / Outlined</div>
</div>
<div class="button-demo">
<button style="background: transparent; color: var(--color-pure-white); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;">Pill Toggle</button>
<div class="button-demo-label">Pill Toggle</div>
</div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment">-- ClickHouse query example</span><br>
<span class="keyword">SELECT</span> count() <span class="keyword">FROM</span> system.query_log<br>
<span class="keyword">WHERE</span> type = <span class="string">'QueryFinish'</span>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard">
<div class="card-label">Standard Card</div>
<h3>Charcoal Border</h3>
<p>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content on the dark canvas.</p>
</div>
<div class="card card-neon">
<div class="card-label">Neon Highlighted</div>
<h3>Neon Volt Border</h3>
<p>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against pure black with the signature acid yellow-green accent.</p>
</div>
<div class="card card-inset">
<div class="card-label">Inset / Pressed</div>
<h3>Inset Shadow</h3>
<p>Card with inset shadow creating a "pressed into the surface" effect. Unique to ClickHouse's depth system for active or contained elements.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp &mdash; buttons, badges, code</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable &mdash; cards, containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill &mdash; toggles, indicators</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Pure black background, text blocks, inline content.</div></div>
<div class="elevation-level">Level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid rgba(65,65,65,0.8). Standard cards and containers.</div></div>
<div class="elevation-level">Level 1</div>
</div>
<div class="elevation-card elevation-subtle">
<div><div class="elevation-name">Subtle</div><div class="elevation-desc">Subtle shadow (1px 3px). Barely visible on black canvas.</div></div>
<div class="elevation-level">Level 2</div>
</div>
<div class="elevation-card elevation-elevated">
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Medium shadow (10px 15px). Feature cards and hover states.</div></div>
<div class="elevation-level">Level 3</div>
</div>
<div class="elevation-card elevation-pressed">
<div><div class="elevation-name">Pressed / Inset</div><div class="elevation-desc">Inset shadow (4px 25px inset). "Sunk into the surface" &mdash; distinctive ClickHouse depth.</div></div>
<div class="elevation-level">Level 4</div>
</div>
<div class="elevation-card elevation-neon">
<div><div class="elevation-name">Neon Highlight</div><div class="elevation-desc">Neon Volt border (#faff69). Featured/selected cards, maximum emphasis.</div></div>
<div class="elevation-level">Level 5</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

786
design-md/clickhouse/preview.html Normal file
View File

@@ -0,0 +1,786 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: ClickHouse (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
/* ClickHouse brand tokens */
--color-neon-volt: #faff69;
--color-forest-green: #166534;
--color-dark-forest: #14572f;
--color-pale-yellow: #f4f692;
--color-border-olive: #4f5100;
--color-olive-dark: #161600;
--color-pure-black: #000000;
--color-near-black: #141414;
--color-charcoal: #414141;
--color-deep-charcoal: #343434;
--color-hover-gray: #3a3a3a;
--color-pure-white: #ffffff;
--color-silver: #a0a0a0;
--color-mid-gray: #585858;
--color-border-gray: #e5e7eb;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-code: 'Inconsolata', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Light mode overrides (inverted for catalog viewing) */
--bg-page: #ffffff;
--bg-card: #f8f8f8;
--bg-nav: rgba(255,255,255,0.95);
--text-primary: #000000;
--text-secondary: #414141;
--text-muted: #a0a0a0;
--border-color: #e5e7eb;
--border-subtle: #f0f0f0;
--section-label-color: #166534;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-body);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
}
.nav-brand .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--color-neon-volt);
border-radius: 4px;
font-size: 14px;
font-weight: 900;
color: var(--color-pure-black);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.4px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-forest-green); }
.nav-cta {
background: var(--color-forest-green);
color: var(--color-pure-white);
padding: 8px 16px;
border: 1px solid var(--color-forest-green);
border-radius: 4px;
font-size: 14px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(250,255,105,0.06) 0%, rgba(22,101,52,0.03) 40%, transparent 70%);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-body);
font-size: 72px;
font-weight: 900;
line-height: 1.0;
letter-spacing: normal;
margin-bottom: 24px;
position: relative;
}
.hero h1 span {
background: linear-gradient(135deg, var(--color-forest-green), var(--color-neon-volt));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
color: var(--text-secondary);
font-size: 18px;
line-height: 1.56;
margin-bottom: 40px;
position: relative;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
/* BUTTONS */
.btn-neon {
background: var(--color-neon-volt);
color: #151515;
padding: 12px 16px;
border: 1px solid var(--color-neon-volt);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-dark {
background: var(--color-near-black);
color: var(--color-pure-white);
padding: 12px 16px;
border: 1px solid var(--color-near-black);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-forest {
background: var(--color-forest-green);
color: var(--color-pure-white);
padding: 12px 16px;
border: 1px solid var(--color-near-black);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
.btn-ghost {
background: transparent;
color: var(--text-primary);
padding: 12px 32px;
border: 1px solid var(--color-border-gray);
border-radius: 4px;
font-size: 16px;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
.section-title {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-body);
font-size: 36px;
font-weight: 700;
line-height: 1.11;
letter-spacing: normal;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.color-swatch-hex { font-family: var(--font-code); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-code);
font-size: 12px;
color: var(--text-muted);
}
/* BUTTON DEMOS */
.button-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.button-demo { text-align: center; }
.button-demo-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 0.55px;
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-standard { border: 1px solid var(--border-color); }
.card-neon { border: 2px solid var(--color-neon-volt); }
.card-inset {
border: 1px solid var(--border-color);
box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset;
}
.card h3 { font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17; margin-bottom: 12px; }
.card p { color: var(--text-secondary); font-size: 15px; line-height: 1.63; }
.card-label {
font-family: var(--font-code);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.55px;
color: var(--color-forest-green);
margin-bottom: 16px;
}
/* CODE BLOCK */
.code-block {
background: var(--color-near-black);
border: 1px solid rgba(65,65,65,0.8);
border-radius: 4px;
padding: 20px 24px;
margin-top: 24px;
font-family: var(--font-code);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--color-pure-white);
overflow-x: auto;
}
.code-block .keyword { color: var(--color-neon-volt); }
.code-block .string { color: var(--color-forest-green); }
.code-block .comment { color: var(--color-silver); }
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(250,255,105,0.15);
border: 1px solid rgba(250,255,105,0.4);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--border-color); }
.elevation-subtle { border: 1px solid var(--border-color); box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); }
.elevation-elevated { border: 1px solid var(--border-color); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
.elevation-pressed { border: 1px solid var(--border-color); box-shadow: 0px 4px 4px rgba(0,0,0,0.06), 0px 4px 25px rgba(0,0,0,0.14) inset; }
.elevation-neon { border: 2px solid var(--color-neon-volt); }
.elevation-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.elevation-level {
font-family: var(--font-code);
font-size: 11px;
color: var(--color-forest-green);
text-transform: uppercase;
letter-spacing: 0.55px;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 48px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
.button-row { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand"><span class="icon">CH</span> ClickHouse</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#buttons">Buttons</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Get Started</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br><span>ClickHouse</span></h1>
<p>Auto-generated design token catalog from DESIGN.md &mdash; Light mode (inverted)</p>
<div class="hero-buttons">
<button class="btn-neon">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary &mdash; Neon Volt Family</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #faff69;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Neon Volt</div>
<div class="color-swatch-hex">#faff69</div>
<div class="color-swatch-role">Signature brand accent, CTAs, accent borders, link hovers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #f4f692;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pale Yellow</div>
<div class="color-swatch-hex">#f4f692</div>
<div class="color-swatch-role">Active/pressed state text color</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #4f5100;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Olive</div>
<div class="color-swatch-hex">#4f5100</div>
<div class="color-swatch-role">Ghost button borders, muted neon sibling</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #161600; border-bottom: 1px solid #414141;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Olive Dark</div>
<div class="color-swatch-hex">#161600</div>
<div class="color-swatch-role">Darkest neon-tinted color for subtle brand text</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">CTA Greens</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #166534;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Forest Green</div>
<div class="color-swatch-hex">#166534</div>
<div class="color-swatch-role">Secondary CTA buttons, Get Started actions</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #14572f;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Forest</div>
<div class="color-swatch-hex">#14572f</div>
<div class="color-swatch-role">Darker green for borders and secondary accents</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #414141;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary page background, maximum contrast canvas</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #141414; border-bottom: 1px solid #414141;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near Black</div>
<div class="color-swatch-hex">#141414</div>
<div class="color-swatch-role">Button backgrounds, slightly elevated surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #3a3a3a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Hover Gray</div>
<div class="color-swatch-hex">#3a3a3a</div>
<div class="color-swatch-role">Button hover state background</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Neutrals & Borders</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #e5e7eb;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #a0a0a0;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Silver</div>
<div class="color-swatch-hex">#a0a0a0</div>
<div class="color-swatch-role">Secondary body text, muted content</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #414141;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Charcoal</div>
<div class="color-swatch-hex">#414141</div>
<div class="color-swatch-role">Primary border color at 80% opacity</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #343434;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Charcoal</div>
<div class="color-swatch-hex">#343434</div>
<div class="color-swatch-role">Darker border variant for subtle division</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #e5e7eb; border-bottom: 1px solid #ccc;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Gray</div>
<div class="color-swatch-hex">#e5e7eb</div>
<div class="color-swatch-role">Light border variant for light contexts</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 96px; font-weight: 900; line-height: 1.0;">Display Mega</div>
<div class="type-sample-label">Display Mega &mdash; 96px / 900 (Black) / 1.00 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 72px; font-weight: 700; line-height: 1.0;">Display Hero</div>
<div class="type-sample-label">Display / Hero &mdash; 72px / 700 / 1.00 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 36px; font-weight: 600; line-height: 1.30;">Feature Heading</div>
<div class="type-sample-label">Feature Heading &mdash; 36px / 600 / 1.30 / normal &mdash; Inter (Basier in production)</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.17;">Sub-heading Bold</div>
<div class="type-sample-label">Sub-heading &mdash; 24px / 600-700 / 1.17-1.38 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.40;">Feature Title</div>
<div class="type-sample-label">Feature Title &mdash; 20px / 600-700 / 1.40 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.56;">Body large for intro paragraphs and button text. Inter provides geometric precision across the entire weight spectrum from 400 to 900.</div>
<div class="type-sample-label">Body Large &mdash; 18px / 400-700 / 1.56 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.50;">Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.</div>
<div class="type-sample-label">Body / Button &mdash; 16px / 400-700 / 1.50 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--text-secondary);">Caption and metadata text for descriptions and links</div>
<div class="type-sample-label">Caption &mdash; 14px / 400-700 / 1.43 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.43; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-muted);">UPPERCASE SECTION LABEL</div>
<div class="type-sample-label">Uppercase Label &mdash; 14px / 600 / 1.43 / 1.4px / uppercase &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-code); font-size: 16px; font-weight: 600; line-height: 1.50;">SELECT count() FROM system.query_log</div>
<div class="type-sample-label">Code &mdash; 16px / 600 / 1.50 / normal &mdash; Inconsolata</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.33;">Small supporting text</div>
<div class="type-sample-label">Small &mdash; 12px / 500 / 1.33 / normal &mdash; Inter</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-family: var(--font-body); font-size: 11.2px; font-weight: 500; line-height: 1.79; color: var(--text-muted);">MICRO TAG LABEL</div>
<div class="type-sample-label">Micro &mdash; 11.2px / 500 / 1.79 / normal &mdash; Inter</div>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="section" id="buttons">
<div class="section-title">03 / Button Variants</div>
<h2 class="section-heading">Buttons</h2>
<div class="button-row">
<div class="button-demo">
<button class="btn-neon">Neon Primary</button>
<div class="button-demo-label">Neon Volt CTA</div>
</div>
<div class="button-demo">
<button class="btn-dark">Dark Solid</button>
<div class="button-demo-label">Dark Solid</div>
</div>
<div class="button-demo">
<button class="btn-forest">Get Started</button>
<div class="button-demo-label">Forest Green</div>
</div>
<div class="button-demo">
<button class="btn-ghost">View Docs</button>
<div class="button-demo-label">Ghost / Outlined</div>
</div>
<div class="button-demo">
<button style="background: transparent; color: var(--text-primary); padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 9999px; font-size: 14px; font-family: var(--font-body); font-weight: 500; cursor: pointer;">Pill Toggle</button>
<div class="button-demo-label">Pill Toggle</div>
</div>
</div>
<div class="code-block" style="margin-top: 40px;">
<span class="comment">-- ClickHouse query example</span><br>
<span class="keyword">SELECT</span> count() <span class="keyword">FROM</span> system.query_log<br>
<span class="keyword">WHERE</span> type = <span class="string">'QueryFinish'</span>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">04 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-standard">
<div class="card-label">Standard Card</div>
<h3>Charcoal Border</h3>
<p>Standard content card with 1px solid charcoal border at 80% opacity and 8px radius. The default container for features, stats, and content sections.</p>
</div>
<div class="card card-neon">
<div class="card-label" style="color: #9a9d00;">Neon Highlighted</div>
<h3>Neon Volt Border</h3>
<p>Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against the dark canvas with the signature yellow-green accent.</p>
</div>
<div class="card card-inset">
<div class="card-label">Inset / Pressed</div>
<h3>Inset Shadow</h3>
<p>Card with inset shadow creating a "pressed into the surface" effect. Unique to ClickHouse's depth system for active or contained elements.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">05 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-secondary); margin-bottom: 32px;">Base unit: 8px. Scale from 2px to 64px with additional intermediate values.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 8px; height: 8px;"></div><div class="spacing-label">2px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 18px; height: 18px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 40px; height: 40px;"></div><div class="spacing-label">10px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">40px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 256px; height: 256px;"></div><div class="spacing-label">64px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">06 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp &mdash; buttons, badges, code</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable &mdash; cards, containers</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 9999px;"></div><div class="radius-label">9999px</div><div class="radius-context">Pill &mdash; toggles, indicators</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">07 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow. Black background, text blocks, inline content.</div></div>
<div class="elevation-level">Level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid charcoal at 80% opacity. Standard cards and containers.</div></div>
<div class="elevation-level">Level 1</div>
</div>
<div class="elevation-card elevation-subtle">
<div><div class="elevation-name">Subtle</div><div class="elevation-desc">Subtle shadow (1px 3px). Soft card lift on the dark canvas.</div></div>
<div class="elevation-level">Level 2</div>
</div>
<div class="elevation-card elevation-elevated">
<div><div class="elevation-name">Elevated</div><div class="elevation-desc">Medium shadow (10px 15px). Feature cards and hover states.</div></div>
<div class="elevation-level">Level 3</div>
</div>
<div class="elevation-card elevation-pressed">
<div><div class="elevation-name">Pressed / Inset</div><div class="elevation-desc">Inset shadow (4px 25px inset). "Sunk into the surface" effect, unique to ClickHouse.</div></div>
<div class="elevation-level">Level 4</div>
</div>
<div class="elevation-card elevation-neon">
<div><div class="elevation-name">Neon Highlight</div><div class="elevation-desc">Neon Volt border (#faff69). Featured/selected cards, maximum emphasis.</div></div>
<div class="elevation-level">Level 5</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>