ClickHouse

Overview

ClickHouse's marketing surface is the highest-contrast interface in the database / data-platform category. The base atmosphere is **near-pure black canvas** (`{colors.canvas}` — #0a0a0a) with **electric yellow** (`{colors.primary}` — #faff69) as the singular brand voltage. The yellow handles every primary CTA, every stat-callout number, every "GET STARTED" badge — used scarcely on individual elements but generously on full-bleed yellow CTA cards. White typography in confident weight-700 sans-serif anchors the editorial body.

The yellow + black pairing is what makes ClickHouse instantly recognizable. Where Snowflake uses cool blue gradients and Databricks uses red + slate, ClickHouse leans hard into one electric yellow that does all the brand work. Code blocks, terminal output, and product UI fragments embed directly in dark `{colors.surface-card}` (#1a1a1a) cards across every page.

Type voice runs **Inter** at confident weights — 700 for display headlines (with negative letter-spacing -1 to -2.5px), 600 for sub-titles and buttons, 400 for body. The system has no display-serif counter-voice; everything is one geometric humanist sans, scaled and weighted for hierarchy.

**Key Characteristics:**

• Near-pure black canvas (`{colors.canvas}` — #0a0a0a) with white type. The system has no light-mode marketing surface.
• Electric yellow primary (`{colors.primary}` — #faff69). Used on primary CTAs, large stat-callout numbers ("2.8k+", "74k+"), and full-bleed yellow CTA bands.
• Inter at weight 700 for display, weight 600 for sub-titles + buttons, weight 400 for body. No serif counterpoint.
• Dark surface cards (`{colors.surface-card}` — #1a1a1a) for feature cards, code windows, and product mockups. Cards barely lighter than canvas — color-block contrast is subtle.
• Code blocks render in JetBrains Mono inside `{colors.surface-card}`. SQL syntax-highlighted in muted blues / yellows / grays.
• Stat numbers in yellow + sans-700 + huge size carry the credibility moment ("779+", "2.8k+", "47k+" community / contributor / star counts).
• Border radius is hierarchical: `{rounded.md}` (8px) for buttons, `{rounded.lg}` (12px) for content cards. No pill except in tag badges.
• Section rhythm `{spacing.section}` (96px) between major editorial bands.

Colors

Brand & Accent

• **Primary (Electric Yellow)** (`{colors.primary}` — #faff69): The signature brand color. All primary CTA backgrounds, large stat-callout numbers, full-bleed yellow CTA cards. The yellow is the brand.
• **Primary Active** (`{colors.primary-active}` — #e6eb52): Press / hover-darker variant.
• **Primary Disabled** (`{colors.primary-disabled}` — #3a3a1f): Desaturated dark-yellow on dark canvas.

Surface

• **Canvas** (`{colors.canvas}` — #0a0a0a): The default page floor. Near-pure black.
• **Surface Soft** (`{colors.surface-soft}` — #121212): Section dividers, very-soft band tints.
• **Surface Card** (`{colors.surface-card}` — #1a1a1a): Feature cards, code windows, product mockups, pricing tier cards.
• **Surface Elevated** (`{colors.surface-elevated}` — #242424): Nested cards inside larger dark cards.
• **Surface Yellow Band** (`{colors.surface-yellow-band}` — #faff69): The yellow CTA card / band fill — same hex as primary.
• **Hairline** (`{colors.hairline}` — #2a2a2a): 1px borders on cards.
• **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): Heavier divider on input underlines and emphasis.

Text

• **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text.
• **Body** (`{colors.body}` — #cccccc): Default running-text color.
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized paragraphs.
• **Muted** (`{colors.muted}` — #888888): Footer links, captions, breadcrumbs.
• **Muted Soft** (`{colors.muted-soft}` — #5a5a5a): Tertiary text — fine print.
• **On Primary / On Yellow** (`{colors.on-primary}` / `{colors.on-yellow}` — #0a0a0a): Black text on yellow CTAs and yellow CTA bands. The high-contrast yellow + black combo is the brand action signal.

Semantic / Accent

• **Accent Emerald** (`{colors.accent-emerald}` — #22c55e): Success states, "active" status indicators in product UI.
• **Accent Rose** (`{colors.accent-rose}` — #ef4444): Error states, "down" indicators.
• **Accent Blue** (`{colors.accent-blue}` — #3b82f6): Info states, code-syntax highlighting.

Typography

Font Family

The system runs **Inter** for everything — display, body, navigation, buttons, captions. **JetBrains Mono** handles code blocks. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.

The single-family approach is deliberate: Inter at weight 700 + 600 + 400 covers the entire hierarchy without needing a serif or display counter-voice. The geometric humanist character of Inter at confident bold weight gives ClickHouse a precise, engineered feel that matches the database's performance-first positioning.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 72px | 700 | 1.05 | -2.5px | Homepage h1 ("The leading database for AI") |

| `{typography.display-lg}` | 56px | 700 | 1.1 | -2px | Section heads |

| `{typography.display-md}` | 40px | 700 | 1.15 | -1.5px | Sub-section heads, CTA-band heads |

| `{typography.display-sm}` | 32px | 700 | 1.2 | -1px | Card titles, pricing tier prices |

| `{typography.title-lg}` | 24px | 700 | 1.3 | -0.3px | Pricing plan names, larger feature titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |

| `{typography.stat-display}` | 56px | 700 | 1.0 | -1.5px | Stat callouts ("779+", "47k+") — ALWAYS yellow |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |

| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |

| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |

| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, "NEW" badges |

| `{typography.code}` | 14px | 400 | 1.55 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |

Principles

Display weights stay at 700 across all sizes. Negative letter-spacing (-1 to -2.5px) is essential — Inter at weight 700 without negative tracking reads as too wide / Apple-marketing. The tightened tracking gives ClickHouse the precise, engineered feel.

Body and labels stay at weights 400 / 500 / 600. The hierarchy is built on size + weight, not on family contrast.

Note on Font Substitutes

Inter is open-source and the documented choice. **Söhne** is a close commercial alternative if licensed. **Geist** is another modern alternative.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** `{spacing.section}` (96px) between major bands.
• **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tiers; `{spacing.lg}` (24px) for code-window cards and event cards.

Grid & Container

• **Max content width:** ~1280px centered.
• **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, code mockup right).
• **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
• **Pricing grid:** 3-4 up at desktop, 1-up at mobile.

Whitespace Philosophy

ClickHouse uses dense, slightly-compressed whitespace appropriate for a developer-tooling brand — generous enough to read editorially, tight enough to feel "engineering-grade" rather than "marketing-soft." Section rhythm at 96px is standard; card internal padding stays at 32px for feature cards.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero |

| Soft hairline | 1px `{colors.hairline}` border | Code-window cards, content cards |

| Surface card | `{colors.surface-card}` background — no shadow | Feature cards, pricing tiers, event cards |

| Yellow band | `{colors.primary}` background — no shadow | Full-bleed yellow CTA cards / bands |

The system uses no drop shadows. Depth comes from the contrast between black canvas and `{colors.surface-card}` (a barely-lighter-than-canvas tone) — the contrast is subtle, more like an "engineering-grade dim panel" than an "elevated card."

Decorative Depth

• Code-window cards carry their own internal product chrome — line numbers, syntax highlighting, status bars at the bottom — adding visual density without external shadows.
• The yellow-on-black contrast does most of the elevation work for CTAs.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Reserved for badge accents |

| `{rounded.sm}` | 6px | Small inline buttons |

| `{rounded.md}` | 8px | Standard CTA buttons, text inputs |

| `{rounded.lg}` | 12px | Content cards, code-window cards, pricing tiers |

| `{rounded.pill}` | 9999px | Badge pills |

| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |

Components

Top Navigation

**`top-nav`** — Black nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the ClickHouse logo + wordmark at left, primary horizontal menu (Product, Use Cases, Pricing, Resources, Customers) center-left, right-side cluster with "Sign in" + "Get Started" `{component.button-primary}` (yellow). Menu items in `{typography.nav-link}` (Inter 14px / 500).

Buttons

**`button-primary`** — The signature yellow CTA. Background `{colors.primary}` (#faff69), text `{colors.on-primary}` (black), type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). The yellow + black combination is iconic.

**`button-secondary`** — Dark surface card button. Background `{colors.surface-card}`, text `{colors.on-dark}`, same shape as primary.

**`button-text-link`** — Inline text button, no background. Used for "Sign in" and inline link CTAs.

**`text-link`** — Inline body links in `{colors.primary}` (yellow on dark). Underlined.

**`button-icon-circular`** — 36 × 36 circular icon button on dark.

Cards & Containers

**`hero-band`** — Black-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, code-window or product mockup on the right. Vertical padding `{spacing.section}` (96px).

**`hero-stat-card`** — Yellow stat-display numbers ("779+", "47k+") inline on the canvas. No card surface — just yellow text in `{typography.stat-display}` (56px / 700).

**`feature-card-yellow`** — Full-bleed yellow card ("Built for every modern data challenge"). Background `{colors.primary}`, text `{colors.on-yellow}` (black), rounded `{rounded.lg}` (12px), padding `{spacing.xl}` (32px). The yellow card IS the visual emphasis.

**`feature-card-dark`** — Standard dark feature card. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).

**`code-window-card`** — Dark card showing a SQL code block. Background `{colors.surface-card}`, code in JetBrains Mono with syntax highlighting, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Often the hero's right-side artifact on developer-focused pages.

**`product-mockup-card`** — Card showing actual ClickHouse product UI (query editor, dashboard, monitoring panel). Same shape as `{component.feature-card-dark}` but with embedded product chrome inside.

**`pricing-tier-card`** — Standard tier card. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).

**`pricing-tier-card-featured`** — The featured tier flips to `{colors.primary}` (yellow). The yellow surface IS the featured signal.

**`stat-callout`** — Inline yellow stat numbers ("779+", "2.8k+", "47k+"). Transparent background, text `{colors.primary}`, type `{typography.stat-display}`. Used as a flat layout block, not a card with surface.

**`events-card`** — Used on /company/events. Dark card with event title, date in `{typography.caption-uppercase}`, location, and a "Register" CTA. Rounded `{rounded.lg}`, padding `{spacing.lg}`.

**`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `{colors.canvas}`, logos in `{colors.muted}`, vertical padding `{spacing.xl}` (32px).

Inputs & Forms

**`text-input`** — Dark text input. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px.

**`text-input-focused`** — Border thickens to `{colors.primary}` (yellow) for emphasis.

Tags / Badges

**`badge-pill`** — Small dark pill label. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.caption}`, rounded `{rounded.pill}`.

**`badge-yellow`** — Yellow pill for "NEW", "GET STARTED" emphasis. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`.

Tab / Filter

**`category-tab`** + **`category-tab-active`** — Dark tab navigation. Inactive: transparent + muted text. Active: surface-card background + on-dark text. Padding 8px × 14px, rounded `{rounded.md}`.

CTA / Footer

**`cta-band-yellow`** — A pre-footer "Deploy your way" CTA band. Full yellow fill, black type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-md}` and a CTA — usually a black-button on the yellow surface.

**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Product / Use Cases / Resources / Company. Vertical padding 64px. The ClickHouse wordmark sits at the top in `{colors.on-dark}`.

Do's and Don'ts

Do

• Anchor every page on the black canvas. The yellow + black pairing is the brand voltage.
• Reserve `{colors.primary}` (yellow) for primary CTAs, stat-callout numbers, and full-bleed yellow CTA bands. The yellow's scarcity at the element level + abundance at the band level is what makes it powerful.
• Use Inter at weight 700 for every display headline, with -1 to -2.5px letter-spacing.
• Show actual SQL code blocks inside `{component.code-window-card}` — ClickHouse is a database; show the query, don't paint marketing illustrations of queries.
• Use `{component.stat-callout}` numbers to establish credibility (community size, contributors, performance benchmarks). The yellow stat numbers are signature.
• Anchor every band with `{spacing.section}` (96px) vertical rhythm.

Don't

• Don't introduce a second brand color. ClickHouse is monochromatic + yellow.
• Don't bold display weight beyond 700 or use weight 500 for headlines. The hierarchy depends on size, not on weight gradation.
• Don't use yellow for body text or large surface fills outside of intentional yellow cards.
• Don't use rounded buttons / pills outside of small badges. The standard button radius is 8px (md).
• Don't repeat the same surface mode in two consecutive bands. Black canvas → dark feature card → yellow CTA card → black canvas → code-window card.
• Don't replace SQL code mockups with abstract illustrations. The code IS the marketing voltage.
• Don't add hover state styling beyond what the system already encodes.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 72→36px; code-window-card stacks below; feature grids 1-up; pricing 1-up |

| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |

| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-4 up pricing tiers |

| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |

Touch Targets

• `{component.button-primary}` at minimum 40 × 40px.
• `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44, visually centered.
• `{component.text-input}` height is 40px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px.
• Hero 7-5 grid → single-column on mobile.
• Feature card grids reduce columns rather than scaling.
• Code-window cards retain font-size; horizontal scroll inside the card on mobile.
• Pricing tier cards collapse 4 → 2 → 1; featured tier yellow stays distinct.

Image Behavior

• Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
• Customer logos in monochrome strip retain native widths; row wraps on mobile.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key (`{component.code-window-card}`, `{component.pricing-tier-card-featured}`).

2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries.

3. Use `{token.refs}` everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay Inter 700 with negative letter-spacing. Body stays Inter 400.

6. The yellow + black pairing is the brand contract. Don't soften with secondary accents.

7. When in doubt about emphasis: bigger Inter 700 before adding color.

Known Gaps

• The exact yellow hex (#faff69) was sampled from the screenshot; ClickHouse may publish an official brand color slightly differently.
• Inter weight axis values beyond 400 / 500 / 600 / 700 are not formalized — only the static weights observed are documented.
• Animation and transition timings (code typewriter effects, stat counter animations) are not in scope.
• Form validation states beyond `{component.text-input-focused}` are not extracted.
• The actual ClickHouse Cloud product surface (query console, monitoring dashboards, table browser) shares some tokens with the marketing site but adds many product-specific components that are out of scope.
• The customer logo strip's exact opacity / treatment varies — the muted gray is approximate.

개요

ClickHouse의 마케팅 표면은 데이터베이스/데이터 플랫폼 카테고리에서 가장 대비가 높은 인터페이스입니다. 기본 분위기는 **순수한 검정색 캔버스**(`{colors.canvas}` — #0a0a0a)이며 **일렉트릭 옐로우**(`{colors.primary}` — #faff69)는 단일 브랜드 전압입니다. 노란색은 모든 기본 CTA, 모든 통계 콜아웃 번호, 모든 "시작하기" 배지를 처리합니다. 개별 요소에는 거의 사용되지 않지만 전체 노란색 CTA 카드에는 넉넉하게 사용됩니다. 자신감 넘치는 Weight-700 산세리프체의 흰색 타이포그래피가 편집 본문을 고정시킵니다.

노란색 + 검정색 조합으로 인해 ClickHouse를 즉시 알아볼 수 있습니다. Snowflake는 멋진 파란색 그라데이션을 사용하고 Databricks는 빨간색 + 슬레이트를 사용하는 반면 ClickHouse는 모든 브랜드 작업을 수행하는 하나의 전기 노란색을 사용합니다. 코드 블록, 터미널 출력 및 제품 UI 조각은 모든 페이지의 어두운 `{colors.surface-card}`(#1a1a1a) 카드에 직접 포함됩니다.

Type voice는 **Inter**를 확실한 가중치로 실행합니다. 표시 헤드라인의 경우 700(음수 문자 간격 -1 ~ -2.5px), 하위 제목 및 버튼의 경우 600, 본문의 경우 400입니다. 시스템에는 디스플레이-세리프 반대 음성이 없습니다. 모든 것이 하나의 기하학적 인본주의적 산세이며, 계층 구조에 따라 크기가 조정되고 가중치가 적용됩니다.

**주요 특징:**

• 흰색 유형의 거의 순수한 검정색 캔버스(`{colors.canvas}` — #0a0a0a). 시스템에는 조명 모드 마케팅 표면이 없습니다.
• 전기 노란색 기본(`{colors.primary}` — #faff69). 기본 CTA, 큰 통계 설명선 번호('2.8k+', '74k+') 및 전체 노란색 CTA 밴드에 사용됩니다.
• 디스플레이의 무게는 700, 자막 + 버튼의 무게는 600, 본문의 무게는 400입니다. 세리프 대위법이 없습니다.
• 기능 카드, 코드 창 및 제품 모형을 위한 어두운 표면 카드(`{colors.surface-card}` — #1a1a1a). 카드는 캔버스보다 거의 가볍습니다. 컬러 블록 대비가 미묘합니다.
• 코드 블록은 `{colors.surface-card}` 내부의 JetBrains Mono에서 렌더링됩니다. 음소거된 파란색/노란색/회색으로 강조 표시된 SQL 구문.
• 노란색 + sans-700 + 거대한 크기의 통계 번호는 신뢰성의 순간을 전달합니다("779+", "2.8k+", "47k+" 커뮤니티/기고자/별 개수).
• 테두리 반경은 계층적입니다. 버튼의 경우 `{rounded.md}`(8px), 콘텐츠 카드의 경우 `{rounded.lg}`(12px)입니다. 태그 배지를 제외하고는 알약이 없습니다.
• 주요 편집 밴드 사이의 섹션 리듬 `{spacing.section}`(96px).

색상

브랜드 및 액센트

• **Primary (Electric Yellow)** (`{colors.primary}` — #faff69): 시그니처 브랜드 색상입니다. 모든 기본 CTA 배경, 큰 통계 설명선 번호, 전체 노란색 CTA 카드. 노란색은 브랜드입니다.
• **기본 활성**(`{colors.primary-active}` — #e6eb52): / hover-darker 변형을 누릅니다.
• **기본 비활성화됨** (`{colors.primary-disabled}` — #3a3a1f): 어두운 캔버스에서 채도가 낮은 진한 노란색입니다.

표면

• **캔버스** (`{colors.canvas}` — #0a0a0a): 기본 페이지 바닥입니다. 거의 순수한 검정색입니다.
• **부드러운 표면** (`{colors.surface-soft}` — #121212): 섹션 구분선, 매우 부드러운 밴드 색조.
• **Surface 카드**(`{colors.surface-card}` — #1a1a1a): 기능 카드, 코드 창, 제품 모형, 가격 등급 카드.
• **Surface Elevated** (`{colors.surface-elevated}` — #242424): 더 큰 어두운 카드 안에 중첩된 카드입니다.
• **표면 노란색 밴드** (`{colors.surface-yellow-band}` — #faff69): 노란색 CTA 카드/밴드 채우기 — 기본과 동일한 16진수입니다.
• **헤어라인** (`{colors.hairline}` — #2a2a2a): 카드의 테두리 1px.
• **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): 입력 밑줄과 강조에 대한 더 무거운 구분선입니다.

텍스트

• **Ink / On Dark** (`{colors.on-dark}` — #ffffff): 모든 헤드라인 및 기본 텍스트.
• **본문**(`{colors.body}` — #cccccc): 기본 실행 텍스트 색상입니다.
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): 강조된 단락입니다.
• **음소거됨** (`{colors.muted}` — #888888): 바닥글 링크, 캡션, 탐색경로.
• **음소거 소프트**(`{colors.muted-soft}` — #5a5a5a): 3차 텍스트 — 작은 글씨.
• **On Primary / On Yellow** (`{colors.on-primary}` / `{colors.on-yellow}` — #0a0a0a): 노란색 CTA 및 노란색 CTA 밴드에 검정색 텍스트. 고대비 노란색 + 검정색 조합은 브랜드 액션 신호입니다.

의미/악센트

• **Accent Emerald** (`{colors.accent-emerald}` — #22c55e): 성공 상태, 제품 UI의 "활성" 상태 표시기.
• **Accent Rose** (`{colors.accent-rose}` — #ef4444): 오류 상태, "다운" 표시기.
• **Accent Blue** (`{colors.accent-blue}` — #3b82f6): 정보 상태, 코드 구문 강조.

타이포그래피

글꼴 계열

시스템은 디스플레이, 본문, 탐색, 버튼, 캡션 등 모든 항목에 대해 **Inter**를 실행합니다. **JetBrains Mono**는 코드 블록을 처리합니다. 대체 스택은 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`를 실행합니다.

단일 패밀리 접근 방식은 의도적입니다. 가중치 700 + 600 + 400의 Inter는 세리프나 디스플레이 카운터 보이스가 필요 없이 전체 계층 구조를 포괄합니다. 자신감 있고 대담한 무게감을 지닌 Inter의 기하학적 인본주의적 캐릭터는 ClickHouse에 데이터베이스와 어울리는 정확하고 공학적인 느낌을 줍니다.

概要

ClickHouse のマーケティング サーフェスは、データベース/データ プラットフォーム カテゴリで最もコントラストの高いインターフェイスです。基本的な雰囲気は、**ほぼ純粋な黒のキャンバス** (`{colors.canvas}` — #0a0a0a) であり、特異なブランド ボルテージとして **エレクトリック イエロー** (`{colors.primary}` — #faff69) を備えています。黄色は、すべての主要な CTA、すべての統計コールアウト番号、すべての「GET STARTED」バッジを処理します。個々の要素ではほとんど使用されませんが、フルブリードの黄色の CTA カードでは惜しみなく使用されます。自信に満ちた 700 ウェイトのサンセリフの白いタイポグラフィーが編集本文を強調しています。

黄色と黒の組み合わせにより、ClickHouse はすぐに認識できます。 Snowflake がクールな青のグラデーションを使用し、Databricks が赤 + スレートを使用しているのに対し、ClickHouse はブランドのすべての仕事を行う 1 つの電気的な黄色に重点を置いています。コード ブロック、ターミナル出力、製品 UI フラグメントは、すべてのページの暗い `{colors.surface-card}` (#1a1a1a) カードに直接埋め込まれます。

タイプ音声は、信頼できる重みで **Inter** を実行します。表示見出し (負の文字間隔 -1 ～ -2.5px) の場合は 700、サブタイトルとボタンの場合は 600、本文の場合は 400 です。このシステムにはディスプレイセリフのカウンターボイスはありません。すべては、階層に応じてスケールされ、重み付けされた、幾何学的なヒューマニストです。

**主な特徴:**

• ほぼ純黒のキャンバス (`{colors.canvas}` — #0a0a0a) と白のタイプ。このシステムにはライトモードのマーケティング面はありません。
• エレクトリックイエローの原色 (`{colors.primary}` — #faff69)。プライマリ CTA、大きな統計コールアウト番号 (「2.8k+」、「74k+」)、およびフルブリードの黄色の CTA バンドで使用されます。
• ディスプレイの重み 700、字幕 + ボタンの重み 600、本体の重み 400 のインター。セリフの対位法はありません。
• フィーチャー カード、コード ウィンドウ、製品モックアップ用のダーク サーフェス カード (`{colors.surface-card}` — #1a1a1a)。カードはキャンバスよりもわずかに軽いため、カラーブロックのコントラストは微妙です。
• コードブロックは「{colors.surface-card}」内の JetBrains Mono でレンダリングされます。 SQL 構文は、落ち着いた青/黄色/グレーで強調表示されます。
• 黄色 + sans-700 + 巨大なサイズの統計数値は、信頼性の瞬間を表します (「779+」、「2.8k+」、「47k+」コミュニティ / 貢献者 / スター数)。
• 境界線の半径は階層的です: ボタンの場合は `{rounded.md}` (8px)、コンテンツ カードの場合は `{rounded.lg}` (12px) です。タグバッジ以外に毛玉はありません。
• 主要な編集バンド間のセクション リズム `{spacing.section}` (96px)。

色

ブランドとアクセント

• **プライマリー (エレクトリックイエロー)** (`{colors.primary}` — #faff69): ブランドの特徴的な色。すべての主要な CTA 背景、大きな統計コールアウト番号、フルブリードの黄色の CTA カード。黄色がブランドです。
• **プライマリ アクティブ** (`{colors.primary-active}` — #e6eb52): プレス / ホバーで暗いバージョン。
• **プライマリ無効** (`{colors.primary-disabled}` — #3a3a1f): 暗いキャンバス上の彩度の低い濃い黄色。

表面

• **キャンバス** (`{colors.canvas}` — #0a0a0a): デフォルトのページフロア。ほぼ真っ黒。
• **Surface Soft** (`{colors.surface-soft}` — #121212): セクション分割線、非常にソフトなバンドの色合い。
• **Surface カード** (`{colors.surface-card}` — #1a1a1a): フィーチャー カード、コード ウィンドウ、製品モックアップ、価格帯カード。
• **Surface Elevated** (`{colors.surface-elevated}` — #242424): 大きな暗いカードの中に入れ子になったカード。
• **Surface Yellow Band** (`{colors.surface- yellow-band}` — #faff69): 黄色の CTA カード/バンド塗りつぶし — プライマリと同じヘクス。
• **ヘアライン** (`{colors.hairline}` — #2a2a2a): カード上の 1 ピクセルの境界線。
• **ヘアライン ストロング** (`{colors.hairline-strong}` — #3a3a3a): 入力下線と強調の分割線を太くしました。

テキスト

• **インク / オン ダーク** (`{colors.on-dark}` — #ffffff): すべての見出しと主要テキスト。
• **Body** (`{colors.body}` — #cccccc): デフォルトの実行テキストの色。
• **Body Strong** (`{colors.body-strong}` — #e6e6e6): 段落を強調しました。
• **ミュート** (`{colors.muted}` — #888888): フッター リンク、キャプション、パンくずリスト。
• **ミュート ソフト** (`{colors.muted-soft}` — #5a5a5a): 三次テキスト — 細字。
• **プライマリ上 / イエロー上** (`{colors.on-primary}` / `{colors.on- yellow}` — #0a0a0a): 黄色の CTA および黄色の CTA バンドに黒いテキスト。ハイコントラストの黄色と黒の組み合わせは、ブランドのアクションシグナルです。

意味/アクセント

• **アクセント エメラルド** (`{colors.accent-emerald}` — #22c55e): 成功状態、製品 UI の「アクティブ」ステータス インジケーター。
• **アクセント ローズ** (`{colors.accent-rose}` — #ef4444): エラー状態、「ダウン」インジケーター。
• **アクセント ブルー** (`{colors.accent-blue}` — #3b82f6): 情報の状態、コード構文の強調表示。

タイポグラフィー

フォントファミリー

システムは、ディスプレイ、本文、ナビゲーション、ボタン、キャプションなど、すべてに対して **Inter** を実行します。 **JetBrains Mono** はコード ブロックを処理します。フォールバック スタックは、`-apple-system、BlinkMacSystemFont、"Segoe UI"、Roboto、sans-serif` を歩きます。

シングルファミリーのアプローチは意図的です。重み 700 + 600 + 400 の Inter は、セリフやディスプレイのカウンターボイスを必要とせずに階層全体をカバーします。自信に満ちた大胆な重みを備えた Inter の幾何学的なヒューマニストの特徴が、ClickHouse にデータベースにマッチする正確で設計された感触を与えます。