educlopez/ui-craft-dense-dashboard

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.