CURATED · OPEN · FREE

Clickhouse

A high-performance developer platform with a dark, high-contrast interface built for technical precision.

Developer ToolsBold TypographyDark ModeCleanPremium

↓ Download design system (28 MB)Open in OpenDesign

Visit: https://clickhouse.com

📦 Browse pack contents →

Identity DNA

databaseanalyticsreal-timeinfrastructure

A command center dashboard built for high-performance data operations.

Color

#faf569Accent

#ffffffInk

#a0a0a0Ink soft

#151515BG

#1f1f1cBG soft

#131313BG quiet

#dfdfdfMuted

rgba(65, 65, 65, 0.8)Line

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

Typography

humanist-sans · monospace

display72px · 500
headline36px · 500
body16px · 400
small14px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base grid with larger multiples for section spacing

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(65, 65, 65, 0.8)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions on interactive elements · Subtle hover state changes

Color and background-color transitions on buttons and links. · Immediate visual feedback with subtle opacity or transform changes.

Components

button Solid primary yellow buttons with black text and subtle radius; secondary buttons use transparent backgrounds with borders.
card Dark surface cards with subtle borders and rounded corners, often containing integration icons.
chip Not prominently featured.
input Not prominently featured in the screenshots.
hero Large-scale typography centered on a dark background with a clear hierarchy and dual call-to-action buttons.

Voice & Don'ts

Tone Confident, technical, and direct.
Headlines Bold, concise statements emphasizing performance and scale.
CTAs Action-oriented with clear value propositions like 'Start free cloud trial'.

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
Avoid: Vague marketing jargon
Avoid: Overly casual language
Avoid: Complex technical explanations without context

Inside the pack — real screenshots

Clickhouse — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko