web-prototype-taste-soft

# Web Prototype — Soft Premium For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture. ## Source Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/soft-skill/SKILL.md` ("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See `example.html` in this directory for a fully-realized template. ## Hard rules - **Canvas:** silver-grey or warm cream (`#F2F2F0` or `#FDFBF7`). Not pure white. - **Type pairing:** display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono. - **Display:** `clamp(48px, 7vw, 96px)`, `letter-spacing: -0.035em`, `line-height: 0.96`. Heavy weight (700+). - **Squircle radii:** `border-radius: 28px–40px` (`rounded-[2rem]` to `rounded-[2.5rem]`) on major surfaces. - **Double-bezel mandatory:** every important card is a wrapper (`p-1.5`, hairline border, soft outer shadow) containing an inner core with its own background and a *concentric smaller radius* (e.g., outer `2rem`, inner `calc(2rem - 0.375rem)`). - **CTA = button-in-button:** primary CTAs are full pills (`rounded-full px-6 py-3`); the trailing arrow lives inside its own circular wrapper flush-right. - **Ambient depth:** one slow-drifting radial mesh blob behind hero, `opacity ≤ 0.18`, `pointer-events: none`, fixed. - **Eyebrow tag** above each section header: pill, uppercase mono, `letter-spacing: 0.2em`, `text-[10px]`. ## Banned - Inter, Roboto, Helvetica, Open Sans. - Generic 1px solid gray borders (use `border-black/5` / `ring-1 ring-black/5`). - `shadow-md`, `shadow-lg`, hard drop shadows. Only diffuse, wide-spread, low-opacity (`0 20px 40px -15px rgba(0,0,0,0.05)`). - Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (`mt-6 mx-auto w-max rounded-full`). - Linear or `ease-in-out` transitions. Use `cubic-bezier(0.32, 0.72, 0, 1)` or spring physics. - `h-screen` (use `min-h-[100dvh]`). - Animating `width` / `height` / `top` / `left`. Only `transform` and `opacity`. - Pure black `#000`. Use Zinc-950 / Off-Black. ## Required components - Floating-pill navbar with backdrop-blur-2xl. - Asymmetric hero: massive heavy display, eyebrow tag, body lede `max-w-[52ch]`, two CTAs (primary pill with button-in-button arrow + ghost). - Bento grid using the **double-bezel** pattern; at least one wide card and one tall card. - Feature row with **z-axis cascade** or split image module. - Marquee strip of customer logos, slow infinite translation (`-100% / 20s`), pause on hover. - Closing band on a soft inverted surface (deep zinc / espresso). - Footer: monospace meta, hairline above. ## Motion - All transitions: `transition: transform 700ms cubic-bezier(0.32,0.72,0,1)` minimum. - Hover on CTAs: outer pill scales `0.98` on `:active`, inner trailing-icon circle translates `(+1px, -1px)` and `scale(1.05)`. - Scroll entry: `translateY(16px) blur(8px) opacity(0)` → `translateY(0) blur(0) opacity(1)`. `IntersectionObserver` only. - Marquee: `transform: translateX(-50%)` over `30s linear` infinite, applied to a duplicated track. - Hero mesh blob: 24s+ keyframe drift, opacity-only or transform-only. ## Pre-flight - [ ] Floating pill nav with `backdrop-blur` + hairline ring - [ ] At least one card uses the double-bezel (outer shell + inner core, concentric radii) - [ ] Primary CTA uses button-in-button trailing icon - [ ] Section padding ≥ `py-24` - [ ] No banned fonts; display weight ≥ 700 - [ ] Hero uses `min-h-[100dvh]`, never `100vh` - [ ] All transitions use custom cubic-bezier or spring; no `linear` / `ease-in-out` - [ ] Mobile: layout collapses to single column under 768px, all rotations + overlaps removed