Clickhouse

clickhouse.com

The 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.

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