---
name: Clickhouse
description: "A strong example of a premium developer tool interface that balances bold typography with a clean, dark aesthetic."
version: alpha

colors:
  background: "#151515"
  primary: "#ffffff"
  secondary: "#a0a0a0"
  tertiary: "#faf569"
  neutral: "#dfdfdf"
  bg-soft: "#1f1f1c"
  bg-quiet: "#131313"
  line: "rgba(65, 65, 65, 0.8)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

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

## Colors

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

- **Background (`#151515`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#a0a0a0`)** — uses `ink-soft` token
- **Accent (`#faf569`)** — uses `accent` token
- **Muted (`#dfdfdf`)** — uses `muted` token
- **Borders (`rgba(65, 65, 65, 0.8)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px base grid with larger multiples for section spacing

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```