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.

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.

ui-craft-dense-dashboard