Designing

The MiHCM Design System is built on a small set of decisions — semantic tokens, universal primitives, and the same prop surface across web and React Native.

Principles

• Universal first. Every primitive renders on web AND native with the same prop API.
• Semantic tokens, not raw colors. Use bg-primary, never #0070f3.
• WCAG 2.1 AA is a release blocker. Not a stretch goal.
• Mobile first. Design at 375px first, scale up.
• Tailwind 4 + NativeWind. A single utility-first system across both runtimes.

Tokens

Tokens are the source of truth for color, typography, spacing, and motion. They live in @yashiel/mihcm-tokens. See the Tokens section for the full set.

Figma

Figma libraries are coming. The token names match across Figma and code so designers and developers reference the same vocabulary.

States

Every interactive element handles every state — default, hover, focus, active, disabled, loading, error, empty, success. Designers and engineers should both be able to describe each state for any component without ambiguity.

Density

Generous whitespace. We choose the larger of two equally-valid spacing options. Cramped UIs feel cheap.