design-system

name	design-system
description	The finalized visual rules for this app — colour, accent, type, spacing, radius tokens, plus the entry-thumbnail, segmented-control, and empty/loading patterns. Use before building or editing any UI in this app, and any time you are about to pick a size, colour, gap, or radius.

You are applying this Expo template's design system.

Step 1 — read the rules. Read .agents/design-system.md in the repository root. It is the complete and authoritative specification: the real token values, the entry-thumbnail pattern, the one active-state rule for tabs and segmented controls, the empty/loading-state rule, the interaction floors, and the don'ts.

Step 1b — if you are touching a navigation variant, read .agents/nav-variants.md instead of applying the design system to it. Rose, Ecommerce, and Void are three deliberately different design languages and are exempt from the visual rules; only the accessibility floors apply. That file lists each one's accent, primary-action shape, and badge treatment so they do not cross-pollinate.

Step 2 — read the project context. Read AGENTS.md for the stack, the conventions, and the current phase.

Step 3 — build. Every value you use comes from a token. If the value you want is not on a ladder, the layout is what needs fixing — not the ladder.

This wrapper deliberately contains no rules of its own, so it can never drift from .agents/design-system.md. That file is the source of truth, and it is plain markdown so Codex, Cursor, and Copilot read the same rules from the same place. If the two ever appear to disagree, .agents/design-system.md wins.