Clickhouse
clickhouse.comThe reference for a near-black developer-tool homepage where one electric lime (#faff69) is the sole chromatic voice, carried only by the primary CTA and accents against an otherwise white-on-black monochrome.
Data Infrastructure flagship
Design tokens
background
surface
text
textMuted
accent
border
tone1
tone2
- display
- Basier
- body
- Inter
- mono
Do / Don't
Reference it for
- Single-accent discipline: electric lime #faff69 reserved exclusively for the primary CTA fill and tiny functional punctuation (eyebrow label, carousel arrows), everything else white or grey
- Near-black canvas built from a hue-shifted dark scale (#151515 page, #1f1f1c surfaces) so panels separate by tone alone, no shadows needed
- Oversized white display headline (around 72 to 96px, weight 700 to 900, two-line break) anchored centre with vast negative space above and below
- Two-CTA row: solid lime button with dark text beside a ghost button (transparent fill, hairline border) for the secondary action
- Subdued single-line subhead in muted grey (#a0a0a0) directly under the headline, kept to one declarative sentence
- Inset announcement panel: low-contrast carbon card with a small logo lozenge plus three lines of grey body, sitting between hero and proof
- Logo wall as social proof: small grey wordmarks on two rows with a lime kicker label (CLICKHOUSE IS TRUSTED BY) and lime nav arrows for the carousel
- Flat, fast component register: 8px radii on buttons and cards, 4px on tags and inputs, hairline borders, almost no elevation
Do not copy
- The ClickHouse three-bar wordmark and brand mark
- The exact electric lime #faff69 paired with olive ink #161600 / #4f5100 borders (this combination is ClickHouse's signature)
- The literal customer logo set (Meta, eBay, Microsoft, Spotify, Anthropic, etc.)
- The Langfuse acquisition announcement panel and its copy
- The 'leading database for AI' positioning line
- The 47.1k GitHub star count