design-taste-frontend

Start by inferring the design direction from the brief: page kind, audience, vibe words, and references. Then set variance, motion, and density dials, pick an appropriate design system or aesthetic family, and audit the output against anti-default rules like the eyebrow restraint and palette consistency locks.

For modern SaaS marketing pages, Tailwind v4 utilities with shadcn/ui components is the default recommendation. If the brief matches an enterprise ecosystem, use the official package such as Fluent for Microsoft-style products or Carbon for IBM-style B2B analytics.

Yes, but interactive components using Motion, scroll listeners, or pointer physics must be isolated leaf components with 'use client' at the top. Import from motion/react, and use useMotionValue instead of useState for continuous values like scroll progress.

Hero overflow usually comes from oversized headlines or excessive top padding. Keep headlines to two lines maximum, subtext under 20 words, top padding at or below pt-24, and use min-h-[100dvh] instead of h-screen to avoid mobile viewport jumps.

Serif is appropriate only when the brand brief explicitly names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For creative agencies, portfolios, and modern brands, sans-serif display fonts like Geist Display or Cabinet Grotesk are the correct default.

Apple documents Liquid Glass only for Apple platforms; there is no official web package. Web implementations are approximations using backdrop-filter, layered borders, and highlights, and should be labeled as such with a solid-fill fallback for reduced transparency.