Use DESIGN.md
Change the app's visual language without scattering one-off styles.
DESIGN.md explains the design decisions your AI should preserve. The actual
theme values live in src/global.css and are mirrored in
src/theme/colors.ts for native APIs that need a color prop.
The role-token idea
Screens ask for a role—canvas, surface, ink, muted, accent, danger—
instead of asking for a raw color. This lets one design change update every
screen and keeps light and dark themes aligned.
Design intent → DESIGN.md / DESIGN-DARK.md
Theme values → src/global.css
Native colors → src/theme/colors.ts
Components → consume semantic rolesRestyle the whole product
Restyle this app to feel [calm/editorial/playful/technical]. Read DESIGN.md and
DESIGN-DARK.md first. Propose the updated role tokens, type scale, radii, and
motion rules before editing. After I approve, update DESIGN.md, then
src/global.css and src/theme/colors.ts, then review every primary screen in
light and dark. Do not put raw brand hex values in screens.Keep these constraints
- Uniwind 1.x with Tailwind 4 is the styling system. This is not NativeWind.
- Interactive targets stay at least 48×48dp.
- Text scales with Dynamic Type; essential content cannot clip.
- Reduced Motion removes decorative travel without hiding state changes.
Button,Input,Card,ListRow,Sheet,Dialog,Badge, andScreenStateare owned primitives. Extend them before cloning variants.- Every state still works in both themes, including charts, camera overlays, tab bars, native switches, sheets, and splash screens.
Review one screen
Review the Scan flow against DESIGN.md and DESIGN-DARK.md. Report hierarchy,
token, component, spacing, touch-target, large-text, motion, and dark-theme
issues. Fix the high-confidence issues and show me what changed.