high-end-visual-design

Apply a strict design system that bans default fonts like Inter and Roboto, generic 1px borders, and linear transitions. This Skill enforces premium typography, nested card architecture, macro-whitespace, and physics-based motion so output reads as agency-tier work.

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.

Yes, all patterns are expressed in Tailwind utility classes and React-compatible code, including arbitrary values like rounded-[2rem] and custom cubic-bezier easings. Framer Motion's whileInView or IntersectionObserver handles scroll reveals.

Animate only transform and opacity, never layout properties like top, width, or height. Apply backdrop-blur only to fixed or sticky elements, use IntersectionObserver instead of scroll listeners, and use min-h-[100dvh] instead of h-screen to avoid iOS viewport jumps.

Asymmetric grids, rotations, and overlapping elements cause touch-target conflicts below 768px. The Skill mandates mobile collapse rules: reset col-spans to single column, remove rotations and negative margins, and fall back to w-full with px-4 padding.