Design tokens
Tokens are the system's vocabulary for every visual decision. They live in @mihcm/tokens and ship in two shapes: TypeScript constants and Tailwind 4 @theme CSS variables. The same names appear in component source, the Tailwind preset, the NativeWind config, and Figma.
Components reference tokens by name (bg-primary, text-foreground, duration-short) — never raw values. A hex code inside a component is a code-review red flag.
Colors
Semantic palette — paired roles for light and dark.
Typography
Type scale, weights, and line heights tuned for screen reading.
Spacing
Four-pixel base scale powering padding, gap, and margin utilities.
Grid system
Breakpoints, containers, gutters, 12-column recipes, and visual layout guidance.
Motion
Duration tokens and timing curves; honours reduced-motion.