← ClaudeAtlas

dashboard-design-languagelisted

The noisy-coding dashboard's design decisions — color semantics, the fixed-slot rule, blink rules, overlay-not-push, conversation-scoped layout, geometry as script constants, and the Storybook-first workflow. Repo-local skill; consult BEFORE styling or adding any dashboard UI so new work speaks the established language.
noisy/noisy-coding · ★ 9 · Web & Frontend · score 72
Install: claude install-skill noisy/noisy-coding
# Dashboard design language Decisions made deliberately (2026-07-21 session, with Krzysztof calling each one) — not derivable from the code alone. New UI must speak this language; deviations are a conversation, not a default. ## Color semantics — one meaning per color, everywhere - **red** — muting and errors, nothing else. All mute signals are red and share the alarm look (MUTE MIC, muted portrait wash, muted tab glyphs). Never use red for a status like "waiting". - **amber** — messages waiting / degraded-but-working. - **green** — speaking right now, and good news (update available). - **violet** — agent working/thinking. Always via `var(--violet)` / `color-mix(in srgb, var(--violet) N%, transparent)` — never hardcoded rgba; retinting must stay a one-variable edit in `hud.css`. - **cyan** — structure, chrome, resting text. The neutral of this UI. ## The fixed-slot rule A state change NEVER changes an element's size. Status glyphs render inside a fixed-size slot (tab statusslot); label swaps get a `min-width` sized for the longest label (MUTE/MUTED button); hover affordances (tab ✕) are overlays that reserve or overlay space. If toggling something makes neighbors shift, it's a bug. ## Blink rules - Only the LABEL/color pulses — the plate/background stays rock solid. - The dim phase stays readable: a pulse, not a blackout (≥ ~0.5 opacity or a dimmer color, tuned by eye). - All mute-related blinking shares the cadence: `1.6s step-end infinite`. ## Overlay, do