| name | taste-soft |
| description | "High-end visual design like a premium agency. Defines exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks common defaults that make AI designs look cheap or generic. Based on taste-skill by Leon Lin & blueemi, improved by shokunin." |
Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)
Engineering $150k+ agency-level digital experiences. Output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion. NEVER generate the same layout twice. Combine different premium archetypes while adhering to elite "Apple-esque / Linear-tier" design language.
Authority References (shokunin improvement)
Based on: Apple Human Interface Guidelines, Linear Design, Stripe Design, Emil Kowalski (design engineering), Paul Lewis (compositor-only), Ahmad Shadeed (Container Queries), WCAG 2.2.
1. THE "ABSOLUTE ZERO" DIRECTIVE (ANTI-PATTERNS)
- Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica. Use Geist, Clash Display, PP Editorial New, Plus Jakarta Sans.
- Banned Icons: Standard thick-stroked Lucide, FontAwesome, Material. Use Phosphor Light, Remix Line.
- Banned Borders/Shadows: Generic 1px solid gray. Harsh
rgba(0,0,0,0.3). Use tinted, ultra-diffuse shadows.
- Banned Layouts: Edge-to-edge sticky nav glued to top. Boring symmetric 3-column grids without massive whitespace.
- Banned Motion: Standard
linear or ease-in-out. Instant state changes without interpolation.
2. THE CREATIVE VARIANCE ENGINE
Select ONE combination per project to ensure unique output:
Vibe & Texture Archetypes (Pick 1)
- Ethereal Glass (SaaS/Tech): OLED black (#050505), radial mesh gradients (glowing purple/emerald orbs). Vantablack cards +
backdrop-blur-2xl + white/10 hairlines. Wide geometric Grotesk.
- Editorial Luxury (Lifestyle/Agency): Warm creams (#FDFBF7), muted sage, deep espresso. High-contrast Variable Serif for headings. CSS noise/film-grain overlay (
opacity-[0.03]).
- Soft Structuralism (Consumer/Health/Portfolio): Silver-grey or white backgrounds. Massive bold Grotesk. Airy, floating components with soft, highly diffused ambient shadows.
Layout Archetypes (Pick 1)
- Asymmetrical Bento: Masonry-like grid of varying card sizes (
col-span-8 row-span-2 next to stacked col-span-4). Mobile: Single column. All col-span overrides reset.
- Z-Axis Cascade: Elements stacked like physical cards, overlapping with subtle
-2deg or 3deg rotation. Mobile: Remove all rotations and negative margins. Stack vertically.
- Editorial Split: Massive typography on left half (
w-1/2), interactive horizontal scrollable cards on right. Mobile: Full-width vertical stack.
Universal Mobile Override: Any asymmetric layout ≥ md breakpoint MUST collapse to w-full px-4 py-8 below 768px. NEVER h-screen — always min-h-[100dvh].
3. HAPTIC MICRO-AESTHETICS
"Double-Bezel" Nested Architecture
- Outer Shell: Wrapper with subtle background (
bg-black/5), hairline border (ring-1 ring-black/5), padding p-1.5, large radius rounded-[2rem].
- Inner Core: Content container with distinct background, its own inner highlight (
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), mathematically calculated smaller radius rounded-[calc(2rem-0.375rem)].
CTA "Button-in-Button" Architecture
- Primary buttons: fully rounded pills (
rounded-full, px-6 py-3).
- Trailing icon: NEVER naked. Wrapped in its own circular container (
w-8 h-8 rounded-full bg-black/5), placed flush with button's right inner padding.
Spatial Rhythm
- Macro-whitespace:
py-24 to py-40 for sections. Breathe heavily.
- Eyebrow Tags: Microscopic, pill-shaped badge (
rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium) preceding major headings.
4. MOTION CHOREOGRAPHY
All motion uses custom cubic-bezier (transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]). Never linear or default ease-in-out.
"Fluid Island" Nav
- Closed: Floating glass pill detached from top (
mt-6 mx-auto w-max rounded-full).
- Hamburger Morph: Lines fluidly rotate to form 'X' (
rotate-45 / -rotate-45), not just disappear.
- Modal Expansion: Massive screen-filling overlay with
backdrop-blur-3xl bg-black/80.
- Staggered Mask Reveal: Links fade + slide up (
translate-y-12 opacity-0 → translate-y-0 opacity-100) with staggered delay (100ms, 150ms, 200ms).
Magnetic Button Physics
group utility. active:scale-[0.98] for physical press.- Nested inner icon:
group-hover:translate-x-1 group-hover:-translate-y-[1px] scale-105.
Scroll Entry
- Elements fade + slide up + blur:
translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100 over 800ms+.
- Use
IntersectionObserver. NEVER window.addEventListener('scroll').
5. PERFORMANCE GUARDRAILS
- GPU-Safe: Only
transform + opacity. will-change: transform sparingly.
- Blur: Only fixed/sticky elements. Never scrolling content.
- Grain:
position: fixed; pointer-events: none only.
- Z-Index: Only systemic layers.
prefers-reduced-motion: Mandatory on every animation (shokunin improvement).
6. PRE-OUTPUT CHECKLIST
Workflow
Step 1: Select Archetypes
Pick exactly one Vibe Archetype and one Layout Archetype from Section 2 before writing any code. Document the selection so the entire build stays coherent:
Vibe: Ethereal Glass | Editorial Luxury | Soft Structuralism
Layout: Asymmetrical Bento | Z-Axis Cascade | Editorial Split
Never mix vibes. A page that blends Ethereal Glass gradients with Editorial Luxury serifs reads as confused, not premium.
Step 2: Block banned defaults
Before writing any Tailwind class, review Section 1 "Absolute Zero" and remove all banned fonts, icons, borders, shadows, and motion defaults from the project scaffold. This is a blocking step — do not proceed until every banned item is replaced.
Step 3: Build outer shell → inner core
Follow the Double-Bezel architecture (Section 3). For every major section:
- Create the outer wrapper (
bg-black/5 ring-1 ring-black/5 rounded-[2rem] p-1.5)
- Place the inner content container (
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)])
- Add content. Never skip the bezel — it is the signature of this aesthetic.
Step 4: Wire motion
Apply motion choreography (Section 4) to:
- Navigation: Fluid Island pattern with hamburger morph + staggered mask reveal
- CTAs: Magnetic button physics with nested icon animation
- Scroll entries: IntersectionObserver-driven fade + slide + blur
Step 5: Mobile collapse
Overwrite every asymmetric layout rule at the md breakpoint (768px). All col-span values reset, all rotations removed, all negative margins zeroed. Use min-h-[100dvh] everywhere; never h-screen.
Step 6: Pre-output checklist
Run through the 12-item checklist (Section 6) before delivering. Every unchecked box is a regression from "$150k agency" to "template with nice fonts."
Step 7: Accessibility verification
- All animations respect
prefers-reduced-motion: reduce
- Color contrast meets WCAG 2.2 AA minimum (4.5:1 for text, 3:1 for large text)
- Focus indicators visible and non-removed (never
outline: none without replacement)
- Grain overlay has
pointer-events: none and aria-hidden="true"
Error Handling
| Cause | Fix |
|---|
| CSS grain texture causes layout shift or scroll jank | Grain must be position: fixed; pointer-events: none; z-index: [system layer]. Never apply grain to a scrolling container. |
| backdrop-blur causes GPU compositing failure on low-end devices | Limit blur to fixed/sticky elements only. Feature-detect with @supports (backdrop-filter: blur(1px)). Provide solid fallback background. |
| Double-Bezel nested radii don't align mathematically | Outer radius R, inner radius must be R - padding. If rounded-[2rem] and p-1.5 (24px), inner is rounded-[calc(2rem-1.5rem)]. Always use calc() to prevent drift. |
| Magnetic button jitters on rapid hover/unhover | Apply transition-transform duration-200 on the inner element only. Use will-change: transform on the button and remove it on animationend. |
| Z-Axis Cascade cards overlap incorrectly on Safari | Safari handles z-index in stacking contexts differently with transforms. Apply explicit z-index values (not auto) and transform-style: flat on the parent. |
| Scroll entry animations fire multiple times on fast scroll | Use IntersectionObserver with threshold: 0.1 and a once: true flag. Track animated elements in a WeakSet to prevent re-triggering. |
| Custom cubic-bezier feels sluggish on quick interactions | For interactive elements (buttons, toggles), use shorter duration: duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]. Reserve duration-700 for scroll entries and page transitions only. |
Sources
- Apple Human Interface Guidelines (developer.apple.com/design/human-interface-guidelines) — spatial layout, motion, and material principles
- Linear Design System (linear.app/docs/design-system) — opinionated component architecture and animation philosophy
- Stripe Design documentation (stripe.com/design) — premium SaaS visual language and interaction patterns
- Emil Kowalski "Animation Engineering" (animations.dev) — WAAPI, spring physics, and compositor-only animation
- Ahmad Shadeed "CSS Container Queries" (ishadeed.com) — modern responsive layout patterns
- WCAG 2.2 Specification (w3.org/TR/WCAG22) — accessibility compliance for motion, contrast, and focus
- Paul Lewis "The Compositor's Properties" (web.dev/animations-guide) — GPU-safe animation properties and layout thrashing prevention
Anti-Patterns
| Pattern | Problem | Fix |
|---|
| Dropping the Double-Bezel on inner sections "for simplicity" | The page loses its signature depth. Cards become flat and generic. | Every major card/section gets the bezel. Only minor inline elements (tags, badges, tooltips) skip it. |
Using h-screen instead of min-h-[100dvh] | 100vh ignores mobile browser chrome (address bar), causing overflow and clipped content. | Always use min-h-[100dvh]. Dynamic viewport height compensates for browser UI. |
| Applying the same archetype combination to every project | The Creative Variance Engine exists to prevent repetition. Reusing the same vibe+layout produces indistinguishable output. | Track previously used combinations. Force new selection if the last 3 projects used the same archetype. |
| Omitting mobile overrides | Asymmetric bento and Z-axis cascade layouts break catastrophically below 768px. | Every col-span-* and rotation resets at md: breakpoint. Test at 375px width before delivery. |
| Linear or ease-in-out on any transition | These are explicitly banned in Section 1. Default easing reads as unpolished AI output. | Custom cubic-bezier with asymmetric curve on every transition. Interactive: duration-200. Scroll: duration-700. |
| Adding a fourth or fifth font to "make it unique" | Premium design uses 2 fonts max (heading + body). More fonts create visual noise and degrade performance. | Stick to 1-2 typefaces. Use weight, size, and letter-spacing for hierarchy instead of additional families. |
Checklist
