# Design System
Inspired by ClickHouse

Auto-generated design token catalog from DESIGN.md — Dark mode (native)

1000x
Faster than traditional databases
100+
Data formats supported
0.1s
Average query response

01 / Color Palette

## Color Palette & Roles

### Primary — Neon Volt Family

Neon Volt
#faff69
Signature brand accent, CTAs, accent borders, link hovers
Pale Yellow
#f4f692
Active/pressed state text color
Border Olive
#4f5100
Ghost button borders, muted neon sibling
Olive Dark
#161600
Darkest neon-tinted color for subtle brand text

### CTA Greens

Forest Green
#166534
Secondary CTA buttons, Get Started actions
Dark Forest
#14572f
Darker green for borders and secondary accents

### Surface & Background

Pure Black
#000000
Primary page background, maximum contrast canvas
Near Black
#141414
Button backgrounds, slightly elevated surfaces
Hover Gray
#3a3a3a
Button hover state background

### Neutrals & Borders

Pure White
#ffffff
Primary text on dark surfaces
Silver
#a0a0a0
Secondary body text, muted content
Charcoal
#414141
Primary border color at 80% opacity
Deep Charcoal
#343434
Darker border variant for subtle division
Mid Gray
#585858
Subtle gray overlay for depth effects (at 28%)

02 / Typography Scale

## Typography Rules

Display Mega
Display Mega — 96px / 900 (Black) / 1.00 / normal — Inter — EXTREMELY heavy
Display Hero
Display / Hero — 72px / 700 / 1.00 / normal — Inter
Feature Heading
Feature Heading — 36px / 600 / 1.30 / normal — Inter (Basier in production)
Sub-heading Bold
Sub-heading — 24px / 600-700 / 1.17-1.38 / normal — Inter
Feature Title
Feature Title — 20px / 600-700 / 1.40 / normal — Inter
Body large for intro paragraphs and button text. Inter provides geometric precision across the full weight spectrum from 400 to 900.
Body Large — 18px / 400-700 / 1.56 / normal — Inter
Standard body text for paragraphs, navigation links, and button labels. Weight 400 for reading, 600-700 for UI elements.
Body / Button — 16px / 400-700 / 1.50 / normal — Inter
Caption and metadata text for descriptions and links
Caption — 14px / 400-700 / 1.43 / normal — Inter
UPPERCASE SECTION LABEL
Uppercase Label — 14px / 600 / 1.43 / 1.4px / uppercase — Inter
SELECT count() FROM system.query_log
Code — 16px / 600 / 1.50 / normal — Inconsolata
Small supporting text
Small — 12px / 500 / 1.33 / normal — Inter
MICRO TAG LABEL
Micro — 11.2px / 500 / 1.79 / normal — Inter

03 / Button Variants

## Buttons

Neon Volt CTA
Dark Solid
Forest Green
Ghost / Outlined
Pill Toggle
-- ClickHouse query example
SELECT count() FROM system.query_log
WHERE type = 'QueryFinish'

04 / Card Examples

## Cards & Containers

Standard Card

### Charcoal Border

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.

Neon Highlighted

### Neon Volt Border

Featured or selected card with 2px solid Neon Volt border. Creates maximum emphasis against pure black with the signature acid yellow-green accent.

Inset / Pressed

### Inset Shadow

Card with inset shadow creating a "pressed into the surface" effect. Unique to ClickHouse's depth system for active or contained elements.

05 / Spacing Scale

## Spacing System

Base unit: 8px. Scale from 2px to 64px with additional intermediate values.

2px
6px
8px
10px
12px
16px
20px
24px
32px
40px
48px
64px

06 / Border Radius Scale

## Border Radius

4px
Sharp — buttons, badges, code
8px
Comfortable — cards, containers
9999px
Pill — toggles, indicators

07 / Elevation & Depth

## Depth & Elevation

Flat
No shadow. Pure black background, text blocks, inline content.
Level 0
Bordered
1px solid rgba(65,65,65,0.8). Standard cards and containers.
Level 1
Subtle
Subtle shadow (1px 3px). Barely visible on black canvas.
Level 2
Elevated
Medium shadow (10px 15px). Feature cards and hover states.
Level 3
Pressed / Inset
Inset shadow (4px 25px inset). "Sunk into the surface" — distinctive ClickHouse depth.
Level 4
Neon Highlight
Neon Volt border (#faff69). Featured/selected cards, maximum emphasis.
Level 5