Frontend design

Write real working code with a deliberate visual identity. Match the project's existing framework and conventions first.

Commit to a direction before coding

State the purpose, the audience, and one aesthetic (for example editorial, brutalist, retro-futuristic, soft and organic, industrial, Swiss grid, luxury). Pick the one thing the user will remember. Execute that direction consistently and drop everything that does not serve it.

Stack defaults

Use what the project already has. Otherwise prefer shadcn/ui (read its current docs or MCP server), Tailwind with CSS variable tokens, Recharts, and CSS motion first.

Avoid these tells

• Type: Inter, Roboto, Arial, or system-ui as the display face. All text at 14 to 16px. One family everywhere.
• Color: purple or blue-violet gradients, default #3B82F6 primary, low-contrast pastels, gradient progress bars.
• Layout: everything centered, a row of three identical cards, the centered hero over a gradient with floating shapes, the same radius on every element.
• Decoration: glassmorphism everywhere, soft uniform shadows, fade-in-on-scroll for every block, bounce on buttons, cute empty-state art.