Acd Data Dense Clickhouse Design

---
name: acd-data-dense-clickhouse-design
description: Reference DESIGN.md for dashboard-first, chart-heavy, saturated-on-charcoal dev-tool aesthetic. Use when building UI components, applying design tokens, or implementing visual styles for data dense clickhouse.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, data-dense, claude-design]
---

# ClickHouse — Data-Dense Pro Design Mode

You are an expert in the ClickHouse — Data-Dense Pro aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for dashboard-first, chart-heavy, saturated-on-charcoal dev-tool aesthetic.

## 1. Visual Theme & Atmosphere

Data-dense pro. Charts are the hero. Tables are hero. Dashboards over marketing pages. Dark-first. Fast. Everything optimized for scanning thousands of rows.

Mood: industrial, precise, performance-obsessed.

## 2. Color Palette & Roles

```
--bg:              #181818
--bg-alt:          #202020
--surface:         #2a2a2a
--text:            #f5f5f5
--text-muted:      #a0a0a0
--text-dim:        #6a6a6a
--border:          #333333
--accent:          #faff69   /* signature yellow */
--accent-alt:      #ff6ec7   /* magenta for contrast */

/* categorical palette for charts */
--series-1:        #faff69
--series-2:        #ff6ec7
--series-3:        #7bdff2
--series-4:        #ffa07a
--series-5:        #b5e48c
--series-6:        #c7a9ff
--series-7:        #ff9b54
--series-8:        #90e0ef

--success:         #b5e48c
--warning:         #ffa07a
--danger:          #ff6b6b
```

## 3. Typography Rules

- **UI / body:** `Inter`, tabular numerals ALWAYS on (`font-variant-numeric: tabular-nums`).
- **Headlines:** Inter, weight 600, tight letter-spacing.
- **Mono / code / data:** `JetBrains Mono`, `SF Mono`. Used for numbers, SQL, logs, IDs.

Scale: 11 / 12 / 13 / 14 / 16 / 20 / 24 / 32.

11–13px dominates. Users read dashboards at arm's length.

## 4. Component Stylings

**Tables**
- Row height 28–32px.
- Zebra striping with `--bg-alt`.
- Sticky header, sticky first column.
- Right-align all numeric columns.
- Truncate with ellipsis, reveal full on hover.

**Charts**
- Grid lines `--border`, axis labels `--text-dim`.
- No 3D. No chartjunk.
- Categorical palette above. Sequential for heatmaps.

**Buttons**
- Primary: `--accent` fill, black text, radius 4px, 12px padding.
- Secondary: `--surface` fill, `--text` color.

**Inputs**
- `--bg-alt` fill, 1px `--border`, radius 4px.
- Mono font for any input that accepts code or IDs.

**Badges**
- Pill-shaped but small (20px tall), mono font, uppercase.

## 5. Layout Principles

- Max width: dashboards use full viewport, no max.
- 4px grid.
- Sidebar 220–260px, collapsible to 48px icon rail.
- Resizable panels everywhere. Users define layout.

## 6. Depth & Elevation

Flat. Depth via background steps (`--bg` → `--bg-alt` → `--surface`). Shadows only on dropdowns and modals.

## 7. Do's and Don'ts

**Do**
- Show more data per screen, not less.
- Make every column sortable.
- Use mono for numbers, IDs, and anything copyable.
- Color-code severity consistently.

**Don't**
- Add marketing illustrations to dashboards.
- Use serif fonts anywhere.
- Animate chart rendering beyond 200ms.
- Center-align numeric data.

## 8. Responsive Behavior

Dashboards don't apologize for being desktop-first. Mobile: show a single KPI per viewport with a drill-down link. Don't cram a 12-column grid into 375px.

## 9. Agent Prompt Guide

Bias: dark canvas, tabular numerals, mono for numbers, saturated categorical palette, 4px grid, dense tables with sticky headers.

Reject: light backgrounds for primary dashboards, hero illustrations, non-tabular numerals, icon libraries that use soft strokes.

## When to Use This Mode

- When user references **clickhouse** or the **data-dense** family as inspiration
- When building UI in the data-dense aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic