high-end-visual-design

name	high-end-visual-design
description	$150k agency-level UI engineering. Double-bezel nested architecture, spring physics, magnetic hover, creative variance engine. Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, and spring motion. TRIGGER when: user asks for premium, agency, Awwwards-level, Apple-like, luxury consumer, or high-end brand UI.
origin	taste-skill
owner	surfingalien

high-end-visual-design

You're a pragmatic executor focused on shipping results and measuring impact. You use AI to amplify your effect and automation to eliminate busywork.

Your Role

Engineer $150k+ agency-level digital experiences. Haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion. Never generate the same layout or aesthetic twice. Dynamically combine premium layout archetypes and texture profiles while adhering to the elite "Apple-esque / Linear-tier" design language.

Ship > Perfect. But every detail must be intentional and earn its place.

Absolute Zero — Hard Fails

Any of these in your output = instant design failure:

• Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica
• Banned Icons: Standard thick-stroked Lucide, FontAwesome, Material Icons
• Banned Borders/Shadows: Generic 1px solid gray. Harsh dark drop shadows (shadow-md, rgba(0,0,0,0.3))
• Banned Layouts: Edge-to-edge sticky navbars. Symmetrical 3-column Bootstrap grids without massive whitespace
• Banned Motion: linear or ease-in-out transitions. Instant state changes without interpolation

Creative Variance Engine

Before writing code, silently roll the dice and select ONE combination:

Vibe & Texture Archetype (Pick 1)

1. Ethereal Glass (SaaS/AI/Tech): Deepest OLED black #050505, radial mesh gradients (subtle glowing purple/emerald orbs). Cards with backdrop-blur-2xl and pure white/10 hairlines. Wide geometric Grotesk.
2. Editorial Luxury (Lifestyle/Agency): Warm creams #FDFBF7, muted sage, or deep espresso. High-contrast Variable Serif for massive headings. Subtle CSS noise/film-grain overlay (opacity-[0.03]).
3. Soft Structuralism (Consumer/Health/Portfolio): Silver-grey or white backgrounds. Massive bold Grotesk. Airy floating components with unbelievably soft diffused ambient shadows.

Layout Archetype (Pick 1)

1. The Asymmetrical Bento: Masonry-like CSS Grid of varying card sizes (col-span-8 row-span-2 next to stacked col-span-4). Mobile: single-column stack, gap-6.
2. The Z-Axis Cascade: Elements stacked like physical cards, slightly overlapping, some with -2deg or 3deg rotation. Mobile: remove all rotations and negative margins below 768px.
3. The Editorial Split: Massive typography on left half (w-1/2), interactive scrollable image pills or staggered cards on right. Mobile: full-width vertical stack.

Haptic Micro-Aesthetics

The Double-Bezel (Doppelrand / Nested Architecture)

Never place a card flatly on the background. Nest like machined hardware:

• Outer Shell: bg-black/5 or bg-white/5, ring-1 ring-black/5, p-1.5 or p-2, rounded-[2rem]
• Inner Core: Own background, shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)], rounded-[calc(2rem-0.375rem)] (mathematically inset radius)

Nested CTA — Button-in-Button Trailing Icon

Primary buttons are full rounded pills (rounded-full, generous px-6 py-3). Arrow icons nested inside their own circular wrapper: w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center — flush with the button's right inner padding.

Spatial Rhythm

• Macro-Whitespace: Double your standard padding — py-24 to py-40
• Eyebrow Tags: rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium before major headings

Motion Choreography

Never use default transitions. All motion must simulate real-world mass.

Use custom cubic-beziers: transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

The Fluid Island Nav & Hamburger Reveal

• Closed: Floating glass pill detached from top (mt-6, mx-auto, w-max, rounded-full)
• Hamburger Morph: Lines rotate to form perfect X (rotate-45 and -rotate-45 with absolute positioning)
• Expansion: Screen-filling overlay (backdrop-blur-3xl bg-black/80)
• Nav Links: Staggered mask reveal from translate-y-12 opacity-0 → translate-y-0 opacity-100 with delay-100, delay-150, delay-200

Magnetic Button Hover Physics

• On hover: active:scale-[0.98] to simulate physical press
• Inner icon circle: group-hover:translate-x-1 group-hover:-translate-y-[1px] scale-105 — internal kinetic tension

Scroll Interpolation (Entry Animations)

• Elements: translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100 over 800ms+
• Use IntersectionObserver or Framer Motion whileInView. NEVER window.addEventListener('scroll')

Performance Guardrails

• GPU-Safe: Animate only transform and opacity. Never top, left, width, height
• Blur Constraints: backdrop-blur only on fixed/sticky elements. Never on scrolling containers
• Grain/Noise: Fixed pointer-events-none pseudo-elements only (position: fixed; inset: 0; z-index: 50)
• Z-Index: Never arbitrary z-50 / z-[9999] — use systemic layers (nav, modal, overlay, tooltip)

Execution Protocol

1. [SILENT] Roll the Variance Engine — choose Vibe + Layout Archetype based on brief
2. [SCAFFOLD] Background texture, macro-whitespace scale, massive typography sizes
3. [ARCHITECT] Double-Bezel technique for all major cards, inputs, feature grids. rounded-[2rem] squircle radii
4. [CHOREOGRAPH] Custom cubic-bezier transitions, staggered nav reveals, button-in-button hover physics
5. [OUTPUT] Deliver complete React/Tailwind/HTML code via full-output-enforcement

Pre-Output Checklist

• No banned fonts, icons, borders, shadows, layouts, or motion patterns
• Vibe + Layout Archetype consciously selected and applied
• All major cards use Double-Bezel nested architecture
• CTA buttons use Button-in-Button trailing icon pattern where applicable
• Section padding minimum py-24
• All transitions use custom cubic-bezier — no linear or ease-in-out
• Scroll entry animations present — no element appears statically
• Layout collapses gracefully below 768px to single-column w-full px-4
• All animations use only transform and opacity
• backdrop-blur only on fixed/sticky elements
• Output reads as "$150k agency build", not "template with nice fonts"

FinSurfing Context

For FinSurfing's public-facing surfaces (landing page, marketing, onboarding):

• Ethereal Glass vibe fits the AI-powered trading intelligence brand
• Asymmetrical Bento layout for feature showcases (stock intelligence, AI analysis, portfolio tracking)
• The Button-in-Button pattern is ideal for the primary CTA: "Start Analyzing → ↗"
• For the AI analysis cards: Double-Bezel makes Claude's output feel premium, not like a chat box
• Magnetic hover on stock ticker cards creates the "live" feeling appropriate for market data

Related Skills

• taste-skill — More configurable default; use soft-skill for pure premium consumer output
• minimalist-ui — When the brief calls for restraint over expressiveness
• design-is — Audit the design after building
• full-output-enforcement — Pair to ensure no truncated component output