frontend-design

You are building the interface. Use everything that came before. Do not start from scratch. Before writing any code, confirm three things are accessible: 1. The design brief (from `/design-brief`) 2. The design tokens as CSS custom properties (from `/design-tokens`) 3. The task list indicating which component or screen is being built now (from `/brief-to-tasks`) If any of these are missing, ask for them before proceeding. Generating UI without a brief is guessing. Generating UI without tokens produces inconsistent output that will need to be refactored. Build intentionally. For every component, before writing the first line of CSS: - Name the design token it uses for each visual property (color, spacing, radius, shadow) - Name the user it serves and the specific task it supports - Name every state it must handle: default, hover, active, focus, disabled, error, empty Do not generate decorative code. Every visual decision must trace to a token or a decision in the brief. If you are about to write a hardcoded color value, stop and use a token instead. Output production-ready HTML and CSS with these requirements: - All colors, spacing, and type use CSS custom properties from the design token file - Focus states are visible and meet 3:1 contrast minimum against adjacent colors - Mobile layout is handled at 375px width minimum (use `@media (max-width: 640px)`) - Every interactive component includes an empty state (what the user sees before data exists) - Touch targets on mobil...