name: clickhouse-design
version: alpha
description: >
  A high-contrast developer canvas: an near-black charcoal page (#1f1f1c) with
  white text, punctuated by one electric brand voltage — ClickHouse Yellow
  (#faff69). Headlines are set in Inter at its heaviest weight (900) for a
  blunt, technical authority, with Basier as a softer secondary. The signature
  move is the full-bleed YELLOW inversion: entire sections and feature tiles
  flip to a saturated yellow fill with black ink. Geometry is tight and
  technical (4px buttons, 8px cards) and accents glow (yellow box-shadow halos).
colors:
  # Brand
  primary: '#faff69'          # ClickHouse Yellow — CTA fill + inverted sections
  on-primary: '#151515'       # near-black ink on yellow
  accent-link: '#f4f692'      # softer yellow for inline links
  # Surface (dark)
  surface: '#1f1f1c'          # page background (warm near-black)
  surface-raised: '#2b2b2b'   # "Why ClickHouse?" raised panel (approx)
  surface-card: 'rgba(20,20,20,0.5)'  # glassy feature cards
  # Text
  on-surface: '#ffffff'
  on-surface-secondary: 'rgba(255,255,255,0.7)'  # body copy / sub-heads
  on-surface-muted: '#9b9b9b'
  # Hairlines / borders
  hairline: 'rgba(65,65,65,0.8)'   # card borders on dark
  # Inverse (yellow sections)
  surface-inverse: '#faff69'
  on-inverse: '#151515'
  surface-inverse-card: '#1f1f1c'  # dark cards sitting inside yellow sections
  # Semantic (sparse)
  success: '#57b869'
  info: '#007aff'
typography:
  font-display: '"Inter", sans-serif'   # headings — used at weight 900
  font-secondary: '"basier", "basier Fallback", Arial, Helvetica, sans-serif'  # softer subheads. OSS sub: "Basier Circle" / Inter
  font-system: 'ui-sans-serif, system-ui, sans-serif'  # nav links/labels
  h1:
    fontFamily: '{typography.font-display}'
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1            # 72px
  h2:
    fontFamily: '{typography.font-secondary}'
    fontSize: 36px
    fontWeight: 600
    lineHeight: 46.8px
  h3:
    fontFamily: '{typography.font-display}'
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  body:
    fontFamily: '{typography.font-display}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  eyebrow:                    # "USE CASES", "CLICKHOUSE IS TRUSTED BY"
    fontFamily: '{typography.font-display}'
    fontSize: 13px
    fontWeight: 600
    letterSpacing: 0.08em
    textTransform: uppercase
    color: '{colors.primary}'
rounded:
  sm: 4px                     # buttons
  md: 8px                     # cards
  pill: 9999px                # filter tags
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px]
components:
  button-primary:             # "Try for free", "Start free cloud trial"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body}'
    fontWeight: 500
    rounded: '{rounded.sm}'
    padding: '0 16px'
    borderColor: '{colors.primary}'
  button-outline:             # "Contact sales", "View all use cases"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.primary}'   # thin yellow hairline border
    rounded: '{rounded.sm}'
  button-on-yellow:           # "Get started" inside yellow sections
    backgroundColor: '#ffffff'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.sm}'
  card-feature:               # "Real-time analytics" etc.
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.md}'
    iconColor: '{colors.primary}'   # yellow outline icon in a bordered square
  card-yellow-tile:           # "Open Source / Secure / Resource optimized" tiles
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.md}'
  filter-tag:
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.pill}'
  link-cta:
    textColor: '{colors.primary}'   # "Explore real-time analytics →"
    fontWeight: 600
motion:
  # Restrained; the standout effect is a soft yellow glow (box-shadow halo)
  # behind framed media on dark, and the hard yellow/dark section inversions.
icons:
  style: outline
  stroke: ~1.75px
  sizes: { sm: 16px, md: 24px, lg: 48px }
  color-rules: 'Monoline. On dark, icons are ClickHouse Yellow inside a yellow-bordered rounded square; on yellow tiles they invert to black. Arrow "→" trails links.'

ClickHouse

clickhouse-design — version alpha

Surfaces studied via Playwright (clickhouse.com home): computed styles + screenshots. ClickHouse's marketing site is Tailwind-built and exposes few semantic :root brand tokens, so the palette and type here are read from computed values on representative elements (hero, buttons, cards, yellow tiles) and the screenshots — high-confidence for the values shown, lighter on a formal token map.

Overview

ClickHouse's canvas is a high-contrast developer aesthetic: a warm near-black {colors.surface} (#1f1f1c) carrying white text, with exactly one electric voltage — ClickHouse Yellow {colors.primary} (#faff69). Headlines are Inter at weight 900 ("The leading database for AI"), blunt and technical; a softer Basier handles some section heads. The signature move is the full-bleed yellow inversion: whole sections ("Deploy your way") and feature tiles ("Open Source", "Secure, compliant") flip to a saturated yellow fill with black ink, creating a punchy rhythm against the dark. Geometry is tight and technical — 4px buttons, 8px cards — and the one atmospheric flourish is a soft yellow glow (box-shadow halo) behind framed product media on dark. Eyebrows are tiny uppercase yellow kickers ("USE CASES").

Colors

• ClickHouse Yellow — {colors.primary} #faff69. The whole brand rests on this one acid yellow. It is the primary CTA fill (black text), the eyebrow/label color, the link color (slightly softened to {colors.accent-link} #f4f692 inline), the icon color, and the fill for inverted sections and tiles. Discipline: yellow is the single accent — there is no competing brand hue.
• Ink on dark. White {colors.on-surface} for headings; {colors.on-surface-secondary} (white at 70%) for body and sub-heads.
• Surfaces. Page {colors.surface} #1f1f1c; a slightly raised charcoal panel for "Why ClickHouse?"; glassy feature cards at {colors.surface-card} (black at 50%) with a {colors.hairline} (grey at 80%) border.
• Inverse (yellow) sections. {colors.surface-inverse} #faff69 with {colors.on-inverse} #151515 ink; dark cards ({colors.surface-inverse-card}) sit inside them for "ClickHouse / ClickHouse Local" download blocks.
• Semantic colors are sparse (a green ~#57b869, an info blue ~#007aff) and rarely surface on marketing.

Typography

• Inter — display & UI. The defining choice is weight 900 at hero scale (72px, line-height 1.0). Closest open-source substitute: Inter itself (it is open source).
• Basier (basier) — a softer grotesque used for some 36px section heads at weight 600. OSS sub: Basier Circle or fall back to Inter.

Token	Family	Size	Weight	Line-height	Usage
h1	Inter	72px	900	1.0	Hero ("The leading database for AI")
h2	Basier	36px	600	46.8px	Section heads ("Built for every modern data challenge")
h3	Inter	16px	700	24px	Card titles
body	Inter	14px	400	20px	Body copy
eyebrow	Inter	13px	600	—	UPPERCASE yellow kickers, ~0.08em tracking

Layout

Base unit 8px. The page is a vertical stack of full-width bands that alternate dark and yellow. Feature rows use a 4-up card grid ("Real-time analytics / Observability / Data warehousing / ML & GenAI") and 5-up tile grids (yellow benefit tiles). Other primitives: a two-column "text + framed media" split (the media wears a yellow glow), a stat row (2.9k+ / 76.5k+ / 47.8k+) and a filter-chip column beside a testimonial carousel. Generous vertical spacing; content is centered.

Elevation & Depth

Largely flat color-blocking. The one depth signature is a diffuse yellow glow (a large soft yellow box-shadow) behind framed product screenshots on the dark canvas. Cards use thin borders + a faint inner shadow rather than drop shadows. The dark/yellow band inversions provide most of the visual depth.

Shapes

Tight and technical: {rounded.sm} 4px for buttons, {rounded.md} 8px for cards and yellow tiles, {rounded.pill} for filter chips. The small radii reinforce the precise, engineered, database feel — friendly enough but never soft.

Components

• Primary button {components.button-primary} — solid yellow, black label, 4px radius ("Try for free", "Start free cloud trial").
• Outline button {components.button-outline} — transparent with a thin yellow hairline border, white label ("Contact sales", "View all use cases").
• Feature card {components.card-feature} — translucent dark fill, grey border, 8px radius, a yellow outline icon inside a yellow-bordered square, title + body + yellow "Explore … →" link.
• Yellow benefit tile {components.card-yellow-tile} — solid yellow fill, black icon + label + "More →".
• Filter tag {components.filter-tag} — pill outline chip ("Observability", "Gaming").
• Link CTA {components.link-cta} — yellow text with trailing "→".

Motion

Restrained and functional. The notable effects are the yellow glow reveal behind media and the hard section inversions as you scroll dark→yellow→dark. No springs or parallax; FAQ rows expand with a simple "+" toggle.

Iconography

Thin outline monoline icons drawn in ClickHouse Yellow, typically framed inside a yellow-bordered rounded square on dark; on yellow tiles they invert to black. Domain glyphs (bar chart, waveform, database cylinder, SQL file, chip, puzzle). Stroke ~1.75px; trailing "→" on links.

Do's and Don'ts

• Do keep the canvas dark {colors.surface} and reserve white for text.
• Do treat ClickHouse Yellow as the single voltage — CTA, links, eyebrows, icons, and full-section inversions.
• Do set hero headlines in Inter 900.
• Do invert entire sections/tiles to yellow-with-black for rhythm.
• Do use the soft yellow glow behind framed product media.
• Don't introduce a second accent hue; semantic colors stay in their alert contexts.
• Don't over-round — keep 4px buttons / 8px cards.
• Don't put yellow text on the dark canvas at small sizes for long copy (use white/70%).
• Don't add heavy drop shadows; depth is glow + banding.

Known Gaps

• The site is utility-CSS (Tailwind) with almost no semantic brand :root vars, so the raised-panel charcoal (#2b2b2b) and muted greys are nearest-hex approximations from rendering.
• Exact Basier weights/styles and the canonical spacing scale are inferred, not from a published token set.