ClickHouse. A lone lime cursor glowing on black glass.
- Developer tools
- Dark theme
- 16 colors
- 3 typefaces
ClickHouse reads as a phosphor terminal at midnight — a near-black canvas where one electric lime accent behaves like a blinking cursor, marking every action and highlight. The system is sparse, technical, and confident: white headlines sit in vast negative space, supported by a near-monochrome scale of dark grays that differentiate page, card, and elevated surfaces through hue alone. Components are flat and fast — hairline borders, soft 8px radii, almost no shadow. The lime (#faff69) is the only chromatic voice; it appears on the primary CTA, the 'ClickHouse' wordmark highlight, and as a small functional punctuation across icons, tags, and section markers. Typography stays in the Inter / Basier family with a single Inconsolata excursion for code, reinforcing a developer-tool register. Everything else is restrained: a quiet grid, generous breathing room, and a single visual idea — the database made visible in a flash of light.
ClickHouse design system
Brand2
Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Deep olive tone for muted accent backgrounds, subtle on-dark decorative tints, and low-prominence lime-tinted text variants
Accent2
Muted lime used for subtle accent borders, tag backgrounds, and supporting highlight washes where full Electric Lime would be too loud
Box-shadow glow on accent elements and secondary highlight states — reinforces the phosphor-light identity without adding a new hue
Neutrals12
Inline link default, deepest accent contrast, and utility text
Page canvas and primary background — the near-black ground on which the entire system sits
Card surfaces and list-item backgrounds — one step above the page, holding feature cards and content blocks
Elevated surfaces, hover states, and secondary panel backgrounds — sits above cards for nested UI layers
Deepest elevated surface, dropdown menus, and modal backgrounds
Hairline borders and card edges — defines the boundary between surface levels without adding visual weight
Stronger borders, input field outlines, and nav dividers — one step heavier than Iron for structural separation
Muted secondary text, icon strokes, and inactive nav items — supports body copy hierarchy without competing with white
Subtle disabled or tertiary text, placeholder values, and low-priority labels
Secondary body text and descriptions — sits between Smoke and White for paragraph-level hierarchy
Primary body text and high-prominence neutral fills — the dominant light neutral across all surface contexts
Headlines, icon fills, and maximum-contrast text — reserved for the highest hierarchy elements
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure White on Olive Ink
18.28 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
