Act as a design engineer. Turn this design spec into reusable components in my {{tech_stack}} project: {{design_spec}} Fonts: {{brand_fonts}}. Read the existing components and styles first and tell me what can be reused or must be replaced; don't build a second button if one exists. 1. Tokens first. Pull every value from the spec into named tokens with roles: color (background, surface, text, muted, border, accent, accent hover, focus, success, warning, error), the type scale, spacing, radius, shadows, z-index layers, and motion durations and easings. Where the spec is vague or inconsistent, such as three slightly different grays, propose one value and log the decision. 2. Then the components the spec implies, smallest first: button, link, input, select, checkbox, textarea, badge, card, alert, modal, tabs, and the page section layouts. For each: - Only the variants and sizes the spec actually needs - Every state: hover, focus-visible, active, disabled, loading, error, and empty where it applies - How it handles long text, a missing image and a narrow container - Accessible names, keyboard support and 44px touch targets 3. Components use tokens only; no hard-coded colors or pixel values inside them. 4. One preview page showing every component in every state at 360 and 1280px, in light and dark if the spec has both. 5. Rebuild one existing page's one-off markup with the new components as proof, changing nothing else. Ask up to three questions first if the spec leaves out something that changes the build. Finish with the token list, the components and their props, and the spec gaps I need to decide.