Ui Craft Dense Dashboard

---
name: ui-craft-dense-dashboard
description: "Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like."
argument-hint: "[action: build|review|polish] [target]"
---

# UI Craft — Dense Dashboard

Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.

## Knobs (locked)

- **CRAFT_LEVEL = 7** — polished but not precious; operators value speed over sheen.
- **MOTION_INTENSITY = 3** — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
- **VISUAL_DENSITY = 9** — tight 4/8px grid; whitespace earns its place.

Do not re-ask these in Discovery. Confirm brand accent + dark/light preference only.

## Style anchors

- UI sans + mono pairing. Mono for every ID, hash, timestamp, code.
- Semantic palette required: success, warning, danger, info + one brand accent.
- `tabular-nums` on every numeric column; mono on identifiers.
- Tight 4/8px spacing grid. `px-3 py-2` table cells, `gap-2` toolbars.
- Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D.
- Keyboard shortcuts visible inline (`⌘K`, `J/K`, `E` to edit).
- Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome.
- Micro-motion only. Row hover, row active, inline save. No entrance stagger.

## Base rules (inherited)

All rules in `../ui-craft/SKILL.md` apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

## Style-specific overrides

**Typography**

- UI: IBM Plex Sans or Inter, 400 / 500.
- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
- Body size: 13-14px default; 12px in dense tables is fine.
- `tabular-nums` on every numeric column, metric card, timestamp, duration.
- `font-variant-numeric: tabular-nums slashed-zero` for IDs + codes.
- Headings: compact. Page title 18-20px, section 14-15px 500.

**Color (semantic palette required)**

- Brand accent: one — primary actions, active tab, selected row accent tint.
- Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 0.15):
  - success `oklch(60% 0.12 150)`
  - warning `oklch(72% 0.13 75)`
  - danger `oklch(58% 0.15 25)`
  - info `oklch(62% 0.12 240)`
- Never saturated hues — dashboards live on screens for 8 hours.
- Status dots, badge text, chip text use semantic color; backgrounds stay neutral.

**Spacing & layout**

- 4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
- Table cells: `px-3 py-2` default; `px-2 py-1.5` for ultra-dense.
- Toolbar rows: `gap-2`, `h-9` controls, `text-sm`.
- Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
- Cards: `p-4`, 8px radius; 1px border over shadow.

**Data display**

- Every number column: `tabular-nums` + right-aligned.
- Every ID / hash / commit / timestamp: monospace.
- Sparklines inline in rows for trend context. 24-40px tall, single color.
- Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
- Deltas: plain text `+12.5%` in semantic color, no pill.
- Empty states: one-line hint + keyboard shortcut to create.

**Chrome & navigation**

- Breadcrumbs + tabs + sub-toolbar together is expected and fine.
- Filter chips: outline style, removable `×`, no pill fill.
- Global command palette: `⌘K` visible in header search affordance.
- Row actions: inline icons on hover; also available via keyboard.
- Pagination: text `Page 3 of 42` + `tabular-nums`, plus `J/K` navigation.

**Motion**

- Row hover: background shift to `oklch(96% 0.002 250)` light / `oklch(20% 0.005 250)` dark, 80ms.
- Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
- Inline save / confirm: 150ms fade + check icon swap.
- No scroll-triggered reveals in table areas — they stutter long lists.
- Sort arrow, filter open, column resize: instant or <100ms.

## Reference files to read first

Load these from `../ui-craft/references/`:

- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
- `typography.md` — tabular-nums, mono pairing, scale
- `motion.md` Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
- `responsive.md` — tablet + laptop breakpoints, toolbar collapse

Skip `inspiration.md` (landing-page focused), `sound.md`.

## Anti-patterns for THIS style

- Serif fonts anywhere in chrome or data. Editorial is a different variant.
- Proportional figures in numeric columns — always `tabular-nums`.
- Saturated hues — reads as consumer app, not operator tool.
- Colored pills on every delta — plain text in semantic color.
- Pie charts, donut charts, 3D charts. Ever.
- Vertical bar chart for time-series — use area/line.
- Uniform colored top borders on metric cards.
- Card grids with heavy whitespace — if it feels airy, wrong variant.
- Full-dark sidebar (common AI pattern) — subtle tint only.
- Scroll-triggered reveals or stagger animations in table areas.
- Hidden keyboard shortcuts — always surface `⌘K`, row shortcuts, help trigger.
- Vague loading states — show skeleton rows matching column structure, not generic spinner.