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

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

• **기본(전기 노란색)** (`` — #faff69): 시그니처 브랜드 색상입니다. 모든 기본 CTA 배경, 큰 통계 설명선 번호, 전체 노란색 CTA 카드. 노란색이 브랜드입니다.
• **기본 활성**(`` — #e6eb52): 누르기/호버-더 어두운 변형.
• **기본 비활성화**(`` — #3a3a1f): 어두운 캔버스에 채도가 낮은 진한 노란색.

표면

• **캔버스** (`` — #0a0a0a): 기본 페이지 바닥입니다. 거의 순수한 검정색입니다.
• **부드러운 표면**(`` — #121212): 섹션 구분선, 매우 부드러운 밴드 색조.
• **표면 카드**(`` — #1a1a1a): 기능 카드, 코드 창, 제품 모형, 가격 책정 계층 카드.
• **높은 표면**(`` — #242424): 더 크고 어두운 카드 안에 중첩된 카드입니다.
• **표면 노란색 밴드** (`` — #faff69): 노란색 CTA 카드/밴드 채우기 — 기본과 동일한 16진수입니다.
• **가는 선** (`` — #2a2a2a): 카드의 1px 테두리.
• **가는 선 강함** (`` — #3a3a3a): 입력 밑줄과 강조에 대한 더 무거운 구분선.

텍스트

• **잉크/어두운 색**(`` — #ffffff): 모든 헤드라인 및 기본 텍스트.
• **본문**(`` — #cccccc): 기본 실행 텍스트 색상.
• **Body Strong** (`` — #e6e6e6): 강조된 단락.
• **음소거됨**(`` — #888888): 바닥글 링크, 캡션, 탐색경로.
• **음소거 소프트**(`` — #5a5a5a): 3차 텍스트 — 작은 글씨.
• **기본/노란색**(`` / `` — #0a0a0a): 노란색 CTA 및 노란색 CTA 밴드의 검정색 텍스트. 고대비 노란색 + 검정색 조합은 브랜드 행동 신호입니다.

의미/악센트

• **액센트 에메랄드**(`` — #22c55e): 성공 상태, 제품 UI의 "활성" 상태 표시기.
• **액센트 로즈**(`` — #ef4444): 오류 상태, "다운" 표시기.
• **액센트 블루**(`` — #3b82f6): 정보 상태, 코드 구문 강조.

타이포그래피

글꼴군

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

이동합니다.

단일 패밀리 접근 방식은 의도적입니다. 가중치 700 + 600 + 400의 Inter는 세리프나 반대 목소리를 표시할 필요 없이 전체 계층 구조를 포괄합니다. 자신감 있고 대담한 무게감을 지닌 Inter의 기하학적 인본주의적 캐릭터는 ClickHouse에 데이터베이스의 성능 우선 포지셔닝과 일치하는 정확하고 공학적인 느낌을 줍니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 72px | 700 | 1.05 | -2.5px | 홈페이지 h1 ("AI를 위한 선도적인 데이터베이스") |

| _`` | 56px | 700 | 1.1 | -2px | 섹션 헤드 |

| _`` | 40px | 700 | 1.15 | -1.5px | 하위 섹션 헤드, CTA 밴드 헤드 |

| _`` | 32px | 700 | 1.2 | -1픽셀 | 카드 제목, 가격 등급 가격 |

| _`` | 24px | 700 | 1.3 | -0.3px | 가격 계획 이름, 더 큰 기능 제목 |

| _`` | 18px | 600 | 1.4 | 0 | 카드 제목, 소개 단락 |

| _`` | 16px | 600 | 1.4 | 0 | 작은 카드 제목, 목록 라벨 |

| _`` | 56px | 700 | 1.0 | -1.5px | 통계 콜아웃("779+", "47k+") — 항상 노란색 |

| _`` | 16px | 400 | 1.55 | 0 | 기본 실행 텍스트 |

| _`` | 14px | 400 | 1.55 | 0 | 바닥글 본문, 작은 글씨 |

| _`` | 13px | 500 | 1.4 | 0 | 배지 라벨, 캡션 |

| _`` | 12px | 600 | 1.4 | 1.5픽셀 | 섹션 라벨, 'NEW' 배지 |

| _`` | 14px | 400 | 1.55 | 0 | 코드 블록 — JetBrains Mono |

| _`` | 14px | 600 | 1.0 | 0 | 표준 버튼 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 항목 |

원칙

디스플레이 가중치는 모든 크기에서 700으로 유지됩니다. 음수 문자 간격(-1 ~ -2.5px)은 필수입니다. 음수 추적이 없는 Inter의 무게 700은 너무 넓습니다/Apple 마케팅으로 읽힙니다. 강화된 추적 기능은 ClickHouse에 정확하고 공학적인 느낌을 줍니다.

본문과 라벨의 가중치는 400/500/600입니다. 계층 구조는 계열 대비가 아닌 크기 + 무게를 기준으로 구성됩니다.

글꼴 대체에 대한 참고사항

Inter는 오픈 소스이며 문서화된 선택입니다. **Söhne**은 라이선스가 있는 경우 상업적인 대안이 됩니다. **Geist**는 또 다른 현대적인 대안입니다.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** ``(96px) 주요 밴드 사이.
• **카드 내부 패딩:** 기능 카드, 가격 등급의 경우 ``(32px); ``(24px) 코드 창 카드 및 이벤트 카드용.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 중앙 중심 ~1280px.
• **편집 본문:** 단일 12열 그리드; Hero는 종종 7/5 분할(왼쪽 h1, 오른쪽 코드 모형)을 사용합니다.
• **기능 카드 그리드:** 데스크톱에서 3업, 태블릿에서 2업, 모바일에서 1업.
• **가격표:** 데스크톱에서는 3~4위, 모바일에서는 1위입니다.

공백 철학

ClickHouse는 개발자 도구 브랜드에 적합한 조밀하고 약간 압축된 공백을 사용합니다. 이는 편집 내용을 읽을 수 있을 만큼 넉넉하고 "소프트 마케팅"보다는 "엔지니어링 수준"을 느낄 수 있을 만큼 촘촘합니다. 96px의 섹션 리듬이 표준입니다. 기능 카드의 경우 카드 내부 패딩은 32px로 유지됩니다.

고도 및 깊이

| 레벨 | 치료 | Use |

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문 섹션, 상단 탐색, 히어로 |

| 부드러운 헤어라인 | 1px `` 테두리 | 코드 창 카드, 콘텐츠 카드 |

| 표면 카드 | `` 배경 - 그림자 없음 | 기능 카드, 가격 책정 계층, 이벤트 카드 |

| 노란색 밴드 | `` 배경 — 그림자 없음 | 풀블리드 노란색 CTA 카드/밴드 |

시스템은 그림자를 사용하지 않습니다. 깊이는 검은색 캔버스와 ``(캔버스보다 거의 가벼운 톤) 사이의 대비에서 비롯됩니다. 대비는 미묘하여 '높은 카드'라기보다는 '엔지니어링 수준의 희미한 패널'에 더 가깝습니다.

장식적 깊이

• 코드 창 카드에는 자체 내부 제품 크롬(줄 번호, 구문 강조, 하단 상태 표시줄)이 있어 외부 그림자 없이 시각적 밀도를 추가합니다.
• 검은색 바탕의 노란색 대비는 CTA에 대한 대부분의 엘리베이션 작업을 수행합니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 배지 악센트용으로 예약됨 |

| _`` | 6픽셀 | 작은 인라인 버튼 |

| _`` | 8픽셀 | 표준 CTA 버튼, 텍스트 입력 |

| _`` | 12px | 콘텐츠 카드, 코드 창 카드, 가격 책정 계층 |

| _`` | 9999px | 배지 알약 |

| _`` | 9999px / 50% | 아바타, 아이콘 버튼 |

구성요소

상단 탐색

**`top-nav`** — 상단에 고정된 검은색 탐색 모음. 높이 64px, `` 배경. 왼쪽에 ClickHouse 로고 + 워드마크가 있고, 기본 수평 메뉴(제품, 사용 사례, 가격, 리소스, 고객)는 중앙 왼쪽, 오른쪽 클러스터에는 "로그인" + "시작하기" ``(노란색)이 있습니다. ``(Inter 14px / 500).

의 메뉴 항목

버튼

**`button-primary`** — 시그니처 노란색 CTA입니다. 배경 ``(#faff69), 텍스트 ``(검은색), 유형 ``(Inter 14px/600), 패딩 12px × 20px, 높이 40px, 반올림 ``(8px). 노란색 + 검정색 조합이 상징적입니다.

**`button-secondary`** — 어두운 표면 카드 버튼. 배경 ``, 텍스트 ``, 기본과 동일한 모양.

**`button-text-link`** — 인라인 텍스트 버튼, 배경 없음. "로그인" 및 인라인 링크 CTA에 사용됩니다.

**`text-link`** — ``의 인라인 본문 링크(어두운 바탕에 노란색). 밑줄이 그어져 있습니다.

**`button-icon-circular`** — 어두운 색상의 36 × 36 원형 아이콘 버튼.

카드 및 용기

_**`hero-band`** — 7-5 그리드가 있는 검은색 캔버스 히어로: h1 + 하위 헤드라인 + 왼쪽의 버튼 행, 오른쪽의 코드 창 또는 제품 모형. 수직 패딩 `` (96px).

_**`hero-stat-card`** — 캔버스에 노란색 통계 표시 숫자("779+", "47k+")가 인라인으로 표시됩니다. 카드 표면 없음 - ``(56px / 700).

의 노란색 텍스트만 있음

**`feature-card-yellow`** — 풀 블리드 옐로 카드("모든 최신 데이터 문제를 위해 제작됨"). 배경 ``, 텍스트 ``(검은색), 둥근 ``(12px), 패딩 ``(32px). 노란색 카드는 시각적 강조점입니다.

**`feature-card-dark`** — 표준 다크 기능 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``(32px).

**`code-window-card`** — SQL 코드 블록을 표시하는 어두운 카드입니다. 배경 ``, 구문 강조가 포함된 JetBrains Mono의 코드, 반올림 ``, 패딩 ``(24px). 개발자 중심 페이지에서 영웅의 오른쪽 아티팩트가 나타나는 경우가 많습니다.

_**`product-mockup-card`** — 실제 ClickHouse 제품 UI(쿼리 편집기, 대시보드, 모니터링 패널)를 보여주는 카드입니다. ``과 모양은 동일하지만 내부에 제품 크롬이 내장되어 있습니다.

**`pricing-tier-card`** — 표준 등급 카드. 배경 ``, 둥근 ``, 패딩 ``(32px).

_**`pricing-tier-card-featured`** — 추천 계층이 ``(노란색)으로 변경됩니다. 노란색 표면은 주요 신호입니다.

_**`stat-callout`** — 인라인 노란색 통계 번호("779+", "2.8k+", "47k+"). 투명한 배경, 텍스트 ``, ``을 입력하세요. 표면이 있는 카드가 아닌 평면 레이아웃 블록으로 사용됩니다.

**`events-card`** — /company/events에 사용됩니다. 이벤트 제목, 날짜(``), 위치, '등록' CTA가 포함된 어두운 카드입니다. 반올림 ``, 패딩 ``.

**`customer-logo-strip`** — 가로 흑백 고객 로고 스트립. 배경 ``, 로고 ``, 세로 패딩 ``(32px).

입력 및 양식

**`text-input`** — 어두운 텍스트 입력. 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 10px × 14px, 높이 40px.

**`text-input-focused`** — 강조를 위해 테두리가 ``(노란색)으로 두꺼워집니다.

태그/배지

_**`badge-pill`** — 작고 어두운 알약 라벨. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``.

**`badge-yellow`** — "NEW", "GET STARTED" 강조를 의미하는 노란색 알약입니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``.

탭/필터

**`category-tab`** + **`category-tab-active`** — 어두운 탭 탐색. 비활성: 투명 + 음소거된 텍스트. 활성: 표면 카드 배경 + 어두운 텍스트. 패딩 8px × 14px, 반올림 ``.

CTA/바닥글

**`cta-band-yellow`** — 바닥글 앞부분의 '자신만의 방식으로 배포' CTA 밴드입니다. 전체 노란색 채우기, 검정색 유형, 둥근 ``, 패딩 64px. ``에 h2와 CTA를 전달합니다. 일반적으로 노란색 표면에 검은색 버튼이 있습니다.

**`footer`** — 모든 페이지를 닫는 검은색 바닥글입니다. 배경 ``, 텍스트 ``. 제품/사용 사례/자원/회사를 다루는 데스크탑의 4열 링크 목록입니다. 수직 패딩 64px. ClickHouse 워드마크는 ``.

의 상단에 있습니다.

해야 할 일과 하지 말아야 할 일

하세요

• 모든 페이지를 검은색 캔버스에 고정하세요. 노란색 + 검정색 페어링은 브랜드 전압입니다.
• 기본 CTA, 통계 콜아웃 번호 및 풀 블리드 노란색 CTA 밴드용으로 ``(노란색)을 예약하세요. 노란색은 요소 수준에서는 희소하고 밴드 수준에서는 풍부하기 때문에 강력합니다.
• 모든 디스플레이 헤드라인에 대해 가중치 700의 Inter를 사용하고 문자 간격은 -1~-2.5px입니다.
• 내부에 실제 SQL 코드 블록 표시 `` — ClickHouse는 데이터베이스입니다. 검색어를 표시하고 검색어에 대한 마케팅 예시를 그리지 마십시오.
• 신뢰도를 구축하려면 `` 숫자를 사용하세요(커뮤니티 규모, 기여자, 성능 벤치마크). 노란색 통계 번호는 서명입니다.
• ``(96px) 수직 리듬으로 모든 밴드를 고정하세요.

하지 마세요

• 두 번째 브랜드 색상을 소개하지 마세요. 클릭하우스는 단색 + 노란색입니다.
• 표시 가중치를 700 이상으로 굵게 표시하거나 헤드라인에 가중치 500을 사용하지 마세요. 계층 구조는 무게 등급이 아니라 크기에 따라 다릅니다.
• 본문 텍스트나 의도적인 노란색 카드 이외의 큰 표면 채우기에는 노란색을 사용하지 마세요.
• 작은 배지 외부에 둥근 버튼/알약을 사용하지 마세요. 표준 버튼 반경은 8픽셀(md)입니다.
• 두 개의 연속 밴드에서 동일한 표면 모드를 반복하지 마십시오. 검은색 캔버스 → 어두운 기능 카드 → 노란색 CTA 카드 → 검은색 캔버스 → 코드 창 카드.
• SQL 코드 모형을 추상적인 그림으로 대체하지 마세요. 코드는 마케팅 전압입니다.
• 시스템이 이미 인코딩한 것 이상으로 마우스 오버 상태 스타일을 추가하지 마세요.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

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

| 태블릿 | 768~1024px | 상단 탐색이 강화됩니다. 기능 카드 2개; 2업 가격 |

| 데스크탑 | 1024~1440px | 전체 상단 탐색; 3업 기능 카드; 3~4단계 가격 책정 |

| 와이드 | > 1440px | 더 많은 호흡 공간을 갖춘 데스크탑과 동일합니다. 최대 콘텐츠 1280px |

터치 대상

• `` 최소 40 × 40px.
• `` 정확히 36 × 36 — WCAG 44보다 약간 아래, 시각적으로 중앙에 위치.
• `` 높이는 40픽셀입니다.

축소 전략

• 상단 탐색 메뉴가 < 768px.
의 햄버거로 접힙니다.
• Hero 7-5 그리드 → 모바일의 단일 열.
• 기능 카드 그리드는 크기를 조정하는 대신 열을 줄입니다.
• 코드 창 카드는 글꼴 크기를 유지합니다. 모바일에서 카드 내부의 가로 스크롤입니다.
• 가격 등급 카드 축소 4 → 2 → 1; 추천 계층 노란색은 뚜렷하게 유지됩니다.

이미지 동작

• 어두운 모형 내부의 코드 블록은 고정된 글꼴 크기로 유지됩니다. 줄 바꿈이 아닌 모바일에서 가로 스크롤.
• 단색 스트립의 고객 로고는 기본 너비를 유지합니다. 모바일에서는 행이 줄바꿈됩니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키(``, ``)를 참조합니다.

2. 기존 구성 요소의 변형(`-active`, `-disabled`, `-focused`)은 별도의 항목으로 표시됩니다.

3. 어디에서나 __CODEBCK_709___을 사용하세요. 16진수 인라인은 사용하지 마세요.

4. 문서에 마우스를 올리지 마세요. 기본 및 활성/누름 상태만 해당됩니다.

5. 디스플레이 헤드라인은 음수 문자 간격으로 Inter 700을 유지합니다. 바디 스테이 인터 400.

6. 노란색 + 검정색 페어링은 브랜드 계약입니다. 보조 악센트로 부드럽게 표현하지 마세요.

7. 강조가 의심스러운 경우: 색상을 추가하기 전에 Inter 700을 더 크게 설정하세요.

알려진 격차

• 정확한 노란색 16진수(#faff69)는 스크린샷에서 샘플링되었습니다. ClickHouse는 공식 브랜드 색상을 약간 다르게 게시할 수 있습니다.
• 400/500/600/700을 초과하는 중량 축 간 값은 공식화되지 않습니다. 관찰된 정적 중량만 문서화됩니다.
• 애니메이션 및 전환 타이밍(코드 타자기 효과, 통계 카운터 애니메이션)은 범위에 포함되지 않습니다.
• `` 이후의 양식 유효성 검사 상태는 추출되지 않습니다.
• 실제 ClickHouse Cloud 제품 표면(쿼리 콘솔, 모니터링 대시보드, 테이블 브라우저)은 마케팅 사이트와 일부 토큰을 공유하지만 범위를 벗어나는 많은 제품별 구성 요소를 추가합니다.
• 고객 로고 스트립의 정확한 불투명도/처리는 다양합니다. 음소거된 회색은 대략적인 것입니다.

概要

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

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

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

**主な特徴:**

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

色

ブランドとアクセント_

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

サーフェス

• **キャンバス** (`` — #0a0a0a): デフォルトのページフロア。 ほぼ純粋な黒。
• **Surface Soft** (`` — #121212): セクション分割線、非常にソフトなバンドの色合い。
• **サーフェス カード** (`` — #1a1a1a): フィーチャー カード、コード ウィンドウ、製品モックアップ、価格帯カード。
• **表面昇格** (`` — #242424): 大きなダーク カード内にネストされたカード。
• **表面の黄色のバンド** (`` — #faff69): 黄色の CTA カード/バンド塗りつぶし — プライマリと同じヘックス。
• **ヘアライン** (`` — #2a2a2a): カード上の 1 ピクセルの境界線。
• _**ヘアライン ストロング** (`` — #3a3a3a): 入力の下線と強調の分割線が太くなっています。

テキスト

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

セマンティック / アクセント

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

タイポグラフィ

フォント ファミリー

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

を歩きます

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

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 72ピクセル | 700 | 1.05 | -2.5ピクセル |ホームページ h1 (「AI の主要なデータベース」) |

| `` | 56ピクセル | 700 | 1.1 | -2ピクセル |セクションヘッド |

| `` | 40ピクセル | 700 | 1.15 | -1.5ピクセル |サブセクションの責任者、CTA バンドの責任者 |

| `` | 32ピクセル | 700 | 1.2 | -1ピクセル |カード タイトル、価格帯の価格 |

| `` | 24ピクセル | 700 | 1.3 | -0.3ピクセル |価格プラン名、大きな機能タイトル |

| `` | 18ピクセル | 600 | 1.4 | 0 |カードのタイトル、紹介文 |

| `` | 16ピクセル | 600 | 1.4 | 0 |小さなカード タイトル、リスト ラベル |

| `` | 56ピクセル | 700 | 1.0 | -1.5ピクセル |統計コールアウト (「779+」、「47k+」) — 常に黄色 |

| `` | 16ピクセル | 400 | 1.55 | 0 |デフォルトの実行テキスト |

| `` | 14ピクセル | 400 | 1.55 | 0 |フッター本文、細字 |

| `` | 13ピクセル | 500 | 1.4 | 0 |バッジのラベル、キャプション |

| `` | 12ピクセル | 600 | 1.4 | 1.5ピクセル |セクション ラベル、「NEW」バッジ |

| `` | 14ピクセル | 400 | 1.55 | 0 |コードブロック — JetBrains Mono |

| `` | 14ピクセル | 600 | 1.0 | 0 |標準のボタン ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー項目 |

原則

_表示ウェイトはすべてのサイズで 700 のままです。負の文字間隔 (-1 ～ -2.5px) が重要です。負のトラッキングなしのウェイト 700 のインテルは広すぎると読み取られます / Apple マーケティング。強化されたトラッキングにより、ClickHouse に正確でエンジニアリングされた感触が与えられます。

ボディとラベルはウェイト 400 / 500 / 600 のままです。階層は、ファミリーのコントラストではなく、サイズとウェイトに基づいて構築されます。

フォントの代替に関する注意

Inter はオープンソースであり、文書化された選択肢です。 **Söhne** は、ライセンスがあれば商用に近い代替品です。 **Geist** は、もう 1 つの現代的な代替案です。

レイアウト

間隔システム_

• **基本単位:** 4px.
• _**トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング:** メジャー バンド間の_`` (96 ピクセル)。
• **カードの内部パディング:** フィーチャー カード、価格帯の場合は `` (32 ピクセル)。コード ウィンドウ カードおよびイベント カードの場合は `` (24 ピクセル)。

グリッドとコンテナ

• **コンテンツの最大幅:** 中央に最大 1280 ピクセル。
• _**編集本文:** 単一の 12 列グリッド。ヒーローは 7/5 分割 (左に h1、右にコード モックアップ) をよく使用します。
• **フィーチャー カード グリッド:** デスクトップでは 3 アップ、タブレットでは 2 アップ、モバイルでは 1 アップ。
• **価格グリッド:** デスクトップでは 3 ～ 4 アップ、モバイルでは 1 アップ。

ホワイトスペースの哲学

ClickHouse は、開発者ツール ブランドに適した、高密度でわずかに圧縮されたホワイトスペースを使用しています。編集的に読むのに十分な広さと、「マーケティング ソフト」ではなく「エンジニアリング グレード」と感じるのに十分なタイトさがあります。 96pxのセクションリズムが標準です。フィーチャー カードのカード内部パディングは 32 ピクセルのままです。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |本文セクション、トップ ナビゲーション、ヒーロー |

|柔らかいヘアライン | 1px `` 境界線 |コード ウィンドウ カード、コンテンツ カード |

|表面カード | `` 背景 — 影なし |機能カード、価格帯、イベント カード |

|黄色のバンド | `` 背景 - 影なし |フルブリードの黄色の CTA カード/バンド |

システムではドロップ シャドウを使用しません。奥行きは、黒いキャンバスと `` (キャンバスよりもわずかに明るいトーン) とのコントラストから生まれます。コントラストは微妙で、「高貴なカード」というよりも「エンジニアリング グレードの薄暗いパネル」に似ています。

装飾の深さ

• コード ウィンドウ カードには、行番号、構文の強調表示、下部のステータス バーなど、独自の内部製品クロームが組み込まれており、外部の影のない視覚的な密度が追加されます。
• CTA のエレベーション作業のほとんどは、黄色と黒のコントラストによって行われます。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |バッジのアクセント用に予約 |

| `` | 6ピクセル |小さなインライン ボタン |

| `` | 8ピクセル |標準 CTA ボタン、テキスト入力 |

| `` | 12ピクセル |コンテンツ カード、コード ウィンドウ カード、価格帯 |

| `` | 9999ピクセル |バッジの錠剤 |

| `` | 9999ピクセル / 50% |アバター、アイコン ボタン |

コンポーネント

トップナビゲーション

**`top-nav`** — 上部に固定された黒いナビゲーション バー。高さ 64 ピクセル、__CODEBCK_619___ 背景。 左側に ClickHouse のロゴとワードマークが表示され、メインの水平メニュー (製品、ユースケース、価格設定、リソース、顧客) が中央左、右側のクラスターに「サインイン」 + 「開始」__CODEBCK_620___ (黄色) が表示されます。 `` (Inter 14px / 500).

のメニュー項目

ボタン

_**`button-primary`** — 黄色の署名 CTA。背景 `` (#faff69)、テキスト `` (黒)、タイプ `` (インター 14px / 600)、パディング 12px × 20px、高さ 40px、丸め `` (8px)。黄色と黒の組み合わせは象徴的です。

**`button-secondary`** — ダーク表面のカード ボタン。背景__CODEBCK_628___、テキスト__CODEBCK_629___、プライマリと同じ形状。

_**`button-text-link`** — インライン テキスト ボタン、背景なし。 「サインイン」およびインライン リンク CTA に使用されます。

**`text-link`** — `` のインライン本文リンク (濃い色に黄色)。下線付き。

**`button-icon-circular`** — 暗い場所にある 36 × 36 の円形アイコン ボタン。

カードとコンテナ

_**`hero-band`** — 7 ～ 5 グリッドの黒いキャンバスのヒーロー: 左側に h1 + 小見出し + ボタンの行、右側にコード ウィンドウまたは製品モックアップ。垂直パディング `` (96px).

**`hero-stat-card`** — 黄色の統計表示数値 (「779+」、「47k+」) がキャンバス上にインラインで表示されます。カード表面なし - `` (56px / 700) の黄色のテキストのみ。

**`feature-card-yellow`** — 全面的なイエローカード (「最新のデータのあらゆる課題に対応する構築」)。背景__CODEBCK_639___、テキスト__CODEBCK_640___ (黒)、角丸__CODEBCK_641___ (12ピクセル)、パディング__CODEBCK_642___ (32ピクセル)。イエローカードは視覚的な強調です。

_**`feature-card-dark`** — 標準のダーク機能カード。背景__CODEBCK_644___、テキスト__CODEBCK_645___、丸め__CODEBCK_646___、パディング__CODEBCK_647___ (32px).

_**`code-window-card`** — SQL コード ブロックを示すダーク カード。背景__CODEBCK_649___、構文強調表示付きのJetBrains Monoのコード、丸められた__CODEBCK_650___、パディング__CODEBCK_651___ (24ピクセル)。多くの場合、開発者向けページのヒーローの右側のアーティファクト。

**`product-mockup-card`** — 実際の ClickHouse 製品 UI (クエリ エディター、ダッシュボード、監視パネル) を示すカード。 `` と同じ形状ですが、内部に製品クロムが埋め込まれています。

_**`pricing-tier-card`** — 標準層カード。背景__CODEBCK_655___、角丸__CODEBCK_656___、パディング__CODEBCK_657___ (32ピクセル).

**`pricing-tier-card-featured`** — 注目の層が `` (黄色) に切り替わります。黄色の表面は注目の信号です。

**`stat-callout`** — インラインの黄色の統計数値 (「779+」、「2.8k+」、「47k+」)。透明な背景、テキスト ``、__CODEBCK_662___ と入力します。表面のあるカードではなく、フラット レイアウト ブロックとして使用されます。

**`events-card`** — /company/events で使用されます。イベントのタイトル、__CODEBCK_664___ の日付、場所、および「登録」CTA が記載されたダーク カード。丸め__CODEBCK_665___、パディング__CODEBCK_666___.

_**`customer-logo-strip`** — 水平方向のモノクロの顧客ロゴ ストリップ。背景__CODEBCK_668___、ロゴ__CODEBCK_669___、垂直パディング__CODEBCK_670___ (32ピクセル).

入力とフォーム

**`text-input`** — ダークテキスト入力。 背景 ``、テキスト ``、角丸 `` (8px)、パディング 10px × 14px、高さ 40px.

_**`text-input-focused`** — 強調するために境界線が__CODEBCK_676___ (黄色)に太くなります。

タグ/バッジ

**`badge-pill`** — 小さな暗い錠剤のラベル。背景__CODEBCK_678___、テキスト__CODEBCK_679___、タイプ__CODEBCK_680___、丸め__CODEBCK_681___.

_**`badge-yellow`** — 「新規」、「始めましょう」を強調する黄色の錠剤。背景__CODEBCK_683___、テキスト__CODEBCK_684___、タイプ__CODEBCK_685___、丸め__CODEBCK_686___.

タブ/フィルター

**`category-tab`** + **`category-tab-active`** — ダークタブのナビゲーション。非アクティブ: 透明 + ミュートされたテキスト。アクティブ: 表面カードの背景 + ダークテキスト。パディング 8 ピクセル × 14 ピクセル、角丸 ``.

CTA / フッター

**`cta-band-yellow`** — プレフッターの「自分のやり方で展開」CTA バンド。完全な黄色の塗りつぶし、黒のタイプ、丸みを帯びた__CODEBCK_691___、パディング64ピクセル。 `` に h2 と CTA が表示されます。通常は黄色の表面にある黒いボタンです。

_**`footer`** — すべてのページを閉じる黒いフッター。背景__CODEBCK_694___、テキスト__CODEBCK_695___。デスクトップ上の製品/ユースケース/リソース/会社をカバーする 4 列のリンク リスト。垂直パディング64ピクセル。 ClickHouse のワードマークは、__CODEBCK_696___.

の上部にあります。

推奨事項と禁止事項

実行

• すべてのページを黒いキャンバスに固定します。黄色と黒の組み合わせがブランドボルテージです。
• __CODEBCK_697___ (黄色) は、プライマリ CTA、統計コールアウト番号、およびフルブリードの黄色の CTA バンド用に予約します。元素レベルでの黄色の希少性とバンド レベルでの豊富さが黄色を強力にします。
• すべての表示見出しに Inter を重み 700 で使用し、文字間隔は -1 ～ -2.5 ピクセルです。
• __CODEBCK_698___ 内の実際の SQL コード ブロックを表示 — ClickHouse はデータベースです。クエリを表示します。クエリのマーケティング用イラストを描かないでください。
• __`` の数値を使用して信頼性を確立します (コミュニティの規模、貢献者、パフォーマンス ベンチマーク)。黄色の統計数値は署名です。
• __CODEBCK_700___ (96 ピクセル) の垂直リズムで各バンドをアンカーします。

しないでください

• 2番目のブランドカラーを導入しないでください。 ClickHouse は単色 + 黄色です。
• _700 を超えるウェイトを太字で表示したり、見出しにウェイト 500 を使用したりしないでください。階層は、重さの段階ではなく、サイズに依存します。
• 本文テキストや、意図的なイエロー カード以外の大きな表面の塗りつぶしに黄色を使用しないでください。
• 小さなバッジ以外に丸いボタンや錠剤を使用しないでください。標準のボタンの半径は 8 ピクセル (MD) です。
• 連続する 2 つのバンドで同じサーフェス モードを繰り返さないでください。黒のキャンバス → ダーク機能カード → 黄色の CTA カード → 黒のキャンバス → コード ウィンドウ カード。
• _SQL コードのモックアップを抽象的なイラストに置き換えないでください。 コードはマーケティング電圧です。
• システムがすでにエンコードしているものを超えてホバー状態のスタイルを追加しないでください。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

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

|タブレット | 768–1024ピクセル |上部のナビゲーションが引き締められます。フィーチャーカード 2 アップ。価格設定 2 アップ |

|デスクトップ | 1024–1440ピクセル |完全なトップナビゲーション。 3アップのフィーチャーカード。 3 ～ 4 つ上の価格帯 |

|ワイド | > 1440ピクセル |デスクトップと同じですが、より広いスペースを備えています。最大コンテンツ 1280px |

タッチターゲット_

• `` 少なくとも 40 × 40 ピクセル
• ``、正確に 36 × 36 — WCAG 44 よりわずかに下、視覚的に中央に配置されます。
• `` 高さは 40 ピクセルです。

戦略の崩壊

• __HTMLTAG_501___ で上部のナビゲーションが折りたたまれてハンバーガーになります
• ヒーロー 7-5 グリッド → モバイルでは単一列。
• フィーチャー カード グリッドは、拡大縮小ではなく列を削減します。
• コード ウィンドウ カードはフォント サイズを保持します。モバイルではカード内を水平スクロールします。
• _価格帯カードは 4 → 2 → 1 に崩壊します。注目の層の黄色は目立つままです。

画像の動作

• _ダーク モックアップ内のコード ブロックは固定フォント サイズのままです。モバイルでは折り返しではなく水平スクロールします。
• モノクロ ストリップの顧客ロゴはネイティブの幅を維持します。モバイルでは行が折り返されます。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キー (``、__CODEBCK_705___) を参照します。

2.既存のコンポーネントのバリアント (`-active`、__CODEBCK_707___、__CODEBCK_708___) は、別個のエントリとして存在します。

3.どこでも `` を使用します。16 進数をインライン化しないでください。

4.決してホバーを文書化しないでください。デフォルトおよびアクティブ/押された状態のみ。

5.見出しは Inter 700 のままで、負の文字間隔で表示されます。ボディは Inter 400 のままです。

6.黄色と黒の組み合わせはブランド契約です。二次アクセントを使用して和らげないでください。

7.強調に迷った場合は、色を追加する前に Inter 700 を大きくしてください。

既知のギャップ

• 正確な黄色の 16 進数 (#faff69) はスクリーンショットからサンプリングされました。 ClickHouse では、公式のブランド カラーが若干異なる形で公開される場合があります。
• 400 / 500 / 600 / 700 を超える内部ウェイト軸値は正式化されていません。観測された静的なウェイトのみが文書化されています。
• アニメーションと遷移のタイミング (コード タイプライター効果、ステータス カウンター アニメーション) は範囲外です。
• __CODEBCK_710___ を超えるフォーム検証状態は抽出されません。
• _実際の ClickHouse Cloud 製品サーフェス (クエリ コンソール、モニタリング ダッシュボード、テーブル ブラウザ) は、マーケティング サイトと一部のトークンを共有しますが、範囲外の多くの製品固有のコンポーネントが追加されます。
• 顧客のロゴ ストリップの正確な不透明度/処理はさまざまです。落ち着いたグレーはおおよその値です。

Typography & Readability

Clickhouse selects system font as its primary typeface, a choice that reflects a focus on readability and cross-platform consistency. In practice, this type system supports clear information hierarchy across devices. The combination of generous line heights, precise letter-spacing, and well-calibrated font weights ensures that content remains legible at every breakpoint — a fundamental quality that underpins Clickhouse's user experience.

Typography & Readability

Clickhouse selects system font as its primary typeface, a choice that reflects a focus on readability and cross-platform consistency. In practice, this type system supports clear information hierarchy across devices. The combination of generous line heights, precise letter-spacing, and well-calibrated font weights ensures that content remains legible at every breakpoint — a fundamental quality that underpins Clickhouse's user experience.

Typography & Readability

Clickhouse selects system font as its primary typeface, a choice that reflects a focus on readability and cross-platform consistency. In practice, this type system supports clear information hierarchy across devices. The combination of generous line heights, precise letter-spacing, and well-calibrated font weights ensures that content remains legible at every breakpoint — a fundamental quality that underpins Clickhouse's user experience.

Related Design Systems

Explore similar design languages from the same category:

• Cal Design System
• Airtable Design System
• Airbnb Design System
• Framer Design System