Electric Lime
#faff69Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
ClickHouse
clickhouse.comWebsite preview
The design language
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.
Color palette
brand
Olive Ink
#161600Deep olive tone for muted accent backgrounds, subtle on-dark decorative tints, and low-prominence lime-tinted text variants
accent
Dark Olive
#4f5100Muted lime used for subtle accent borders, tag backgrounds, and supporting highlight washes where full Electric Lime would be too loud
Lime Glow
#fbff46Box-shadow glow on accent elements and secondary highlight states — reinforces the phosphor-light identity without adding a new hue
neutral
Void Black
#151515Page canvas and primary background — the near-black ground on which the entire system sits
Carbon
#1f1f1cCard surfaces and list-item backgrounds — one step above the page, holding feature cards and content blocks
Graphite
#282828Elevated surfaces, hover states, and secondary panel backgrounds — sits above cards for nested UI layers
Slate Dark
#343434Deepest elevated surface, dropdown menus, and modal backgrounds
Iron
#3a3a3aHairline borders and card edges — defines the boundary between surface levels without adding visual weight
Steel
#414141Stronger borders, input field outlines, and nav dividers — one step heavier than Iron for structural separation
Smoke
#a0a0a0Muted secondary text, icon strokes, and inactive nav items — supports body copy hierarchy without competing with white
Fog
#bcbcbbSubtle disabled or tertiary text, placeholder values, and low-priority labels
Bone
#dfdfdfSecondary body text and descriptions — sits between Smoke and White for paragraph-level hierarchy
Paper
#e5e7ebPrimary body text and high-prominence neutral fills — the dominant light neutral across all surface contexts
Pure White
#ffffffHeadlines, icon fills, and maximum-contrast text — reserved for the highest hierarchy elements
True Black
#000000Inline link default, deepest accent contrast, and utility text
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
96px · 900 · 1The quick brown fox jumps
heading-xl
72px · 700 · 1The quick brown fox jumps
heading-lg
36px · 600 · 1.3The quick brown fox jumps
heading
24px · 400 · 1.33The quick brown fox jumps
heading-sm
20px · 600 · 1.4The quick brown fox jumps
subheading
18px · 400 · 1.5The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 500 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700, 900
- Sizes
- 12px, 14px, 16px, 18px, 20px, 24px, 72px, 96px
- Line height
- 1.00–1.56
- Letter spacing
- 0.1em (uppercase labels only)
- Fallback
- Inter (Google Fonts)
Primary workhorse — nav, body, buttons, links, and the massive 72/96px display headlines. The 0.1em tracking applies to uppercase micro-labels like 'USE CASES' and 'CLICKHOUSE IS TRUSTED BY', creating spaced-out eyebrow text that reads like a terminal status line. Weight 600 dominates headings, weight 400 for body, weight 900 only on the display-class hero. Inter's neutrality lets the lime accent carry all the personality.
Additional typeface
Basier
- Weights
- 600
- Sizes
- 20px, 24px, 36px
- Line height
- 1.17–1.40
- Fallback
- Basier Circle (or Inter as fallback)
Secondary heading face used selectively for card titles and sub-section headlines. Slightly more geometric than Inter, adding a touch of editorial weight at the 20–36px range. Functions as a 'quiet display' when Inter's 72–96px hero is too loud for a mid-level section.
Additional typeface
Inconsolata
- Weights
- 600
- Sizes
- 16px
- Line height
- 1.50
- Fallback
- JetBrains Mono or Fira Code
Monospace for code snippets, terminal commands ($ curl ...), and the CLI install line. The only departure from the sans-serif system — appears once per page in the install section, marking the boundary between marketing and developer content.
Additional typeface
sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
sans-serif — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24-32px
- Element gap
- 12-16px
Border radius
tags
4pxcards
8pxpills
9999pxinputs
4pxbuttons
8pxSpacing scale
2px4px6px8px10px12px16px24px25px28px32px40px44px48px64px73px80px96px112px128px160px192px208pxGuidelines
Do
- Use Electric Lime (#faff69) exclusively for primary actions and the single most important highlight per section — it should never appear more than once per viewport as a filled element.
- Build all dark surfaces from the five-step stack: Void Black (#151515) → Carbon (#1f1f1c) → Graphite (#282828) → Slate Dark (#343434) → Iron (#3a3a3a) — let hue, not shadow, define elevation.
- Use 8px radius for cards and buttons as the default; reserve 9999px for pill-style tags and status indicators only.
- Set display headlines at 72–96px Inter weight 900 with line-height 1.0 — the page is designed for one massive statement per section.
- Use 0.1em letter-spacing + 12px Inter weight 600 in Electric Lime for all uppercase eyebrow labels — this is the system's terminal voice.
- Keep section gaps at 80px and card padding at 24–32px — the dark canvas needs more breathing room than light themes because there's no tonal break to reset the eye.
- Use Inconsolata 16px weight 600 for any code, CLI, or terminal content — the typeface switch is a signal that the reader has crossed into developer territory.
Don’t
- Do not use Electric Lime on anything other than the single primary action per section — diluted lime loses its phosphor glow.
- Do not use white drop-shadows or glows on lime elements — the #fbff46 box-shadow token handles glow; stacking effects looks cheap.
- Do not introduce new colors: no blues, purples, or reds for secondary accents — the system is binary: dark neutral or electric lime.
- Do not use rounded corners larger than 8px on cards or buttons — the system is crisp, not soft; 9999px belongs only to pills.
- Do not use heavy drop-shadows for elevation — rely on the five-step surface stack and 1px Iron borders instead; shadows disappear on near-black anyway.
- Do not mix multiple heading typefaces in the same section — Inter handles the scale from 20px to 96px; Basier is a specialist, not a co-equal partner.
- Do not place body copy below 14px or above 18px — the system commits to a tight 14–18px range for paragraph text, letting the 72–96px display do the shouting.
Components
Primary CTA Button
Main action trigger (Get started, Start free cloud trial)Filled Electric Lime (#faff69) background, Void Black (#151515) text at 16px Inter weight 600. 8px border-radius. Padding 12px 24px. Soft black drop-shadow at 10% opacity. The single most important component — its lime glow against the dark canvas is the only moment the interface truly lights up.
Ghost / Outlined Button
Secondary action (Contact sales, Ask us anything)Transparent background with 1px Iron (#3a3a3a) border, Paper (#e5e7eb) text at 16px Inter weight 600. 8px border-radius. Padding 12px 24px. Sits beside the primary CTA at lower visual weight — never competes with the lime.
Pill Button
Nav badges, tags, compact triggers9999px border-radius, Dark Olive (#4f5100) background, Electric Lime text. Used sparingly for status indicators and tag-like elements. Tight 6px 12px padding.
Feature Card (Use Case Tile)
4-column grid cards for use cases, features, and capabilitiesCarbon (#1f1f1c) background, 1px Iron (#3a3a3a) border, 8px radius. 24-32px internal padding. Inset shadow at 6% black for subtle depth. Lime-outlined icon in 56px square at top, heading-sm in Basier 20px weight 600, body text in Bone (#dfdfdf) 14-16px, and a lime 'Explore →' link footer. Cards are equal-height, no hover lift — the lime link is the only hover affordance.
FAQ Accordion Item
Expandable question/answer in the FAQ sectionTransparent background, no border between items, just vertical spacing. Question text in Paper (#e5e7eb) 18px Inter weight 500 with a 16px circular + icon on the right (Iron border, 1px stroke). Open state reveals answer text in Smoke (#a0a0a0) 16px. Clean, no box, no card.
Terminal Code Block
CLI install command displayCarbon (#1f1f1c) background, 8px radius, 16px 24px padding. $ prompt in Electric Lime, command text in Paper (#e5e7eb) using Inconsolata 16px weight 600. Copy icon on the right edge. The one moment a different typeface enters the system — immediately signals 'developer content'.
Top Navigation Bar
Persistent site navigationTransparent or Void Black background, no visible border. Logo + brand on left in Paper (#e5e7eb), nav links center in Smoke (#a0a0a0) 14px Inter weight 500, right side: language selector, GitHub stars (46.8k), Sign in link, and the primary lime CTA. Height ~64px, padding 0 24px.
Announcement Banner
Time-sensitive product news embedded in the heroCarbon (#1f1f1c) background with 1px Iron border, 8px radius, sits below the hero CTAs. Contains a small Langfuse logo tile on the left, body text in Bone 14px, and lime inline links. 16-20px vertical padding, compact horizontal layout.
Trust Logo Strip
Social proof — logos of companies using the productNo background change, no card frame. Eyebrow text 'CLICKHOUSE IS TRUSTED BY' in spaced uppercase Smoke 12px Inter. Logos below in pure Paper (#e5e7eb) monochrome, evenly spaced in a single row. Full viewport width, no padding container.
Hero Section
Above-the-fold value propositionVoid Black background, full-width. Centered 96px Inter weight 900 headline in Paper, with the brand name 'ClickHouse' highlighted in Electric Lime via the brand gradient. 18px subtext in Bone. Two-button stack (primary + ghost) with 12px gap. Generous 120-160px vertical padding. No hero image, no background graphic.
Final CTA / Install Section
Bottom-of-page conversionSubtle bordered card on Void Black canvas. Centered 36px Inter weight 600 headline with 'ClickHouse' in a lime highlight box (Electric Lime background, Void Black text, 4px radius). Terminal code block below, followed by secondary inline links in lime.
Section Divider / Eyebrow Label
Small uppercase label above section headings12px Inter weight 600, 0.1em letter-spacing, Electric Lime color. E.g., 'USE CASES', 'CLICKHOUSE IS TRUSTED BY'. Reads like a terminal status line — the only place where uppercase tracking is used at small size.
Inline Highlight (Wordmark Emphasis)
Emphasize the brand name within body text or headlinesElectric Lime background, Void Black text, 4px radius, inline within a sentence. Used twice on the page: in the hero 'database for AI' and in the final CTA 'ClickHouse in seconds'. Functions as a highlighter pen mark.
Surfaces & elevation
Level 0
Void Black
#151515Page canvas and primary background
Level 1
Carbon
#1f1f1cCard surfaces, feature panels, content blocks
Level 2
Graphite
#282828Elevated surfaces, hover states, nested panels
Level 3
Slate Dark
#343434Modals, dropdowns, deepest elevation
Level 4
Iron
#3a3a3aHairline borders defining surface boundaries
Elevation is a whisper, not a declaration. Cards rely on a barely-visible inset shadow and hairline 1px Iron borders rather than dramatic drop-shadows. The dark canvas makes heavy shadows disappear, so the system leans on subtle background-step contrasts (#151515 → #1f1f1c → #282828) to communicate stacking. This is a flat design that earns depth through tone, not blur.
Primary CTA button
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
Feature card
rgba(0, 0, 0, 0.06) 0px 4px 4px 0px, rgba(0, 0, 0, 0.14) 0px 4px 25px 0px inset
Layout & imagery
Layout
Full-bleed dark canvas, no max-width container visible on the hero — the massive 96px headline breathes across the viewport. Content sections use a centered ~1200px max-width. The hero is a single centered headline + subtext + two-button stack, no split layout, no hero image. Below the fold, the layout shifts to a 4-column card grid for use cases (equal width, equal height, hairline-bordered), then a 2-column text+visual block for feature deep-dives. FAQ is a 2-column split: heading + intro on the left, accordion list on the right. The final CTA section is a centered single-column install block. Navigation is a fixed top bar with logo left, nav links center, CTA + auth right. Spacing rhythm: generous 80px section gaps with 24-32px card padding, no alternating light/dark bands — the entire page flows in one continuous dark mode.
Imagery
Visuals are sparse and product-focused. The use-case section uses 2px-stroke outlined lime icons inside square bordered tiles — the icon style is geometric and minimal, almost schematic. Photography is absent; logos in the trust strip are presented in pure white monochrome against the dark canvas, no color, no card frames, just a row of names. Code/terminal screenshots appear as a dark panel with a prompt and command line. The only decorative gradient is a subtle lime edge-fade used once for visual punctuation. Overall: the interface is the hero — no stock photography, no lifestyle imagery, no illustrations beyond line-art icons.
Design notes
Agent Guide
## Quick Color Reference - Background: #151515 (Void Black) - Card surface: #1f1f1c (Carbon) - Text primary: #ffffff / #e5e7eb - Text secondary: #dfdfdf / #a0a0a0 - Border: #3a3a3a (Iron) / #414141 (Steel) - Accent: #faff69 (Electric Lime) - Accent dark: #4f5100 (Dark Olive) - primary action: no distinct CTA color ## Example Component Prompts No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Feature Card (Use Case Tile)**: #1f1f1c background, 1px #3a3a3a border, 8px radius, 24-32px padding. Lime-outlined icon (2px stroke #faff69) in a 56px square at top. Title in Basier 20px weight 600, #ffffff. Body text in 14px Inter weight 400, #dfdfdf. Footer link 'Explore →' in 14px Inter weight 500, #faff69. 4. **Terminal Code Block**: #1f1f1c background, 8px radius, 16px 24px padding. $ prompt character in #faff69, command text in #e5e7eb using Inconsolata 16px weight 600. Copy icon right-aligned, 1px stroke #a0a0a0. 5. **FAQ Accordion Item**: Transparent background, no border. Question in 18px Inter weight 500, #e5e7eb, with a 16px circular + icon on the right (1px #3a3a3a border, #a0a0a0 icon). Answer text in 16px Inter weight 400, #a0a0a0, revealed on click. 24px vertical padding between items.
Similar brands
Vercel
Same dark-mode terminal aesthetic with restrained palette and single-color accent system — though Vercel uses white-on-black where ClickHouse uses lime.
Supabase
Dark canvas developer-tool interface with green accent and monospace code blocks — shares the technical, phosphor-monitor register.
PlanetScale
Dark UI with vivid single-color accent and generous 96px-class display headlines — similar confidence in large type as the primary visual device.
Neon
Database-as-a-service brand with dark background and bright accent for CTAs — matches the binary neutral-plus-accent color philosophy.
Linear
Dark-mode product UI with hairline borders, 8px radii, and minimal elevation — shares the flat-fast-component DNA even though Linear's accent is purple.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
