# Clickhouse · Design system migration spec

> Source: https://clickhouse.com  ·  Curated by OpenDesign  ·  en

> A strong example of a premium developer tool interface that balances bold typography with a clean, dark aesthetic.

## 1. Identity DNA

The ClickHouse design system is built like a high-performance engine for modern data infrastructure—every component is precision-tooled for function, with no decorative excess. Its identity is forged at the intersection of database technology, AI, and raw scale, manifesting as a interface that communicates developer authority through stark contrast and geometric clarity.

**One-liner:** A high-performance developer platform with a dark, high-contrast interface built for technical precision.
**Keywords:** database · analytics · real-time · infrastructure
**Analogy:** A command center dashboard built for high-performance data operations.

## 2. Color

The palette is a study in binary contrast: a deep charcoal ground against which a single, vibrant electric yellow signals all primary actions and key data points. This high-chroma accent is the system's sole decorative color, used with disciplined restraint to guide focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151515` | main background |
| `--bg-soft` | `#1f1f1c` | card background |
| `--bg-quiet` | `#131313` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#a0a0a0` | secondary text |
| `--muted` | `#dfdfdf` | placeholder |
| `--accent` | `#faf569` | single accent |
| `--line` | `rgba(65, 65, 65, 0.8)` | divider |

**Color principle:** High-contrast dark theme prioritizing readability and focusing attention on the vibrant yellow accent.

The core principle is high-contrast legibility, where every hue serves a functional purpose in a dark-mode environment.

## 3. Typography

Typography is split between two authoritative voices: a bold, geometric sans-serif for headlines that asserts technical authority, and a highly readable humanist sans-serif for the body text of documentation. This pairing creates a clear hierarchy, with all-caps micro-text further delineating categorical labels.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -1px | Primary hero headlines |
| headline | 36px | 1.3 | 500 | normal | Section headings |
| body | 16px | 1.5 | 400 | normal | General paragraph text |
| small | 14px | 1.43 | 400 | normal | Navigation and UI labels |

**Type rules:**
- Use bold weights for emphasis within the humanist-sans family
- Maintain tight line-height for display typography
- Ensure high contrast between text and background

## 4. Spacing

The spacing system employs generous vertical rhythm, using large blocks of whitespace to separate content sections and reduce cognitive load.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with larger multiples for section spacing

## 5. Surfaces

Surfaces are defined by minimal depth, rendered through subtle, semi-transparent borders rather than heavy shadows. The dark background is flat and uninterrupted, creating a clean canvas where content hierarchy is established through scale and spacing.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 1px 3px 0px rgba(0, 0, 0, 0.1)
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
  - 0px 20px 25px -5px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(65, 65, 65, 0.8)

## 6. Layout

The layout is a centered, single-column skeleton, prioritizing linear content flow and vertical stacking. Full-width dark sections alternate with generous whitespace, creating a clear, uncluttered path through the information architecture.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero sections with centered content and a 12-column grid for structured layouts

## 7. Motion & Interaction

Motion is functional and restrained, designed to confirm interaction without introducing distraction. Transitions are smooth and swift, limited to scroll-based fades and subtle state changes that provide immediate feedback on interactive elements.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements
  - Subtle hover state changes

- **Hover:** Color and background-color transitions on buttons and links.
- **Click:** Immediate visual feedback with subtle opacity or transform changes.
- **Transition:** All interactive states use a 0.15s cubic-bezier transition for smoothness.
- **Keyboard:** Standard focus states implied by accessibility requirements.

## 8. Voice & Don'ts

The editorial voice is authoritative, direct, and technically confident, mirroring the interface's clarity. Copy is benefit-oriented and avoids passive language, using short, powerful headlines and clear, action-oriented calls-to-action.

- **Tone:** Confident, technical, and direct.
- **Headline style:** Bold, concise statements emphasizing performance and scale.
- **CTA style:** Action-oriented with clear value propositions like 'Start free cloud trial'.
- **Avoid:** Vague marketing jargon / Overly casual language / Complex technical explanations without context

### Don'ts
- ❌ Don't use rounded corners larger than 12px — screenshot shows subtle, functional radii
- ❌ Don't use multiple accent colors — screenshot shows a single, dominant yellow accent
- ❌ Don't use light mode or white backgrounds — screenshot shows a dark mode design
- ❌ Don't use decorative serif fonts — screenshot shows humanist-sans for all display and body text
- ❌ Don't use busy textures or patterns — screenshot shows clean, flat surfaces
- ❌ Don't use low-contrast text — screenshot shows high-contrast white and yellow on dark backgrounds

The system deliberately avoids decorative fonts, light backgrounds, muted accents, and center-aligned body text, maintaining its strict functional focus.

## System Prompt (paste into AI tool)

```
This is a premium developer tool interface for ClickHouse, a real-time database. The design uses a dark mode palette with a near-black background and a high-chroma yellow accent for primary actions. Typography is a clean, humanist-sans-serif with bold weights for display. Key hex colors are #151515 (bg), #faf569 (accent), and #ffffff (ink). Critical donts: never use light mode, never use multiple accent colors, and never use decorative serifs. The layout is spacious with a 12-column grid and centered hero content.
```
