Mobile Starter Kit

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 roles

Restyle 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, and ScreenState are 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.

On this page