Next.js + shadcn/ui

Build an interface with a visual identity that fits its content, audience and task. These are design defaults, not a fixed page recipe; the user's direction and an established design system take precedence.

Choose the visual direction

For a new view or substantial redesign, use frontend-design to choose the typography, palette and composition before building. Preserve a working visual system during smaller edits.

Choose fonts for the product's tone, reading density and language support. Use shadcn/create to choose the component style, body and heading fonts, icon family and theme together. Compare the preview with representative content, then make deliberate choices about type scale, spacing and hierarchy. Neither the default preset nor an unusual font guarantees a good design.

Record the chosen preset, theme, fonts and icon family in the project's design notes; preserve that direction unless the brief changes. References and images are project-specific. Component style and icon family are separate choices; styling.md covers them.

Keep the user's task clear:

• Cut decorative badges, repeated headings, empty marketing claims and helper text that explains the obvious.
• Keep useful status, navigation, explanations and disclosures.
• Use cards, sections and CTAs because the content needs them, rather than filling a template.
• Use brief motion to connect an action with its result, expanded details or active navigation. Reuse existing interaction components; styling.md covers Motion, GSAP and vercel-react-view-transitions for different animation needs.
• Reuse the project's icon family. Use icons when sourcing new UI icons, file-type icons or official brand assets; an icon does not automatically replace a clear label.