---
title: "ClickHouse design system"
variant: extended
source: https://clickhouse.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/clickhouse-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ClickHouse · Design System

> A dark technical canvas, lit by signal yellow.

**Theme:** dark · **Industry:** devtools · **Source:** https://clickhouse.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ClickHouse pairs a near-black canvas and crisp typography with sharp yellow-green calls to action and data-led visuals. Its homepage alternates spacious product explanations with compact cards, customer proof, and a vivid deployment band.

## North star

Let the near-black canvas carry the page, and reserve vivid yellow-green for actions, data emphasis, and purposeful section contrast.

## Overview

The page is anchored by a near-black canvas (#131312), with dark charcoal section bands and cards that create separation without turning the interface into a stack of bright panels. Signal Yellow (#faff69) is the defining accent: it marks primary actions, small labels, diagram highlights, and the full-width deployment section; dark text on yellow keeps those moments legible. Inter carries most navigation, body copy, and controls, while the heavier Basier display face gives the hero and selected headings a distinct, compact punch. Large centered hero typography gives way to left-aligned product narratives, customer stories, and side-by-side comparisons. The layout uses generous vertical breathing room between sections, then tighter spacing within cards and navigation. Customer marks, product diagrams, and testimonial video stills provide evidence rather than decorative imagery. Fine charcoal borders outline cards and controls; restrained shadows and layered dark surfaces keep depth subtle and technical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Yellow | `#faff69` | `--color-signal-yellow` | accent | Primary CTA fill, highlighted labels and diagram data; also defines the deployment section and testimonial cards. |
| Olive Edge | `#4f5101` | `--color-olive-edge` | semantic | Subtle outline on secondary dark buttons and selected UI accents; not a broad background color. |
| Carbon Canvas | `#131312` | `--color-carbon-canvas` | surface | Main page canvas and dominant dark background behind hero, product sections, FAQ, and footer. |
| Soft Silver | `#dfdfdf` | `--color-soft-silver` | neutral | Primary muted body copy, navigation links, and explanatory text on dark surfaces. |
| Graphite Fade | `#2d2d2c` | `--color-graphite-fade` | surface | Dark gradient and subtle tonal transitions; supports depth rather than acting as a headline brand color. |
| Charcoal Panel | `#1f1f1c` | `--color-charcoal-panel` | surface | Cards, navigation areas, and dark product panels set apart from the main canvas. |
| Quiet Border | `#383838` | `--color-quiet-border` | neutral | Hairline outlines around dark cards, buttons, and other compact interface elements. |
| Slate Band | `#414141` | `--color-slate-band` | surface | Lighter gray section band behind the Why ClickHouse feature panel and media areas. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | High-emphasis headings and select button or navigation text on dark backgrounds. |
| Muted Gray | `#a0a0a0` | `--color-muted-gray` | neutral | Secondary navigation and footer copy where less emphasis than body text is needed. |
| Black Detail | `#000000` | `--color-black-detail` | semantic | Occasional link or heading text detected in the page; not a dominant canvas color. |
| Cloud White | `#f9f9f9` | `--color-cloud-white` | neutral | Bright navigation, footer, and small text details on dark surfaces. |
| Cool Mist | `#cad5e2` | `--color-cool-mist` | neutral | Isolated pale blue-gray text detail, mainly in navigation; not a defining brand color. |
| Footer Graphite | `#232323` | `--color-footer-graphite` | surface | Minor dark footer and secondary area detail beneath the main page canvas. |
| Deep Olive | `#161600` | `--color-deep-olive` | semantic | Rare dark text detail associated with yellow-green contrast, not a general text color. |

### Semantic aliases

`--color-canvas` → `#131312` (Carbon Canvas) · `--color-surface` → `#1f1f1c` (Charcoal Panel) · `--color-surface-2` → `#414141` (Slate Band) · `--color-text` → `#ffffff` (Pure White) · `--color-text-muted` → `#dfdfdf` (Soft Silver) · `--color-text-subtle` → `#a0a0a0` (Muted Gray) · `--color-border` → `#383838` (Quiet Border)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#131312` | 18.59:1 | AAA |
| `#ffffff` | `#1f1f1c` | 16.52:1 | AAA |
| `#ffffff` | `#414141` | 10.21:1 | AAA |
| `#dfdfdf` | `#131312` | 13.95:1 | AAA |
| `#dfdfdf` | `#1f1f1c` | 12.4:1 | AAA |
| `#dfdfdf` | `#414141` | 7.66:1 | AAA |
| `#a0a0a0` | `#131312` | 7.11:1 | AAA |
| `#a0a0a0` | `#1f1f1c` | 6.32:1 | AA |
| `#a0a0a0` | `#414141` | 3.9:1 | AA-large |

### Gradients

- `linear-gradient(to right bottom, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0%, rgba(0, 0, 0, 0) 50%)`
- `linear-gradient(to right, rgba(0, 0, 0, 0) 0%, lab(97.5527 -15.3436 68.8452) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 600 | Navigation, body copy, captions, links, and buttons across the page. | Inter |
| basier | `--font-display` | webfont | 600, 700 | Hero headline and selected display headings that need a heavier, more distinctive voice. | Plus Jakarta Sans |

- **Inter:** Mostly regular weight for copy; medium for buttons and navigation emphasis. Sentence case, clean sans-serif, and little to no tracking.
- **basier:** Use semibold or bold display weights. Keep casing natural and tracking neutral; reserve it for prominent headings.

### Type scale — Perfect Fourth (ratio ≈ 1.31, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 600 | 1.25 | 0 | — | basier | Hero headline and highest-priority section headline. |
| h2 | 24px | 400 | 1.5 | 0 | — | Inter | Supporting section headings and explanatory headline text. |
| h3 | 20px | 600 | 1.25 | 0 | — | basier | Feature card titles and secondary feature headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Product explanations, testimonial text, and general copy. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Small labels, supporting details, and compact metadata. |
| button | 14px | 500 | 1.25 | 0 | — | Inter | Primary trial action and secondary action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter | Header navigation and compact menu labels. |
| link | 14px | 400 | 1.5 | 0 | — | Inter | Inline and standalone links, including calls to explore documentation. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 6, 8, 10, 12, 16, 24, 32, 40, 64, 96 px.
- Section rhythm 96px · element gap 16px · card padding — · max content width 1216px.

Use a centered content frame capped at the measured 1216px maximum width, with a spacious vertical section rhythm and generous separation between major content groups. The hero is centered and broad; subsequent areas alternate centered headings with left-aligned narratives, split content, card grids, and comparison layouts. The customer logo band spans wide, while the footer uses multiple compact columns. Keep cards internally compact relative to the large page-level gaps; preserve clear alignment and avoid filling every area with content.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `4px` · nav `8px` · link `8px` · xs `4px` · sm `8px` · pill `9999px`
- Shadow `sm` (card, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `md` (button, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Shadow `xl` (other): `oklch(0.7267 0.1689 22.18 / 0.07) 0px 0px 800px 480px`
- Shadow `xl-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(97.5527 -15.3436 68.8452) 0px 4px 60px 0px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Depth is restrained: dark panels and alternating charcoal section bands do most of the work. Thin #383838 borders define cards and controls, while small shadows appear sparingly. Use layered surfaces and subtle tonal gradients rather than prominent floating effects; keep the high-contrast yellow panels visually distinct without adding unnecessary shadow.

## Imagery

Use customer logos as a horizontal trust strip, with product diagrams and data comparisons as the main explanatory visuals. Testimonial cards feature video stills framed inside vivid yellow panels, including clear play controls and attribution. Imagery is mostly functional and evidence-led rather than atmospheric; retain dark surroundings and use yellow highlights to focus attention on key data or media.

## Components

### Primary CTA

Signal Yellow (#faff69) rectangular button with dark text, a fine matching outline, and modest rounded corners; used for cloud trial actions.

### Secondary action

Dark button with white text and a restrained Olive Edge (#4f5101) outline; sits beside the primary hero CTA.

### Use-case card

Dark card outlined in Quiet Border (#383838), with a simple yellow-green icon, short description, and an accent-colored exploration link.

### Testimonial video card

Rounded Signal Yellow (#faff69) panel containing a video still, centered play affordance, quotation, and bold customer attribution.

### Customer logo strip

Wide dark trust band with a small yellow-green section label and a horizontally arranged set of customer marks.

### Deployment panels

Bright yellow-green section containing dark cloud and self-managed option cards, each with concise descriptions and clear next steps.

### FAQ rows

Compact dark accordion rows separated by fine gray rules, with numbered questions and a plus control at the trailing edge.

### Measured component styles

- **Primary button** (“Start free cloud trial”): background #faff69 · text #151515 · border 1px solid #faff69 · radius 4px · padding 10px 16px · 500 14px Inter
- **Secondary button** (“Real-time analytics”): transparent background · text #ffffff · border 1px solid #4f5101 · radius 3.35544e+07px · padding 10px 16px · 500 14px Inter
- **Link** (“Langfuse is now part of ClickHouse. Disc”): transparent background · text #dfdfdf · radius 0px · padding 16px · 400 14px Inter
- **Card** (“Real-time analytics Deliver instant insi”): background #151514 · text #dfdfdf · border 1px solid #383838 · radius 8px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Copy logo as SVG Download full logo Down”): transparent background · text #dfdfdf · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the main canvas near-black and the overall contrast crisp.
- Use #faff69 for primary actions and selective data emphasis.
- Separate sections with tonal shifts rather than bright background blocks.
- Use Inter for navigation and readable interface copy.
- Reserve the display face for prominent headlines.
- Frame technical information in restrained dark cards with fine borders.

## Don't

- Do not introduce unmeasured brand colors.
- Do not use yellow-green as a default text color for long copy.
- Do not add decorative shadows that overpower the subtle panels.
- Do not make every section a card grid.
- Do not replace customer and product evidence with generic stock imagery.
- Do not crowd the page-level section spacing.

## Agent prompt

Build a new ClickHouse-style page using Carbon Canvas (#131312) as the dominant background, with Charcoal Panel (#1f1f1c) and Slate Band (#414141) for restrained section separation. Use Signal Yellow (#faff69) sparingly but decisively for primary CTAs, key metrics, diagram emphasis, and a standout feature band; use dark text on yellow. Set most UI and copy in Inter, reserving the heavier display face for major headlines. Keep the page spacious, aligned to a centered content frame, and vary the composition between centered introductions, split product explanations, compact cards, and evidence-led comparisons. Use customer marks, technical diagrams, and video testimonials with a functional presentation. Outline dark cards with Quiet Border (#383838), keep shadows subtle, and maintain clear hierarchy without decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting sentence, and paired actions on a dark canvas. | Primary trial action, Secondary contact action | Large display headline, Yellow primary button, Dark outlined secondary button |
| 2 | logo-cloud | Wide logo band with a brief trust label above customer marks. | Customer credibility, Scrollable logo presentation | Dark section band, Small accent label, Monochrome customer logos |
| 3 | feature-grid | Centered section title above four evenly arranged use-case cards. | Use-case discovery, Explore links | Dark bordered cards, Yellow-green line icons, Compact card copy |
| 4 | testimonials | Text and filters on the left; stacked testimonial video cards on the right. | Category filtering, Video playback, Customer proof | Dark canvas, Yellow testimonial panels, Play controls and attributions |
| 5 | feature-grid | Centered heading and intro above a compact grid of product benefits. | Benefit scanning, Feature exploration | Gray section band, Inset dark panel, Yellow feature tiles |
| 6 | integrations | Centered introduction above a large, centered ecosystem diagram. | Integration overview, Technology discovery | Dark canvas, Central product panel, Connected tool groups |
| 7 | comparison | Centered explanation followed by two side-by-side database diagrams. | Side-by-side comparison, Documentation link | Dark comparison panels, Yellow data blocks, Compact explanatory copy |
| 8 | feature-split | Full-width Signal Yellow section with centered title and brief supporting text. | Deployment choice, Quick option scanning | Bright yellow-green band, Dark text, Centered introductory content |
| 9 | product-grid | Centered cloud option above two smaller self-managed product cards. | Cloud signup, Download options | Dark product cards, White cloud action, Simple line icons |
| 10 | stats | Community statement and social links beside a grid of large project metrics. | Community proof, Social channel links | Large white numbers, Yellow metric labels, Dark canvas |
| 11 | faq | Introductory text at left and a vertical accordion list at right. | Expandable answers, Ask a question | Numbered FAQ rows, Fine horizontal rules, Trailing plus controls |
| 12 | cta | Centered cloud signup panel followed by a self-hosted command-line option. | Free trial conversion, Self-hosted onboarding | Yellow CTA panel, Dark command panel, Primary account action |
| 13 | footer | Dark footer with several link columns and a brand, newsletter, and community area. | Deep-link navigation, Newsletter signup, Community access | Compact multi-column links, Brand block, Legal and privacy links |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/clickhouse-com