# ClickHouse — Design System
> ClickHouse is a fast open-source column-oriented database management system that allows generating analytical data reports in real-time using SQL queries
- **Canonical:** https://uiuxskills.com/library/clickhouse
- **Source:** https://clickhouse.com
- **Category:** Database & DevOps
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:16.176Z

---

---
version: alpha
name: ClickHouse
tagline: The leading database for AI
description: Fast open-source column-oriented database management system for real-time analytical reports.
tone: Technical, authoritative, high-performance, developer-centric, precise.
color-scheme: dark
colors:
  primary: "#F6A609"
  on-primary: "#000000"
  background: "#09090B"
  surface: "#18181B"
  surface-container: "#27272A"
  surface-bright: "#3F3F46"
  on-surface: "#F4F4F5"
  outline: "#3F3F46"
  error: "#EF4444"
  success: "#10B981"
typography:
  display-lg:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 3rem
    fontWeight: 800
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.875rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "0"
  headline-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: "0"
  headline-sm:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: "0"
  body-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  body-sm:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  label-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.0875rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "#E09508"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    borderColor: transparent
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 40px
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    width: auto
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  page-container:
    backgroundColor: "{colors.background}"
motion:
  duration-medium: 200ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.5)
  md: 0 4px 6px rgba(0,0,0,0.6)
  lg: 0 10px 15px rgba(0,0,0,0.7)
---

## Overview

The ClickHouse visual design presents a high-performance, developer-centric dark mode aesthetic. It pairs a striking yellow-orange primary accent color with deep charcoal and black backgrounds to convey speed, precision, and database power. The interface balances technical authority with clean, minimal layouts optimized for developer tools.

## Colors

The color strategy relies on a high-contrast dark-mode foundation to reduce eye strain during technical workflows while highlighting critical actions with a vibrant accent. Deep grays and blacks establish structural hierarchy, while standard semantic colors handle status reporting.

*   `colors.primary` (#F6A609): ClickHouse's signature yellow-orange brand color, used for primary actions, highlights, and key brand elements.
*   `colors.on-primary` (inferred) (#000000): High-contrast black text used on top of the primary yellow-orange background.
*   `colors.background` (#09090B): Deep black background color used for the main page canvas in dark mode.
*   `colors.surface` (#18181B): Slightly lighter dark gray used for cards and structural containers.
*   `colors.surface-container` (inferred) (#27272A): Medium dark gray used for nested containers, input fields, and elevated elements.
*   `colors.surface-bright` (inferred) (#3F3F46): Lighter gray used for subtle highlights, borders, and secondary badges.
*   `colors.on-surface` (#F4F4F5): Off-white text color used for primary body copy and headings on dark surfaces.
*   `colors.outline` (#3F3F46): Subtle border color used to define card boundaries and input fields without adding visual noise.
*   `colors.error` (inferred) (#EF4444): Standard red color used for error states and destructive actions.
*   `colors.success` (inferred) (#10B981): Standard green color used for success states, active indicators, and positive badges.

## Typography

The typography system uses the Inter font family to deliver clean, highly legible technical text across all screen sizes. The scale ranges from heavy display weights for high-impact metrics to tight, precise label styles for code-adjacent interfaces.

*   `typography.display-lg` (inferred): Large hero display typography for high-impact messaging.
*   `typography.display-md` (inferred): Medium display typography used for secondary hero headers.
*   `typography.headline-lg` (inferred): Large section headings to introduce major content blocks.
*   `typography.headline-md` (inferred): Medium section headings for feature titles and card headers.
*   `typography.headline-sm` (inferred): Small headings for nested content and sub-features.
*   `typography.body-md`: Standard body copy for paragraphs and descriptions.
*   `typography.body-sm`: Smaller body copy for secondary descriptions and metadata.
*   `typography.label-md`: Interactive labels, button text, and navigation items.
*   `typography.label-sm`: Micro-labels, badges, and overlines.

## Layout

*   The layout relies on a structured grid with generous spacing utilizing a base 8px unit, with standard gaps of `spacing.md` (16px) and `spacing.lg` (24px) to separate complex technical information.
*   The observed section order from top to bottom is: `nav`, `hero`, `social-proof`, `features`, `use-cases`, and `footer`.
*   The hero composition pattern features a centered headline and subhead with a primary yellow CTA and secondary outline CTA side-by-side, followed by a prominent announcement banner.
*   Responsive behavior follows a mobile-first approach, where the navigation collapses to a hamburger drawer below 1024px, and multi-column grids stack vertically on smaller viewports.

## Elevation & Depth

Depth is primarily conveyed through color contrast and subtle single-layer dark shadows across three levels, all of which are inferred.

*   `elevation.sm`: Used for subtle card lift and interactive element hover states.
*   `elevation.md`: Applied to dropdowns, popovers, and floating contextual menus.
*   `elevation.lg`: Reserved for high-priority overlays, modals, and mobile navigation drawers.

## Shapes

The design uses moderately rounded corners to balance a clean, professional developer tool aesthetic with modern UI friendliness. Interactive elements and containers are structured using a clear hierarchy of radii.

Small components like badges use `rounded.full` or `rounded.sm` (4px), while primary inputs and buttons use `rounded.md` (8px). Structural containers like cards use `rounded.lg` (12px), and larger elevated containers use `rounded.xl` (24px) to establish a softer, distinct visual boundary.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### button-primary

The primary action button is built with a solid `{colors.primary}` background and high-contrast `{colors.on-primary}` text. It uses `{typography.label-md}`, `{rounded.md}` corners, and transitions to `{components.button-primary-hover}` on hover. Use this for the main call-to-action on any page or form.

### button-secondary

This button features a transparent background with a border defined by `{colors.outline}` and text colored with `{colors.on-surface}`. It shares the same `{typography.label-md}` and `{rounded.md}` as the primary button. Use this for secondary actions, such as "Contact sales" or alternative paths.

### card

The default card container uses `{colors.surface}` as its background with a `{colors.outline}` border and `{rounded.lg}` corners. It features `{spacing.xl}` (24px) internal padding. Use this to group related feature descriptions, documentation links, or technical specifications.

### card-elevated

An alternative container using `{colors.surface-container}` with `{rounded.xl}` corners and no border. It is designed to stand out against the default page background. Use this for high-priority feature highlights, interactive tools, or pricing calculators.

### input-field

Input fields use `{colors.surface-container}` for the background, `{colors.outline}` for the border, and `{colors.on-surface}` for text. On focus, the border transitions to `{colors.primary}` via `{components.input-field-focus}`. Use this for search inputs, sign-up forms, and console query fields.

### link

Text links are styled with `{colors.primary}` using `{typography.body-md}`. They maintain color on hover to preserve clear visual paths. Use these within body copy or at the end of feature cards to direct users to deeper documentation.

### badge

Badges are small, non-interactive elements using `{colors.surface-bright}` for the background, `{colors.on-surface}` for text, and `{rounded.full}` for a pill shape. Use these for category tags, version numbers, or neutral metadata.

### badge-success

A status badge using `{colors.success}` as the background and `{colors.on-primary}` for text. Use this to indicate active cloud instances, successful query executions, or positive system health.

### badge-error

A status badge using `{colors.error}` as the background and `{colors.on-primary}` for text. Use this to indicate failed queries, system errors, or critical alerts.

### divider

A thin, 1px horizontal line styled with `{colors.outline}`. Use this to separate logical sections within a page or to split content blocks inside a card.

### page-container

The master layout wrapper utilizing `{colors.background}` as its canvas. It ensures the dark mode theme is consistently applied across the entire viewport.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs like `{components.button-primary}` to draw immediate attention. | Never use `{colors.primary}` for body text as it degrades readability; reserve it for accents and `{components.link}`. |
| Apply `{colors.surface-container}` for card backgrounds to separate content from the main `{colors.background}`. | Do not apply heavy shadows on `{colors.background}` without using `{colors.surface}` to establish a proper elevation hierarchy. |
| Ensure all text on `{colors.primary}` uses `{colors.on-primary}` for optimal readability. | Avoid using sharp corners on interactive elements; always apply at least `{rounded.md}` or `{rounded.lg}`. |
| Use `{components.divider}` with `{colors.outline}` to subtly partition sections without adding visual noise. | Do not mix multiple bright accent colors; stick to `{colors.primary}` to maintain the brand's focused developer aesthetic. |
| Use `{typography.body-md}` for standard paragraphs to ensure comfortable reading on `{colors.background}`. | Do not use `{typography.display-lg}` for standard body copy or secondary descriptions. |
| Apply `{components.input-field-focus}` to highlight active text inputs with `{colors.primary}` borders. | Do not leave active input fields without a distinct focus border, which breaks keyboard navigation. |
| Style secondary actions with `{components.button-secondary}` using `{colors.outline}` borders. | Do not stack multiple `{components.button-primary}` elements next to each other; use one primary and one secondary. |
| Use `{components.badge-success}` with `{colors.success}` to indicate active, positive, or completed states. | Do not use `{colors.error}` or `{colors.success}` for neutral metadata badges; use `{components.badge}` instead. |

## Content Style

CTA labels are action-oriented, direct, and developer-focused. Common examples include "Start free cloud trial" and "Contact sales". They avoid vague phrasing in favor of clear, immediate utility.

Headlines are authoritative, benefit-driven, and highly technical. They emphasize scale, speed, and performance metrics (e.g., "millisecond queries at petabyte scale") to build immediate credibility with engineers.

Copy density is scannable and concise. The layout utilizes bulleted lists, bold performance metrics, and clear feature cards to break up dense technical details, ensuring developers can extract key specifications quickly.

## Imagery & Icons

The visual system employs a mixed treatment that combines clean, flat vector illustrations for use cases with high-contrast, monochrome partner logos. This approach maintains a professional enterprise aesthetic while ensuring technical concepts are communicated clearly. Icons use minimal, precise geometric lines that align with the developer-centric tone of the brand.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for ClickHouse, a technical enterprise database brand with a minimal, dark-mode, developer-centric aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font weights.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or structural patterns the spec omits; surface the gap to the user instead.
3. Follow the Layout section for grid rhythm, section ordering (`nav → hero → social-proof → features → use-cases → footer`), and responsive breakpoints. Navigation collapses below 1024px; multi-column grids stack vertically on smaller viewports.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, placing multiple `{components.button-primary}` elements side by side — state the conflict before proceeding.
5. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) only at the tiers defined in Elevation & Depth. Never apply heavy shadows directly on `{colors.background}` without first establishing a `{colors.surface}` layer.

## Output contract

**Must:**
- Use token names for every color, type, spacing, radius, and shadow value.
- Implement hover, focus, and disabled states for all interactive components when the spec defines them — including `{components.button-primary-hover}` and `{components.input-field-focus}`.
- Apply `{motion.duration-medium}` and `{motion.easing-standard}` to all state transitions.
- Use `{colors.on-primary}` for any text rendered on `{colors.primary}` surfaces.
- Wrap all layouts in `{components.page-container}` to enforce the dark-mode canvas.

**Must NOT:**
- Invent colors, typefaces, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Use `{colors.primary}` for body text; reserve it for CTAs, accents, links, and focus borders.
- Use `{colors.error}` or `{colors.success}` for neutral metadata; use `{components.badge}` instead.
- Apply `{typography.display-lg}` outside a hero treatment.
- Rewrite page copy, button labels, headings, or navigation items, or alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}` for cards and `{colors.surface-container}` for nested or elevated containers.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence.
- For unspecified breakpoints, default to mobile-first with a single breakpoint at 1024px per the Layout section.