open-design/skills/web-prototype-taste-soft/SKILL.md

name	description
web-prototype-taste-soft	Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.

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 — 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