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 enforce anti-default rules that ban purple gradients, centered heroes, and generic three-card layouts.

For modern SaaS marketing sites, Tailwind v4 utilities with the dark variant are the default, or shadcn/ui when you want to own the components. Enterprise briefs map to official packages like Fluent, Carbon, or Material instead of hand-written CSS.

Yes, the default stack is React or Next.js with Server Components. Any component using Motion, scroll listeners, or pointer physics must be an isolated client leaf with 'use client', while Server Components render static layouts only.

Serif is discouraged as a default and only acceptable when the brand brief names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For creative and premium briefs, default to sans display fonts like Geist Display or Cabinet Grotesk.

Common failures include white text on white buttons, low-contrast form placeholders, and ghost buttons over photos. The pre-flight audit requires WCAG AA contrast ratios of 4.5:1 for body text and 3:1 for large text on every CTA and form.

It targets landing pages, portfolios, and redesigns, not dashboards, data tables, or multi-step product UI. All rules are contextual and fire only after reading the brief, so it does not replace a full product design system workflow.