Guides
React Native guide

React Native Design Tokens Deep Dive

A developer guide to React Native design tokens for color, spacing, typography, motion, density, and glass materials.

React Native design tokensReact Native theming systemReact Native design system

Prefer semantic tokens

Semantic tokens describe intent: surface, text-muted, border-subtle, glass-panel, and action-primary. This makes components easier to theme than raw color scales.

Reactnatively uses semantic tokens so components can adapt across light mode, dark mode, density, and glass material recipes.

Component recipes connect tokens to UI

A token system becomes useful when components consume it consistently. Buttons, inputs, cards, tabs, and overlays should share spacing, radius, and state rules.

Recipes keep the implementation predictable while still allowing project-level customization.