UI-Craft: High-Craft Web UI & Aesthetics

Build modern, production-grade frontend interfaces that look designed by a human product designer. Avoid generic, purple-tinted AI cards.

The project's own design system comes first: its tokens, spacing scale, components and rules (theme files, DESIGN.md, AGENTS.md). The Tailwind classes and colours below are defaults for a project that has none; never add a palette class or raw colour a project's tokens replace.

Design Principles

1. Spacing & Rhythm

• Use an 8pt grid scale: p-2 (8px), p-4 (16px), p-6 (24px), gap-4, gap-6.
• Keep generous whitespace between sections; avoid cramped layouts.
• Mobile-first responsive hierarchy: layout columns stack on mobile, expand with md:grid-cols-2 lg:grid-cols-3.