high-end-visual-design

Apply a strict design system that bans default fonts like Inter and Roboto, generic 1px gray borders, and linear transitions. This Skill enforces premium typography, nested card architecture, macro-whitespace, and spring-physics animations to produce agency-tier output.

Use the Double-Bezel technique: an outer shell with bg-white/5, ring-1 hairline border, and large radius wrapping an inner core with its own background and inset highlight. Add backdrop-blur-2xl only to fixed or sticky elements, never scrolling containers.

Yes, all asymmetric layouts collapse below 768px to single-column stacks with w-full and px-4 padding. Rotations and overlaps are removed on mobile, and min-h-[100dvh] replaces h-screen to prevent iOS Safari viewport jumping.

Scroll event listeners fire continuously and cause layout reflows that degrade mobile performance. Use IntersectionObserver or Framer Motion's whileInView instead, and animate only transform and opacity properties to stay GPU-safe.

It recommends premium fonts like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans, and ultra-light icon sets such as Phosphor Light or Remix Line. Banned options include Inter, Roboto, Arial, Lucide, FontAwesome, and Material Icons.