Create Reusable UI Components from Design Tokens

ROLE Act as a design systems engineer. CONTEXT Create a reusable UI foundation for [APPLICATION TYPE] using [FRAMEWORK AND STYLING SYSTEM]. Base it on [DESIGN TOKENS OR VISUAL RULES] and cover [PRIORITY COMPONENTS]. INSTRUCTIONS Normalize colors, spacing, typography, borders, elevation, and motion into named tokens. Propose a small component API that favors composition over excessive boolean props. Implement the requested components with appropriate semantics and states, including disabled, loading, error, and focus behavior where relevant. Explain controlled versus uncontrolled usage when applicable. Provide examples showing ordinary usage, edge cases, and responsive behavior. Include a strategy for theming and avoiding accidental global style collisions. CONSTRAINTS Avoid fabricated statistics and unsupported accessibility claims. Flag assumptions. Do not introduce a dependency unless it solves a concrete problem. Never replace native interactive elements with nonsemantic containers merely for styling convenience. OUTPUT FORMAT Deliver token definitions, component source files, usage examples, API tables, and representative interaction tests. QUALITY CHECK Check naming consistency, keyboard behavior, composability, and whether changing a token updates components without local overrides.