design-taste-frontend

Start by inferring the design direction from the brief: page kind, vibe words, audience, and references. Then set variance, motion, and density dials and apply anti-default rules that ban purple gradients, centered heroes, and repeated section layouts.

Match the system to the brief: Fluent for Microsoft-style enterprise, Material 3 for Google-flavored products, Carbon for IBM-style B2B, GOV.UK Frontend for UK public sector, and Tailwind v4 with shadcn/ui for modern SaaS. Use one system per project and install the official package.

Yes, the default stack is Next.js with React Server Components. Interactive elements using Motion, scroll listeners, or pointer physics must be isolated client components with 'use client', while server components render static layouts.

Hero sections must fit the initial viewport with headlines capped at two lines and subtext at 20 words. Fix overflow by reducing font scale or cutting copy, and keep top padding at or below pt-24 on desktop.

Serif fonts are discouraged as a default and are only appropriate when the brand brief names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For creative agencies, portfolios, and modern brands, use a sans-serif display face instead.

Yes, but prefer importing from motion/react since Framer Motion is now the Motion library. Use useMotionValue and useTransform for continuous values like scroll progress instead of useState, which causes re-render performance problems.