Color Palette
Border Colors
Mid Gray 3
rgba(161,161,161,0.1)
Fill & Gradient Colors
Yellow Tint
rgba(251,255,70,0.08)
Typography
Base Font · Inter
Inter
The quick brown fox jumps over the lazy dog — fast analytical queries at petabyte scale
Light · 300
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Mono Font · JetBrains Mono (ui-monospace)
JetBrains Mono
SELECT * FROM events WHERE timestamp > now() - INTERVAL 1 DAY
Regular · 400
Medium · 500
The Fastest OLAP Database
Display · 56px · Bold · line-height: 70px
Real-time analytics at any scale
Heading XL · 36px · Semibold · line-height: 46.8px
Query billions of rows in milliseconds
Heading Large · 20px · Semibold · line-height: 40px
ClickHouse is a column-oriented database management system for online analytical processing.
Body Large · 18px · Regular · line-height: 30px
Start running analytical queries on your data immediately with powerful SQL support and high-performance ingestion.
Body Default · 16px · Regular · line-height: 24px
Last query executed in 0.042s · 2.4B rows scanned · 98 GB processed
Body Small · 14px · Regular · line-height: 20px
ANALYTICS · OLAP · COLUMNAR · SQL
Caption / Label · 12px · Medium · uppercase
Letter Spacing
No letter-spacing tokens defined
No Data
The ClickHouse design system does not define explicit letter-spacing tokens. Use browser defaults or contextual overrides.
Spacing
Spacing Scale
43 tokens — 1px → 499.4px
Shadows / Elevation
Shadow Tokens
4 tokens
Small
×5
rgba(0,0,0,.1) 1px 3px · inputs, inline elements
Medium
×3
rgba(0,0,0,.06) 4px + inset shadow · panels, cards
Large
×1
rgba(0,0,0,.1) 10px 15px · modals, drawers
X-Large
×1
rgb(250,255,105) 100px glow · brand hero highlight
Z-Index
| Layer | Value | Usage |
|---|
| Background | -50 | Decorative background elements, canvas underlays |
| Base | 5 | Base content stacking layer |
| Navigation | 10 | Sticky headers, nav bars |
| Popover | 20 | Dropdowns, tooltips, popovers |
| Overlay | 50 | Modal overlays, side panels, drawers |
| Max | 2147483647 | Absolute top layer — never obscured |
Breakpoints
📱
--breakpoint-xs
640px
Mobile / extra small
📲
--breakpoint-sm
704px
Small tablet
💻
--breakpoint-md
768px
Tablet / medium
🖥
--breakpoint-lg
896px
Large tablet
🖥️
--breakpoint-xl
1024px
Desktop
🖥️
--breakpoint-2xl
1152px
Large desktop
📺
--breakpoint-3xl
1280px
XL desktop
📺
--breakpoint-bp-8
1408px
2K breakpoint
🖼
--breakpoint-bp-9
1536px
Wide screen
🌐
--breakpoint-bp-10
2200px
Ultra-wide / 4K
Opacity
Opacity Tokens
1 token — 0.5
No more tokens
—
Not defined
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| White 2 (#F9F9F9) | Dark Gray (#151515) | 17.34:1 | AAA |
| White 2 (#F9F9F9) | Dark Gray 3 (#1F1F1C) | 15.69:1 | AAA |
| White 2 (#F9F9F9) | White (#FFFFFF) | 1.05:1 | Fail |
| White 2 (#F9F9F9) | Mid Gray (#A0A0A0) | 2.48:1 | Fail |
| White 2 (#F9F9F9) | Light Yellow 2 (#FAFF69) | 1.02:1 | Fail |
| Light Gray 2 (#DFDFDF) | Dark Gray (#151515) | 13.7:1 | AAA |
| Light Gray 2 (#DFDFDF) | Dark Gray 3 (#1F1F1C) | 12.4:1 | AAA |
| Light Gray 2 (#DFDFDF) | White (#FFFFFF) | 1.33:1 | Fail |
| Light Yellow (#FCFF74) | Dark Gray (#151515) | 17.13:1 | AAA |
| Light Yellow (#FCFF74) | Dark Gray 3 (#1F1F1C) | 15.5:1 | AAA |
| Light Yellow (#FCFF74) | White (#FFFFFF) | 1.07:1 | Fail |
| Mid Gray 2 (#808080) | Dark Gray (#151515) | 4.62:1 | AA |
| Mid Gray 2 (#808080) | White (#FFFFFF) | 3.95:1 | AA Large |
| Mid Gray 2 (#808080) | Light Yellow 2 (#FAFF69) | 3.68:1 | AA Large |
| Light Gray 3 (#B3B6BD) | Dark Gray (#151515) | 8.99:1 | AAA |
| Light Gray 3 (#B3B6BD) | Dark Gray 3 (#1F1F1C) | 8.14:1 | AAA |
| Light Gray 3 (#B3B6BD) | White (#FFFFFF) | 2.03:1 | Fail |
CSS Variables Reference
White--color-white#FFFFFF
Mid Gray--color-mid-gray#A0A0A0
Dark Gray--color-dark-gray#151515
Light Yellow 2--color-light-yellow-2#FAFF69
Dark Gray 3--color-dark-gray-3#1F1F1C
Dark Gray 5--color-dark-gray-5#282828
Dark Gray 6--color-dark-gray-6#1D1D1D
Dark Gray 7--color-dark-gray-7#131312
Dark Gray 8--color-dark-gray-8#292924
Dark Gray 9--color-dark-gray-9#0F0F0F
Dark Gray 10--color-dark-gray-10#373439
Dark Gray 11--color-dark-gray-11#212121
Red 2--color-red-2#FF4B59
Green 2--color-green-2#00CA48
White 2--color-white-2#F9F9F9
Light Gray 2--color-light-gray-2#DFDFDF
Light Yellow--color-light-yellow#FCFF74
Mid Gray 2--color-mid-gray-2#808080
Light Gray 3--color-light-gray-3#B3B6BD
Black 2--color-black-2#161600
Light Gray (Border)--color-light-gray#E5E7EB
Dark Gray 2--color-dark-gray-2#414141
Light Yellow 3--color-light-yellow-3#FEF08A
Dark Yellow--color-dark-yellow#4F5100
Yellow 2--color-yellow-2#FBFF46
Base Font--font-family-baseInter
Mono Font--font-family-4ui-monospace
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs11.2px
XS--font-size-xs12px
SM--font-size-sm14px
Base--font-size-base16px
LG--font-size-lg18px
XL--font-size-xl20px
2XL--font-size-2xl36px
3XL--font-size-3xl56px
No letter-spacing tokens defined—N/A
Space 32--space-32182.5px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base4px
Small (bottom)--radius-sm0 0 8 8px
Pill / Full--radius-full9999px
Instant (hover/transition)--duration-instant0.15s
Fast (loading animations)--duration-fast1s
No easing tokens defined—N/A
Background--z-1-50
Base--z-25
Navigation--z-310
Popover--z-420
Overlay--z-550
Max Layer--z-62147483647
XS--breakpoint-xs640px
SM--breakpoint-sm704px
MD--breakpoint-md768px
LG--breakpoint-lg896px
XL--breakpoint-xl1024px
2XL--breakpoint-2xl1152px
3XL--breakpoint-3xl1280px
BP-8--breakpoint-bp-81408px
BP-9--breakpoint-bp-91536px
BP-10--breakpoint-bp-102200px
Design System Preview · ClickHouse Cloud (Dark) · Generated 15/04/2026 · 38 color tokens · 8 font-size · 4 font-family · 5 font-weight · 12 line-height · 0 letter-spacing · 43 spacing · 6 radius · 3 border-width · 4 shadow · 2 duration · 0 easing · 6 z-index · 10 breakpoints · 1 opacity