spectra-design-review

name	spectra-design-review
description	Review a UI change against Spectra's design language. Use when evaluating a component or screen for conformance — tokens, hierarchy, states, layout, accessibility — before it ships.

spectra-design-review

Review against the principles in foundations/principles/. Report findings as conform / nit / blocker, citing the principle by section. Two layers: the design-language layer (below) and the code layer (the .cursor/rules/ adapter for the surface).

Draft note: this reflects Astronomer's UX direction and is pending a design-team review pass. Frame findings as questions where the code can't settle it.

Design-language pass

• Tokens — every color/space/radius/z/shadow/duration references a token? Semantic (not primitive) where one exists? No hardcoded values? (01-colors, universal rules)
• Dual-mode — any hardcoded color that breaks dark mode? Borders/images that assume a light background?
• Hierarchy — one primary CTA? Secondary actions neutral? Section titles are headings, not bold text? (02-typography, 07-components)
• States — empty, loading (skeleton), error (inline), and partial-data all handled? No spinner chains or refetch flashes? (07-components)
• Layout — page owns vertical rhythm (no leaf top-margins, no negative-margin hacks)? Flex children can shrink/truncate? Concentric radii? (03-layout, 05-shapes)
• Content — — for empty, … character, curly quotes, tabular numbers, no abbreviations, specific button labels? (02-typography)
• Motion — reduced-motion honored, only transform/opacity, no transition: all? (06-motion)
• Accessibility — see spectra-accessibility (contrast, focus, keyboard, semantic elements).

Edge cases to render mentally

For each UI element, imagine: very long text, empty/missing optional fields, zero / one / hundreds of items, narrow/dense containers, dark mode. A layout that breaks under these is a blocker; suboptimal-but-functional is a nit.

Voice

Suggestive, not directive — "could drop this for consistency," "might be worth checking a multi-line value here." Cite the pattern you see nearby, not an abstract rule.