high-end-visual-design

Apply a strict anti-pattern ruleset that bans default fonts like Inter and Roboto, harsh drop shadows, 1px gray borders, and linear transitions. Combine curated vibe archetypes with asymmetric layouts and spring-physics motion to produce agency-tier output.

Use premium typefaces such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans instead of Inter or Roboto. For icons, choose ultra-light line sets like Phosphor Light or Remix Line rather than thick-stroked Lucide or Material Icons.

Use a CSS Grid with varying col-span and row-span values for the desktop bento arrangement, then collapse to grid-cols-1 with all spans reset below 768px. Add generous vertical gaps and use min-h-[100dvh] instead of h-screen to avoid iOS Safari viewport jumping.

Backdrop-blur forces continuous GPU repaints when applied to scrolling containers or large content areas, causing frame drops on mobile. Restrict blur filters to fixed or sticky elements like navbars and overlays, and animate only transform and opacity properties.

No, window scroll listeners trigger continuous reflows and hurt mobile performance. Use IntersectionObserver or Framer Motion's whileInView to trigger fade-up entry animations only when elements enter the viewport.