← ClaudeAtlas

dashboardlisted

Use when building or styling a UI in the Dashboard aesthetic — A cloud-platform aesthetic of modular grids, glass-like panels, and crisp data hierarchy built for productivity dashboards that need to feel calm under heavy information. For Claude Code, Cursor, and Codex.
x77jh8gvrn-alt/staqd-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill x77jh8gvrn-alt/staqd-skills
# Dashboard Dashboard is a design system tuned for density without anxiety. It borrows the calm, modular feel of a modern cloud console: clean white panels floating on a soft blue-gray field, layered soft shadows, a confident blue accent, and a strict data hierarchy that lets numbers lead. Reach for Dashboard whenever you are building productivity surfaces — analytics, admin consoles, internal tools, billing portals — where users scan a lot of information at once and need structure more than spectacle. The whole language is built so that a screen packed with metrics still feels orderly and quiet. ## Design principles - Hierarchy is everything: size, weight, and color guide the eye from headline metric to supporting detail in a single glance. - Panels are modular tiles on a consistent grid; the layout should feel composable and rearrangeable, like a board of widgets. - Color is functional — blue for primary actions and selection, green/amber/red strictly for status, never for decoration. - Numbers get tabular figures so columns align and metrics read like a clean ledger. - Depth is gentle: soft layered shadows and faint hairline borders separate planes without shouting. - Calm density — pack information tightly but keep a consistent rhythm so nothing ever feels cramped. - Every state is designed: loading, empty, and error views get the same care as the happy path. ## Color The canvas is a soft blue-gray (`#F6F8FB`) so white panels (`#FFFFFF`) read as floating tiles rather t