Ui Engineering

UI Engineering Skill

Overview

This skill provides a comprehensive library of UI Engineering Specifications. Each specification acts as a "stylesheet for logic", defining the exact colors, typography, interactions, and mental models for a specific style.

When to use:

• "Design a website like Apple"
• "Create a personal blog"
• "Build a dashboard like Stripe"
• "Make a PPT-style website"

How to Use

1. Identify the Style

First, determine the most appropriate style for the user's request.

• Consult Registry for a complete list of 60+ styles.

2. Read the Spec

Once a style is identified (e.g., stripe, personal_blog), read the corresponding reference file.

• Example: If the style is stripe, read references/stripe.md.

3. Apply the Rules

Use the Design Tokens, Component Recipes, and Tech Stack defined in the spec references/[spec_name].md to generate code. Do not deviate from the spec's defined hex codes or physics unless explicitly asked.

Available References

Core Registry

• Meta Registry: The master index of all styles, categorized by industry and vibe.

High-Frequency Styles

• SaaS / Fintech: Stripe, Linear
• Content / Blog: Personal Blog, Notion
• Presentation: Presentation Scroll
• Big Tech: Apple, Google, Microsoft

Skill Structure

ui-engineering/
├── SKILL.md
└── references/
    ├── _meta_registry.md  <- START HERE
    ├── apple.md
    ├── stripe.md
    ├── personal_blog.md
    ├── ... (60+ specs)

Pro UI Engineering Skill (Current Best Practice)

Created by [云中江树 (Yunzhong Jiangshu)](https://github.com/yzfly)

>

"Style is not just decoration. It is a contract of expectations between the tool and the user."

This repository contains the UI Engineering Skill, an expert system for AI agents (Claude, Cursor, Windsurf) to generate high-quality, engineering-grade User Interfaces.

It is designed to solve the "generic UI" problem by providing LLMs with 60+ detailed specifications from world-class design systems (Stripe, Apple, Linear, Airbnb, etc.).

🚀 Features

• 60+ Design Systems: Detailed specs for Stripe, Apple, Linear, Notion, Vercel, and more.
• Engineering Specs: Go beyond vague descriptions. This skill provides:
• Design Tokens: Exact color palettes, typography scales, and shadows.
• Component Recipes: Copy-paste ready Tailwind/CSS implementation patterns.
• Motion Physics: Transition curves, spring settings, and interaction models.
• Mental Models: Teaches the AI why a design works (e.g., "Apple is Premium Glass", "Stripe is Invisible Precision").

📦 Installation

To use this skill with Claude or Cursor:

1. Clone this repository:

   git clone https://github.com/yzfly/pro-ui-engineering-skill.git

2. Import into your Agent:

• Claude Desktop / MCP: Add the path to your agent's configuration.
• Cursor: Add the SKILL.md to your .cursorrules or project instructions.

📖 Usage Examples

Once installed, you can ask your AI agent to design with specific "vibes".

1. The "Stripe" Look (Fintech, SaaS)

"Design a settings page using the Stripe spec. I want that invisible precision feel."

2. The "Personal Blog" (Content-First)

"Build a blog post layout using the Personal Blog spec. Focus on typography and digital garden aesthetics."

3. The "Presentation" (Marketing)

"Create a product landing page using the Presentation Scroll spec. Make it feel like a PPT deck with snap scrolling."

📚 Available Specs (Partial List)

📄 License

MIT License. Free to use for personal and commercial projects. Copyright (c) 2024 云中江树 (Yunzhong Jiangshu).

UI Engineering Spec Registry

Usage Guide (For AI Agents)

When a user asks to "design a website" or "build a component", analyse their Intent, Industry, and Vibe. Match those keywords to the Recommended Spec below.

Do not guess. Use the Spec file to determine the Tech Stack, Colors, and Interactions.

1. The "Big Tech" Standards (Safe, Reliable, Familiar)

2. The "Fortune 500" Brand Leaders (Corporate, Premium, Marketing)

3. The "Industry Archetypes" (360° Sector Leaders)

4. The "Awwwards Classics" (Experimental & Artistic)

5. The "Visual Trends" (Dribbble & Future)

6. The "Apple Design Award Winners" (Native Excellence)

7. The "Game UI Masterpieces" (Interactive Art)

8. The "Developer Culture" (Geek Aesthetics)

9. The "Design Leaders" (Modern, Trendy, Startup)

3. The "Master Series" (Artistic, Unique, High-End)

4. The "Asian Tech" Giants (Mobile-First, Super-App)

10. Personal & Editorial (Content-First)

Decision Logic Example

• User: "I want to build a super fast task manager for hackers."
• Agent: Matches Fast + Task + Hacker -> Select `linear` or `paco`.
• User: "I need a warm, friendly site for my bakery."
• Agent: Matches Warm + Friendly -> Select `airbnb` or `notion`.
• User: "Build a high-end portfolio for a fashion photographer."
• Agent: Matches Portfolio + Fashion -> Select `editorial`.

UI Engineering Spec: Active Theory

1. Engineering Context

Mental Model: "The Liquid Screen". The browser canvas is a fluid medium. Water ripples, particles flow, and glass shatters. It is technically demanding and visually overwhelming (in a good way). It feels like a high-end console menu.

Key Traits:

• Particles: Everything is made of dots or fluid simulation.
• Shaders: Custom GLSL shaders for distortion and post-processing.
• Navigation: Often circular or non-linear.

2. Tech Stack Recommendations

• 3D: Three.js (Raw or VIA framework).
• Shaders: GLSL (Essential).
• Framework: React (for UI layer over the canvas).

3. Design Tokens

3.1 Colors (Neon Dark)

• Bg: #000000 (Void).
• Particles: #FFFFFF (White) or Gradient (#FF00CC to #00FFFF).
• Glow: Bloom post-processing is heavily used.

3.2 Typography

• Font: Monument Extended or similar Techno-Sans.
• Style: Uppercase, tracked out (tracking-widest).
• Effect: Text often has a "glitch" or "wave" displacement on hover.

4. Component Recipes

The "Water Ripple"

• Effect: Mouse movement creates a trail in a fluid velocity map.
• Visual: Distorts the background image or displacement map.

The "Particle Text"

• Geometry: Text is converted to thousands of Points.
• Interaction: Mouse repels particles (Explosion effect) which then reform.

The "Tunnel Navigation"

• Camera: Moves forward through a 3D tunnel of images.
• Speed: Controlled by scroll or mouse hold.

5. Interaction Patterns

• Preloader: A complex visual loading state (Percentage + Visual) is required due to asset weight.
• Sound: Ambient audio loops and UI hover "ticks" are standard.

UI Engineering Spec: Aesop

1. Engineering Context

Mental Model: "The Library Store". Aesop is the gold standard for luxury e-commerce. It ignores conversion-rate-optimization trends (big red buttons, urgency). Instead, it favors calm, literary storytelling, muted colors, and intellectual respect for the user. It feels like walking into a spa.

Key Traits:

• Cream & Black: No white backgrounds. The base is always a warm cream/beige.
• Literary Typography: Serif dominance. Product descriptions read like poetry.
• Grid Structure: Rigid, modernist grid, often with plenty of negative space.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Carousel: Swiper.js (Aesop loves horizontal scrolling product rails).
• Images: High-fidelity, un-cropped product photography with transparent backgrounds.

3. Design Tokens

3.1 Colors (Organic & Earthy)

• Bg Page: #FFFEF2 (Aesop Cream) or #333333 (Charcoal for some sections).
• Text Main: #333333 (Soft Black).
• Border: #333333 (Thin, 1px borders).
• Accent: Muted tones only (Olive, Clay, Slate) extracted from product labels.

3.2 Typography

• Font: Suisse Int'l (Grotesk) and Zapf Humanist (Optima-like Serif).
• Scale: Body text is often 16px. Headings are modest.
• Layout: Text is often split into two columns (Left: Title, Right: Body).

4. Component Recipes

The "Product Strip"

• Layout: Horizontal repeating flex container.
• Card: w-[300px] flex-shrink-0 flex flex-col items-center.
• Image: Centered, no border.
• Designation: "Skin Care" (Small sans-serif).
• Title: "Parsley Seed Serum" (Serif or Bold Sans).
• Action: "Add to your cart - $85.00" (Text link, not a button).

The "Literary Quote"

• Bg: Full width.
• Content: A philosophical quote in the center.
• Style: Italic Serif, large spacing.

The "Navigation Bar"

• Position: Sticky top.
• Style: Minimal text links only. No icons. "Shop", "Read", "Stores", "Search".
• Bg: Matching page background (Cream).

5. Interaction Patterns

• Slow Fade: Page loads are often accompanied by a slow opacity fade-in.
• Hover: No motion. Just a subtle underline or text color change. Dignified.

UI Engineering Spec: Airbnb

1. Engineering Context

Mental Model: "Modern Hospitality". Airbnb's design is warm, inclusive, and visual. It frames high-quality photography with generous whitespace and soft shadows. It avoids "tech" aesthetics (no glitches, no neon). It feels like a high-end travel magazine.

Key Traits:

• Photography First: Images are full-width or large cards.
• Roundness: Generous curves (24px+).
• Shadows: Soft, elevated shadows.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Carousel: Swiper.js (The image slider is core).
• Maps: Mapbox GL JS (Custom styed).

3. Design Tokens

3.1 Colors

• Brand: #FF385C (Rausch - Pinkish Red)
• Text: #222222 (Mine Shaft - High constrast)
• Text Secondary: #717171 (Gray)
• Border: #DDDDDD (Light gray dividers)
• Bg: #FFFFFF

3.2 Typography

• Font: Airbnb Cereal (Circular sans-serif) -> Circular -> Inter.
• Weights: Heavy use of 800 (ExtraBold) for titles vs 400 (Regular) for body.

4. Component Recipes

The "Listing Card"

• Image: aspect-[20/19] rounded-xl object-cover
• Typography:
• Location: font-semibold text-[#222222]
• Distance: text-[#717171]
• Price: font-semibold text-black span font-normal (per night).
• Navigation: Dot pagination overlay on image.

The "Search Pill" (Header)

• Container: rounded-full border shadow-sm hover:shadow-md transition-shadow
• Layout: Flex row with dividers h-[24px] w-[1px] bg-gray-300.
• Button: Brand color circle button with search icon.

The "Primary Button" (Gradient)

• Bg: bg-gradient-to-r from-[#E61E4D] to-[#E31C5F] (Subtle internal gradient).
• Size: Large, touch-friendly (48px or 56px height).
• Radius: rounded-lg (8px).

5. Interaction Patterns

• Map Interaction: Floating pill buttons on map (transform: translate(-50%)).
• Modal: Bottom sheets on mobile, centered modal with rounded corners on desktop.

UI Engineering Spec: Alibaba

1. Engineering Context

Mental Model: "Certainty". Alibaba's design (Ant Design) is built for complex systems and commerce. It prioritizes "Certainty" (Predictable interactions) and "Naturalness". It is robust, capable of handling complex forms and massive datasets.

Key Traits:

• Ant Blue & Alibaba Orange: Enterprise vs Commerce.
• 14px Standard: The base font size is strictly 14px.
• Grid: 24-column layout system.

2. Tech Stack Recommendations

• Styling: Tailwind CSS (custom config to match Ant).
• Component Lib: Ant Design (React).
• Charts: G2 / AntV (Best in class data viz).

3. Design Tokens

3.1 Colors

• Ant Blue: #1890FF (Daybreak Blue).
• Ali Orange: #FF5000 (Taobao/Marketing).
• Success: #52C41A (Polar Green).
• Border: #D9D9D9.
• Divider: #F0F0F0.

3.2 Typography

• Font: Alibaba PuHuiTi (Custom Sans) / -apple-system.
• Size: 14px (Base). Small is 12px.
• Line Height: 1.5715.

4. Component Recipes

The "Commerce Card" (Goods)

• Image: Square aspect ratio.
• Price: Key visual element.
• Symbol: text-xs.
• Integer: text-xl font-bold.
• Decimal: text-xs.
• Color: #FF5000.
• Radius: rounded-[12px].

The "Step Form"

• Steps: Horizontal progress bar with numbered circles.
• Blue: #1890FF for finished steps.
• Gray: #000000 (25%) for pending.

The "Search Bar" (Hero)

• Shape: rounded-full (Capsule).
• Border: border-[2px] border-[#FF5000].
• Button: Right-aligned, #FF5000 background, textual "Search".

5. Interaction Patterns

• Empty States: Illustrated playful mascots when no data is found.
• Pagination: Standard bottom-right pagination for tables.
• Drawers: Side-panel drawers for editing complex objects without leaving context.

UI Engineering Spec: Apple (HIG)

1. Engineering Context (The "Why")

Mental Model: "Premium Glass". Apple's design is about content deference. The UI retreats. Materials (Blur) providing context. It is premium, refined, and fluid. The boundary between software and hardware disappears using full-bleed layouts and physics-based gestures.

Key Traits:

• Materials: Frosted glass (Backdrop Blur) is the defining texture.
• Fluidity: 1:1 gesture tracking.
• Continuity: Smooth corners (Squircle) and refined typography.

2. Tech Stack Recommendations

• Framework: React / Next.js
• Styling: Tailwind CSS + Custom Utilities (for Squircles and Blurs).
• Animation: Framer Motion (Spring Physics are mandatory).
• Icons: SF Symbols (Exported as SVG) or Lucide with rounded terminals.

3. Design Tokens (The "Physics")

3.1 Colors (System Colors)

Apple uses specific semantic colors that adapt to Light/Dark mode automatically.

:root {
  /* Materials */
  --material-regular: rgba(255, 255, 255, 0.8); /* With Backdrop Blur */
  --material-thick: rgba(255, 255, 255, 0.95);
  --material-chrome: rgba(255, 255, 255, 0.5);

  /* Backgrounds */
  --bg-system: #F2F2F7; /* Light Mode Grouped BG */
  --bg-card: #FFFFFF;

  /* Typography */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);

  /* Tints */
  --tint-blue: #007AFF;
}

.dark {
  --bg-system: #000000;
  --bg-card: #1C1C1E;
  --separator: #38383A;
  --label-primary: #FFFFFF;
  --label-secondary: rgba(235, 235, 245, 0.6);
}

3.2 Typography scales

Font Family: SF Pro Display (Headings) / SF Pro Text (Body). Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...

Crucial Implementation Detail: Apple fonts use variable tracking.

• Large Title (34px): tracking-tight (-0.02em)
• Body (17px): tracking-normal (-0.01em)
• Caption (12px): tracking-wide (0.02em) -- Important! Small text needs room.

3.3 Surfaces & Blur

The "Frosted Glass" effect is key.

• CSS: backdrop-filter: blur(20px) saturate(180%) bg-white/70
• Usage: Sidebars, Modals, Sticky Headers.

4. Component Recipes

The "Squircle Card"

Apple does not use standard border-radius. They use "Continuous Curvature" (Superellipse).

• Web Implementation: Since CSS border-radius is imperfect, use clip-path for large elements or mask-image for complex ones if absolute fidelity is needed.
• Standard Approximation: rounded-[18px] or rounded-[22px].
• Bg: bg-white dark:bg-[#1C1C1E]
• Shadow: shadow-sm (Very subtle, diffuse).

The "List Item" (Grouped)

• Container: bg-white rounded-[10px] mx-4 overflow-hidden
• Item: h-[44px] flex items-center px-4 border-b border-[#3C3C43]/20 last:border-0
• Text: text-[17px] text-[--label-primary]

The "Segmented Control"

• Container: bg-[#767680]/12 p-[2px] rounded-lg h-[32px]
• Thumb: bg-white shadow-sm rounded-[6px] h-full (Use Framer Motion layoutId to slide this thumb).

5. Interaction Patterns

• Scale on Touch: Distinctive active:scale-95 or active:scale-97 on almost all tappable elements.
• Springs: Use type: "spring", stiffness: 300, damping: 30 for snappy but realistic UI movement.

UI Engineering Spec: Arc (The Browser Company)

1. Engineering Context

Mental Model: "Digital Craftsmanship". Arc feels handmade. It rejects the "flatness" of the web. It embraces texture (grain), organic shapes (irregular borders), and playfulness. It is software with a pulse.

Key Traits:

• Texture: Grain/Noise is ubiquitous.
• Squircles: No hard corners.
• Translucency: The desktop wallpaper bleeds through.
• Play: Physics-based bouncing, confetti, and color.

2. Tech Stack Recommendations

• Styling: CSS Modules / Tailwind.
• Effects: SVG Filters (for noise), CSS mix-blend-mode.
• Animation: Framer Motion (Springs are loose and bouncy).

3. Design Tokens

3.1 Colors (The Boost Palette)

Arc uses Gradients as primary colors.

• Space Gradient: Linear gradient to-b (e.g., #E0C3FC to #8EC5FC).
• Surface: rgba(255,255,255,0.9) with backdrop blur.
• Border: Often colorful, not gray.

3.2 Typography

• Headings: PP Eiko (Serif, High contrast) or Inter.
• UI: SF Pro / Inter.
• Trait: Mixes Serif headings with Sans body for a "Editorial" feel.

3.3 Texture (The Signature)

You MUST implement the noise layer to get the Arc feel.

.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url('/noise.png'); /* A static tv noise pattern */
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

4. Component Recipes

The "Sidebar" (Translucent)

• Bg: bg-white/70 dark:bg-black/60
• Blur: backdrop-blur-xl
• Border: border-r border-black/5

The "Squircle Container"

• Radius: rounded-2xl (approx 16px-20px).
• Border: border border-transparent (often masked with gradient).
• Shadow: Large, colorful diffuse shadows.

The "Command Bar" (Spotlight)

• Centering: Absolute center.
• Size: Large and chunky. h-[60px].
• Shadow: shadow-2xl.
• Iconography: Large, friendly icons (24px+).

5. Interaction Patterns

• Overshoot: When scrolling or opening modals, use a spring curve that overshoots slightly and settles (bouncy).
• Hover: Elements scale up (scale-105) rather than just changing color.

UI Engineering Spec: Bilibili

1. Engineering Context

Mental Model: "The Playground". Bilibili is high-energy. It mixes "Cute" (Pink) with "Tech" (Blue). The interface is dense, designed for high-speed information consumption (Bullet Chat). It features gamification elements (Badges, Levels) on every surface.

Key Traits:

• Pink & Blue: The definitive duo.
• Density: Columns of video cards (Waterfall).
• Overlay: Text over images (Bullet Chat).

2. Tech Stack Recommendations

• Styling: Tailwind CSS / Less.
• Grid: Masonry Layout (react-masonry-css).
• Video: Custom Player with Danmaku (Bullet Chat) engine (danmaku.js).

3. Design Tokens

3.1 Colors (ACG Palette)

• Primary Pink: #FB7299 (The "Little Pink" app).
• Primary Blue: #23ADE5 (Tech/Level 6).
• White: #FFFFFF
• Gray: #F4F5F7 (Background).
• Text Main: #212121.
• Text Gray: #9499A0 (Key for secondary info like view counts).

3.2 Typography

• Font: HarmonyOS Sans / PingFang SC.
• Style: Rounded sans-serifs preferred.
• Size: Mobile-first sizing (14px titles, 12px meta).

4. Component Recipes

The "Video Card" (Waterfall)

• Container: bg-white rounded-[6px] overflow-hidden shadow-sm hover:shadow-md.
• Image: Aspect ratio 16:9 (Desktop) or 3:4 (Mobile).
• Stats Overlay: Gradient overlay at bottom of image (bg-gradient-to-t from-black/60 to-transparent) with white text icons (Play count, Danmaku count).

The "Follow Button"

• Bg: bg-[#FB7299] hover:bg-[#ff85a7].
• Text: text-white.
• Shape: rounded-[4px].
• Animation: On click, morphs to Gray "Followed".

The "Danmaku" (Bullet Chat)

• Layer: Absolute overlay on top of video canvas.
• Text: White text with black text-stroke (text-shadow: 1px 1px 2px black).
• Motion: Linear translation from Right to Left.

5. Interaction Patterns

• Infinite Scroll: The feed never ends.
• Hover Autoplay: Hovering a video card plays a muted preview (2x speed often).
• Gamification: Success = XP +1 animation popup.

UI Engineering Spec: Bruno Simon

1. Engineering Context

Mental Model: "The Playground". The website is a game. Navigation is movement. The user is a player. Content is discovered, not read. It uses Low Poly aesthetics and physics (cars, balls, gravity) to make the web feel tactile and joyful.

Key Traits:

• Vehicle Controller: Navigation is done by driving a car (or avatar).
• Physics: Everything has rigid body physics (cannon.js).
• Low Poly: 3D assets are simple, colourful, and performant.

2. Tech Stack Recommendations

• 3D: Three.js + React Three Fiber.
• Physics: Cannon.js or Rapier (Modern WASM alternative).
• Framework: React (for the overlay UI).

3. Design Tokens

3.1 Colors (Toy Box)

• Bg: #E8F0F7 (Sunny Sky Blue).
• Ground: #FDFDFD.
• Accent: #E76E65 (Red Brick), #69C4FF (Blue Water).
• Shadow: Baked lighting (Lightmaps) rather than real-time shadows for performance.

3.2 Typography

• Font: Poppins or Fredoka One (Rounded, friendly).
• Use: 3D Text geometry floating in the world.

4. Component Recipes

The "Vehicle" (Camera Controller)

• Model: Low poly car.
• Controls: WASD / Arrow keys.
• Camera: Follow camera with smooth damping.

The "Checkpoint" (Section)

• Visual: A glowing 3D gate or platform.
• Interaction: Driving through it triggers a modal or UI overlay.
• Label: Large 3D text floating above.

The "Interactive Object"

• Behavior: Dynamic bodies (Bowling pins, boxes).
• Feedback: Sound effects on collision (Bonk!).

5. Interaction Patterns

• Discoverability: Hidden areas ("Easter eggs") encourage exploration.
• Loading Screen: A mini-game or interactive loader while assets bake.

UI Engineering Spec: ByteDance (TikTok)

1. Engineering Context

Mental Model: "Immersive Flow". The design is aggressive and immersive. It removes the "chrome" (UI bars) to let the video fill 100% of the screen. Controls hover over the content. Aesthetics are Cyberpunk/Glitch (Cyan + Pink).

Key Traits:

• Full Screen: No margins. No white space.
• Overlay UI: Text shadow is mandatory for readability.
• Glitch: The split Cyan/Red vibration effect.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Media: Native <video> with IntersectionObserver for auto-play.
• Effects: CSS text-shadow and mix-blend-mode.

3. Design Tokens

3.1 Colors (Cyberpunk)

• Bg: #000000 (Pure Black).
• Text: #FFFFFF.
• Accent Red: #FE2C55 (TikTok Red).
• Accent Cyan: #25F4EE (TikTok Cyan).

3.2 Typography

• Font: Proxima Nova -> Sofia Pro.
• Style: Geometric Sans.
• Weights: Heavy Bold for headlines.

4. Component Recipes

The "Glitch Text"

• CSS:

  .glitch {
    text-shadow: 2px 2px 0px #25F4EE, -2px -2px 0px #FE2C55;
    animation: jitter 0.1s infinite;
  }

The "Floating Action Sidebar"

Right-aligned vertical stack of icons over video.

• Structure: Flex column.
• Icon: White fill, drop-shadow-md.
• Text: Small white text below icon, font-weight: 600.
• Avatar: Circle with a "Plus" badge at the bottom that disappears after following.

The "Music Disc"

Bottom right spinning disc.

• Animation: animate-spin (linear, infinite, 5s duration).
• Notes: Floating music notes rising from the disc (opacity: 0 -> 1 -> 0, translate-y).

5. Interaction Patterns

• Snap Scroll: scroll-snap-type: y mandatory. One flick = exactly one full video.
• Double Tap: Heart animation appears at tap location.
• Long Press: "Not Interested" / Actions menu.

UI Engineering Spec: Cash App

1. Engineering Context

Mental Model: "The Glitch World". Cash App broke Fintech design. It ignores "trust blue" and "safety grids". It uses Dali-esque surrealism, floating 3D coins, green glitch effects, and massive bold type. It feels like a music video, not a bank.

Key Traits:

• Surreal 3D: Floating objects that defy gravity.
• Cash Green: A radioactive green (#00D632).
• Motion: Everything floats, twists, or glitches.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• 3D: Three.js / React Three Fiber (Required for the floaty elements).
• Shaders: Custom GLSL shaders for distortion effects.
• Type: Monument Extended or similar wide sans.

3. Design Tokens

3.1 Colors (Radioactive)

• Bg: #000000 (Void Black) or #00D632 (Cash Green).
• Text: #FFFFFF.
• Accent: #00D632.
• Spectrum: Eye-searing gradients (Pink, Cyan, Yellow) used in 3D lighting.

3.2 Typography

• Font: Agrandir or Monument Extended (Wide, bold grotesque).
• Size: Massive. text-9xl on desktop.
• Icons: Custom surreal icons (Eye, Pyramid, Coin).

4. Component Recipes

The "Floating Hero"

• Bg: Black.
• Foreground: A phone mockup.
• Surroundings: 3D coins, cards, and weird shapes (staircases, pillars) orbiting the phone.
• Interaction: Mouse movement creates parallax on all 3D objects.

The "Glitch Text"

• Effect: Text flickers on hover.
• Mix: Mix of Upper and Lowercase in weird places.

The "Download CTA"

• Style: Brutalist/Retro.
• Border: Thick outlines.
• App Store Badge: Custom, monochrome, high contrast.

5. Interaction Patterns

• Scroll Distortion: As you scroll, the page might warp or separate RGB channels.
• Infinite Loop: Background textures that slide forever.

UI Engineering Spec: Claude (Anthropic)

1. Engineering Context

Mental Model: "The Warm Paper". Claude's design is the antithesis of the cold, blue/black tech aesthetic. It feels like a high-quality printed book or a warm letter. It uses serif fonts, earthy tones (Sand, Stone), and soft rounded corners to convey safety, helpfulness, and humanity.

Key Traits:

• Serif Headings: A distinct move away from the all-sans trend.
• Warmth: No pure white (#FFF) backgrounds. Everything is slightly tinted (Sand).
• Restraint: Minimal shadows, minimal layers.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Typography: Explicit loading of high-quality Serif web fonts.
• Markdown: react-markdown with extensive typography plugin customization to match the "prose" feel.

3. Design Tokens

3.1 Colors (Earthy Tones)

• Bg Page: #FAF9F6 (Alabaster / Warm White).
• Bg Surface: #FFFFFF (Cards).
• Text Main: #141413 (Near Black, but warmer).
• Text Secondary: #605F5B (Stone Gray).
• Accent Primary: #D97757 (Terracotta / Burnt Orange).
• Accent Secondary: #D4C5B0 (Biscuit).
• Border: #E6E4DD (Warm Gray).

3.2 Typography

• Headings: Tiémpos Headline or Lora or Merriweather.
• Body: Söhne or Inter (Clean Sans for readability).
• Style:
• H1: Serif, Font Weight 400 (Regular), Tight tracking.
• Body: Sans, Line Height 1.6 (Relaxed).

4. Component Recipes

The "Conversation Bubble" (Human vs AI)

• User: bg-[#F0EEE6] (Warm Gray), text-[#141413]. Rounded-[8px].
• Claude: bg-transparent. Serif H2/H3s inside.

The "Artifact" (Side Panel)

• Bg: bg-white border-l border-[#E6E4DD].
• Shadow: shadow-xl (Soft, spread out).
• Header: bg-[#FAF9F6] border-b border-[#E6E4DD].

The "Input Area"

• Container: bg-white border border-[#E6E4DD] rounded-[12px] shadow-sm.
• Focus: ring-2 ring-[#D97757]/20 border-[#D97757].
• Icon: Thin, refined stroke icons.

5. Interaction Patterns

• Gentle Fade: Transitions are slow and soft (duration-300 ease-in-out).
• Streaming: Text appears smoothly, but without the "retro" cursor flashing of OpenAI. It just flows.

UI Engineering Spec: Discord

1. Engineering Context

Mental Model: "Digital Living Room". Discord is dense but cozy. It manages multiple columns of information (Serves -> Channels -> Chat -> Members) without feeling corporate. It achieves this through soft gray backgrounds and rounded, playful shapes.

Key Traits:

• Cozy Layout: Compact lists with 8px paddings.
• Theme: Customizable, but the default Dark Theme is iconic.
• Avatars: Circular, everywhere.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Virtualization: react-virtuality (Chat lists are heavy).
• Icons: FaT (FontAwesome-ish) thick filled icons or Heroicons Solid.

3. Design Tokens

3.1 Colors (The Gray Spectrum)

Discord has a very specific hierarchy of grays.

• Bg Server List: #202225 (Darkest)
• Bg Sidebar: #2F3136
• Bg Chat: #36393F
• Bg Header: #36393F with border-b border-[#202225]
• Brand: #5865F2 (Blurple)
• Green: #3BA55C (Online)

3.2 Typography

• Font: gg sans (Custom) -> Uni Sans -> Inter.
• Weight: Bold headings, Medium UI text.
• Sizes: 16px (Chat message), 14px (Sidebar channel).

4. Component Recipes

The "Server Icon" (Pill Navigation)

• Container: w-[48px] h-[48px] rounded-[50%] bg-[#36393F] transition-all duration-200
• Hover: hover:rounded-[16px] hover:bg-[#5865F2] (Circle to Squircle transition).
• Active Indicator: White pill on the left side (h-[8px] hover:h-[20px] active:h-[40px]).

The "Channel Item"

• Layout: flex items-center px-2 py-1 mx-2 rounded-[4px] text-gray-400 hover:bg-[#393C43] hover:text-gray-200
• Active: bg-[#393C43] text-white
• Icon: Hash # icon (text-gray-500).

The "Chat Bubble" (Cozy Mode)

• Hover: hover:bg-[#32353B] (The whole message row highlights).
• Time: Shows on hover only (in compact mode) or inline gray text.

5. Interaction Patterns

• Modals: Scale-up bounce animation (scale-0 to scale-100 with spring).
• Popouts: User profiles pop out from the side or avatar with a dark background and colored banner.

UI Engineering Spec: DJI

1. Engineering Context

Mental Model: "The Cockpit". DJI's design is about control. It is precise, high-contrast, and technical. The UI often mimics a Head-Up Display (HUD). Typography is small, uppercase, and monospaced. Backgrounds are dark gray or semi-transparent black.

Key Traits:

• Technicality: Lines, crosshairs, and data overlays.
• Monochrome: Shades of gray dominate to let the camera feed shine.
• Sharpness: 90-degree corners or very slight bevels.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Visualization: D3.js or Recharts (Customized for HUD look).
• Icons: Thin-stroke SVG icons (1px stroke).

3. Design Tokens

3.1 Colors (Technical Gray)

• Bg Dark: #1D1D1F (Main UI background).
• Bg Panel: rgba(0,0,0,0.6) (Overlay panels).
• Brand Blue: #0070D5 (Active state / Primary action).
• Text: #E5E5E5 (Off-white softness).
• Warning: #F5A623 (Critical flight info).

3.2 Typography

• Font: DJI Sans (Custom) -> Roboto -> DIN.
• Style:
• Labels: font-size: 10px, text-transform: uppercase, letter-spacing: 0.1em.
• Values: Monospaced numbers for changing data.

4. Component Recipes

The "Status OSD" (On Screen Display)

• Layout: Top bar, transparent background.
• Item: icon + text value. gap-2.
• Font: text-xs font-mono text-white shadow-sm (Shadow ensures readability over video).

The "Setting Toggle"

• Container: bg-[#333] rounded-[2px].
• State:
• Off: text-gray-400
• On: bg-[#0070D5] text-white
• Shape: Rectangular, sharp corners.

The "Telemetry Graph"

• Stroke: 1px line width.
• Fill: Linear gradient from rgba(0,112,213,0.3) to transparent.
• Grid: Dotted lines (border-dotted).

5. Interaction Patterns

• Immediate: No bounce. Interactions are mechanical switch-like.
• Sound: Standard "beep" or "click" sounds on interaction (like camera shutter).
• Warning: Flashing Red/Yellow overlay for critical alerts.

UI Engineering Spec: Duolingo

1. Engineering Context

Mental Model: "Juicy Game". Duolingo is tactile. Buttons feel like physical plastic keys. Everything bounces. There are no sharp corners. It is optimized for dopamine.

Key Traits:

• 3D Flat: Flat design with a "side" to indicate depth.
• Roundness: rounded-2xl is the minimum.
• Stroke: Thick, colored outlines on illustrations.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Animation: CSS Keyframes (Bounce) + Lottie (for characters).
• Sound: use-sound (Audio feedback is UI here).

3. Design Tokens

3.1 Colors (Candy Shop)

• Feather Green: #58CC02 (Main)
• Green Shadow: #58A700 (The "Dark Side" of the button)
• Blue: #1CB0F6 / Shadow: #1899D6
• Yellow: #FFC800 / Shadow: #EBA500
• Red: #FF4B4B / Shadow: #EA2B2B
• Gray: #E5E5E5 / Shadow: #CECECE (Disabled)

3.2 Typography

• Headings: Feather Bold (Custom bubbly font) -> Nunito (Rounded).
• Body: DIN Next Rounded -> Nunito.
• Color: #4B4B4B (Eel - Dark Gray, never black).

4. Component Recipes

The "Juicy Button" (3D Press)

This is the core interaction.

• Structure:

  .btn {
    background-color: #58CC02;
    border-bottom: 4px solid #58A700; /* The depth */
    border-radius: 16px;
    color: white;
    text-transform: uppercase;
    font-weight: 800;
    transition: all 0.1s;
  }
  .btn:active {
    transform: translateY(2px);
    border-bottom-width: 0px; /* Pressed down */
    margin-bottom: 2px; /* Maintain layout */
  }

The "Progress Bar"

• Container: bg-[#E5E5E5] rounded-full h-[16px]
• Fill: bg-[#58CC02] rounded-full with a lighter highlight streak at the top for "gloss".

The "Card Selection"

• Default: border-2 border-[#E5E5E5] shadow-[0_2px_0_#E5E5E5]
• Selected: bg-[#E2F7FF] border-[#1CB0F6] border-2 shadow-[0_2px_0_#1CB0F6] text-[#1CB0F6]

5. Interaction Patterns

• Correct Answer: Bottom sheet slides up (Green). Sound "Ding".
• Incorrect Answer: Bottom sheet slides up (Red). Sound "Bonk".
• Confetti: Essential for completing tasks.

UI Engineering Spec: Editorial (Art Direction)

1. Engineering Context

Mental Model: "The Runway". This style treats the browser canvas as a magazine spread. It ignores the "Box Model" visually (even if it uses it technically). Images overlap text. Text is gigantic. Scrolling is the primary animation driver (Scrollytelling).

Key Traits:

• Typography as Image: Fonts are so big they become graphical shapes.
• Broken Grid: Elements are intentionally misaligned or overlapping z-index.
• Smooth Scroll: Native scroll is often hijacked (via Lenis) for smoothness.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + Custom CSS (for weird positions).
• Scroll: Lenis (Virtual scroll is essential for this feel).
• WebGL: Three.js / React Three Fiber (distorted images).
• Animation: GSAP (ScrollTrigger is the industry standard here).

3. Design Tokens

3.1 Colors (Classic)

• Bg: #F4F0E8 (Warm Paper) or #1A1A1A (Charcoal).
• Text: #000000 (Ink).
• Accent: Often uses acid colors (Neon Green #CCFF00) to contrast with serif fonts.

3.2 Typography

• Heading: Large Serif (GT Alpina, Ogg, Playfair Display).
• Size: text-8xl (96px) to text-[10rem].
• Mix: Pairing a dainty Serif with a brutalist Sans-Serif / Mono.

4. Component Recipes

The "Parallax Image"

• Container: overflow-hidden.
• Image: Scale 1.2.
• Logic: Translate Y of image start: -10%, end: 10% based on scroll position within container.

The "Marquee" (Ticker)

• Content: A huge sentence repeating infinitely horizontally.
• Motion: Constant linear velocity.
• Interaction: Speeds up or reverses on scroll.

The "Sticky Section"

• Layout: Text stays pinned on the left (position: sticky), images scroll on the right.
• Transition: Text opacity fades 1 -> 0.2 as new sections arrive.

5. Interaction Patterns

• Cursor: Custom cursor (large circle or "VIEW" text) that blends with content (mix-blend-mode: difference).
• Preloader: (Controversial but common here) A percentage counter covering the screen before the "Curtain reveal".

UI Engineering Spec: Figma

1. Engineering Context

Mental Model: "The Workbench". Figma's UI is a frame for your work. It is intentionally neutral (light gray/dark gray) so it doesn't clash with the canvas. The brand personality comes out in "Selection" and "Creation" colors (vectors, bounding boxes).

Key Traits:

• 1px Precision: Borders are crisp 1px.
• Selection: High-contrast blue/purple outlines.
• Economy: Very small UI controls (switches, inputs).

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Canvas Logic: HTML5 Canvas or SVG for complex drawing areas.
• Icons: 1px stroke icons (very thin).

3. Design Tokens

3.1 Colors

• Bg App: #2C2C2C (Dark Mode UI) or #F5F5F5 (Light Mode UI).
• Bg Canvas: #1E1E1E (Dark) or #E5E5E5 (Light).
• Selection: #0D99FF (Figma Blue).
• Hover: #FFFFFF (10% opacity white overlay).
• Brand Rainbow: #F24E1E (Red), #A259FF (Purple), #1ABCFE (Blue), #0ACF83 (Green).

3.2 Typography

• Font: Inter (The standard for UI).
• Size: Extreme use of 11px and 12px (Small Labels).
• Weight: Medium (500) for labels, Regular (400) for inputs.

4. Component Recipes

The "Property Input"

Small inputs found in the sidebar.

• Height: 28px (Very compact).
• Bg: transparent hover border border-white/10.
• Focus: border border-[#0D99FF] ring-1 ring-[#0D99FF].
• Interaction: Drag-to-change value cursor functionality.

The "Layer Item"

• State:
• Selected: bg-[#0D99FF] text-white
• Hover: bg-white/5
• Icon: Type icon (Frame, Text, Component) in gray vs white.
• Indentation: 16px per depth level.

The "Toolbar"

• Location: Floating at bottom center (new UI) or Top (classic).
• Shape: rounded-xl bg-[#2C2C2C] border border-white/10 shadow-lg.
• Items: Icons only, w-[40px] h-[40px] flex center.

5. Interaction Patterns

• Direct Manipulation: Cursors change to indicate tool (Move, Scale, Rotate).
• Snapping: Visual guides (red lines) appear when alignment happens.

UI Engineering Spec: Flighty

1. Engineering Context

Mental Model: "The Live Board". Flighty keeps the user informed before they even ask. It packs immense density into small cards without feeling cluttered. It loves "Live Activities" aesthetics: black backgrounds, glowing progress bars, and high-contrast data.

Key Traits:

• Island UI: Elements often look like the Dynamic Island (Pill shapes on black).
• Proactive: Statuses are large and color-coded (Green = On Time, Red = Delay).
• Map Integration: High-fidelity, dark mode vector maps are central.

2. Tech Stack Recommendations

• Styling: Tailwind CSS (Dark mode customization is key).
• Maps: Mapbox GL JS (Dark monochromatic theme).
• Framework: Next.js (for Server Components to deliver fast data).

3. Design Tokens

3.1 Colors (Cockpit Dark)

• Bg: #000000 (True Black) or #1C1C1E (Apple Dark Gray).
• Text: #FFFFFF.
• Status Green: #34C759 (Apple Human Interface Green).
• Status Red: #FF3B30 (Apple Human Interface Red).
• Status Orange: #FF9500 (Apple Human Interface Orange).

3.2 Typography

• Font: SF Pro Rounded (or Nunito for web).
• Weight: Heavy for Data, Regular for labels.
• Numbers: Monospaced features (tnum) enabled for countdowns.

4. Component Recipes

The "Live Pill" (Dynamic Island Style)

• Container: bg-black rounded-full px-4 py-2 flex items-center justify-between.
• Content: Left: "SFO", Right: "JFK".
• Center: Plane icon on a progress track (w-full h-1 bg-gray-800 rounded-full).

The "Flight Card"

• Bg: #1C1C1E.
• Corner: rounded-2xl.
• Data: Three columns (Dep, Status, Arr).
• Typography: Giant time (text-4xl font-bold).
• Highlight: Status text is colored (text-green-500).

The "Vector Map"

• Style: Dark mode.
• Path: Geodesic curved lines (Great circle).
• Plane: Real-time icon on the path.

5. Interaction Patterns

• Haptic: Web Vibration API for critical status changes.
• Progress: Countdowns update every second.
• Expand: Clicking a flight card expands it to a full-screen detailed view.

UI Engineering Spec: Gris

1. Engineering Context

Mental Model: "The Living Painting". The UI is invisible. Interactivity is painted. Buttons are ink blots. Transitions are watercolor bleeds. It is fragile, emotional, and 2D.

Key Traits:

• Watercolor: Textures are essential. Paper grain, ink spread.
• Line Art: Ultra-fine lines (0.5px).
• Flow: Objects morph into each other (Dress becomes a mountain).

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• SVG: Essential for the line art and morphing paths.
• Filters: SVG Displacement Maps (Turbulence) for the "ink bleed" effect.

3. Design Tokens

3.1 Colors (Grief Spectrum)

• Bg: #EAECEE (Watercolor Paper).
• Ink: #2C3E50 (Dark Blue/Grey).
• Wash: #E74C3C (Red phase), #3498DB (Blue phase), #2ECC71 (Green phase).
• Gradient: No flat colors. Everything is a textured gradient.

3.2 Typography

• Font: Playfair Display or Cormorant Garamond (Elegant Serif).
• Style: Centered, widely spaced, understated.

4. Component Recipes

The "Ink Button"

• Shape: Hand-drawn circle (imperfect).
• Hover: An ink drop falls and spreads to fill the circle.
• Stroke: Trembling line effect.

The "Parallax Layers"

• Back: Blurred watercolor washes.
• Mid: Sharp vector geometry.
• Front: Silhouette foreground black.

The "Morph Text"

• Transition: Text dissolves into smoke/ink before disappearing.

5. Interaction Patterns

• Slow: No fast movements. Everything floats.
• Silence: Interactions are quiet or accompanied by cello notes.

UI Engineering Spec: Monument Valley

1. Engineering Context

Mental Model: "The Impossible Object". The UI is not 2D; it is an isometric object that can be rotated. It uses soft pastels, rigorous geometry, and impossible optical illusions (Penrose steps). It is a "Zen" interface.

Key Traits:

• Isometric: Fixed camera angle ($35.264^\circ$) is mandatory.
• No HUD: The environment is the UI.
• Pastel: Soft, dreamy color palettes that shift with "levels".

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• 3D: Three.js (Orthographic Camera is essential).
• Engine: React Three Fiber (Drei).

3. Design Tokens

3.1 Colors (Dreamscape)

• Bg: #FAD9B8 (Soft Peach) or #2C3E50 (Deep Blue Night).
• Structure: #E74C3C (Coral), #F1C40F (Yellow).
• Shadow: Deep purple shadows (#8E44AD) instead of black.
• Highlight: No specular highlights. Matte finish only.

3.2 Typography

• Font: Varela Round or Quicksand.
• Style: Minimal, floating in 3D space, sans-serif.

4. Component Recipes

The "Isometric Card"

• Geometry: A thick 3D slab (BoxGeometry).
• Camera: Orthographic.
• Interaction: Drag to rotate the entire world to reveal the back.

The "Impossible Menu"

• Visual: A Penrose Triangle that acts as the navigation.
• Selection: Clicking a face of the triangle rotates it to a new state.

The "Totem Button"

• Shape: A yellow rectangular prism with eyes.
• Behavior: Draggable. It slides along existing paths.

5. Interaction Patterns

• Rotation: The core mechanic. Rotating the view connects disconnected paths.
• Sound: Musical tones play on every interaction (Procedural audio).

UI Engineering Spec: Nier: Automata

1. Engineering Context

Mental Model: "The Android System". The UI is diegetic—it is the actual operating system of the android you are playing. It is monotone beige, utilitarian, and melancholic. It glitches when the "system" is damaged.

Key Traits:

• Monotone: 99% of the UI is Beige (#DAD4BB).
• Scanlines: Subtle CRT grid overlay on everything.
• System: Menus are lists of system parameters.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Effects: CSS Filters (Noise, Scanlines).
• Font: Monospaced only.

3. Design Tokens

3.1 Colors (YoRHa Standard)

• Bg: #CDC8B0 (Beige Dark) or #DAD4BB (Beige Light).
• Text: #4D4A40 (Dark Mud).
• Grid: #5C5950 (Thin lines).
• Glitch: #FFFFFF (Digital artifacts).

3.2 Typography

• Font: Rodin (The official font) or HelvetiPixel / Overpass Mono.
• Size: Small, dense, legible.

4. Component Recipes

The "System Menu"

• Bg: Patterned Grid (1px dots).
• List: Simple text items.
• Cursor: A square block that blinks.
• Selection: Invert colors (Text becomes Beige, Block becomes Dark).

The "Loading Boot"

• Text: "SYSTEM CHECK..." printing character by character.
• Log: Fast scrolling hex code streams.

The "Map Grid"

• Style: Wireframe 3D map.
• Color: Beige lines on Beige background (low contrast).

5. Interaction Patterns

• Audio: Selecting items makes a "blip" sound.
• Glitch: On error or hover, the element momentarily shifts pixels (transform: translate(2px)).

UI Engineering Spec: Persona 5

1. Engineering Context

Mental Model: "The Phantom Letter". The UI is an explosion of punk rebellion. It refuses to be straight. Everything is slanted, jagged, and kinetic. It uses "Ransom Note" typography and distinct black/white/red contrast.

Key Traits:

• Sharps: No rounded corners. Everything is a jagged shard.
• Kinetic: Menus don't just "appear"; they slam into the screen.
• Contrast: Pure #FF0000 Red against Black.

2. Tech Stack Recommendations

• Styling: Tailwind CSS (skew-x, rotate utilities).
• Motion: GSAP (Greensock) for the violent timing curves.
• SVG: Heavy use of clip-path for jagged container shapes.

3. Design Tokens

3.1 Colors (Rebellion)

• Bg: #FF0000 (Phantom Red) or #E60000.
• Contrast: #000000 (Ink Black) and #FFFFFF (Paper White).
• Pattern: Halftone dots and starbursts.

3.2 Typography

• Font: Slumpdb, Earwig Factory (Ransom style).
• Main: Impact or Condensed Sans (Rotated).
• Effect: Letters wobble independently.

4. Component Recipes

The "Shattered Menu"

• Container: transform -skew-x-12.
• Item: Black background with white text. On hover, background slams to Red.
• Shape: NOT a rectangle. A polygon with jagged edges (clip-path).

The "Cutout Portrait"

• Image: High contrast black/white character portrait.
• Border: Thick white outline, like a sticker.
• Animation: Slides in from off-screen with motion blur.

The "All Out Attack" Button

• Visual: Explodes on click.
• Text: "TAKE YOUR HEART".
• Bg: Starburst pattern.

5. Interaction Patterns

• Transition: Screen "rips" in half to transition pages.
• Cursor: A calling card that leaves a trail.

UI Engineering Spec: Hacker Minimalist

1. Engineering Context

Mental Model: "The Research Paper". Optimized for reading 10,000 words. No sticky headers, no popups. Just pure typography and hyper-functional links. Inspired by Edward Tufte and Gwern.net.

Key Traits:

• Sidenotes: Notes live in the right margin, not the footer.
• Semantic Zoom: Hovering a link shows a preview of that target (Wikipedia style).
• Serif Dominance: High-quality book fonts.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + prose plugin.
• Layout: CSS Grid (Main column + Sidebar column).
• Font: Equity, Charter, or Crimson Text.

3. Design Tokens

3.1 Colors (Paper)

• Bg: #FFFAF0 (Floral White) or #FBFBFB.
• Text: #111111 (Near Black).
• Link: #AC0000 (Crimson) or #0000EE (Standard Blue).
• Visited: #551A8B. (Respecting visited state is key).

3.2 Typography

• Font: Crimson Pro or Source Serif Pro.
• Measure: 65-75 characters per line (max-width prose).
• Sidenote: Smaller size (0.8rem), sitting in the col-start-2.

4. Component Recipes

The "Sidenote"

• Desktop: absolute right-[-200px] w-[180px] text-sm text-gray-600.
• Mobile: Hidden behind a toggle or converted to endnote.
• Symbol: A superscript number in text corresponding to the note.

The "Definition Link"

• Style: Dashed underline.
• Hover: Shows a tooltip with the definition.

The "Dropcap"

• Visual: First letter of the article is huge (text-5xl float-left mr-2).
• Font: Blackletter or ornate serif.

5. Interaction Patterns

• No distractions: No "Subscribe" modals.
• Progress: A subtle reading position indicator (optional).
• Link Previews: Essential for the "Wiki" feel.

UI Engineering Spec: GitHub Primer

1. Engineering Context

Mental Model: "The Code Forge". Design for work. It is reliable, high-contrast (but muted), and incredibly dense effectively. It uses distinct "Border Box" containers and color-coded status indicators (Merged Purple, Open Green, Closed Red).

Key Traits:

• Rounded Borders: rounded-md (6px) is the absolute standard.
• Subtle Borders: border-gray-200 (Light) or border-gray-800 (Dark).
• Muted Backgrounds: Use bg-gray-50 for "read-only" or "header" contexts.

2. Tech Stack Recommendations

• Styling: Tailwind CSS (or @primer/css if using their actual library).
• Icons: Octicons (The official SVG set).
• Font: Inter or System UI (-apple-system).

3. Design Tokens

3.1 Colors (Productivity)

• Bg: #FFFFFF (Day) / #0D1117 (Night).
• Canvas Sub: #F6F8FA (Day) / #161B22 (Night).
• Border: #D0D7DE (Day) / #30363D (Night).
• Accent: #0969DA (Link Blue).
• Success: #2DA44E (Git Green).
• Danger: #CF222E (Delete Red).

3.2 Typography

• Font: System UI.
• Code: SF Mono, Fira Code.
• Size: Slightly smaller body (14px) to fit more code.

4. Component Recipes

The "Repo Card"

• Container: border border-border rounded-md p-4 bg-canvas.
• Header: Icon (Book) + Text (Blue Link) + Badge (Public/Public).
• Meta: Flex row of small text (text-xs text-muted) showing Language color dot and Stars.

The "File Tree"

• Row: border-t border-border py-2 px-3 hover:bg-canvas-sub.
• Icon: Folder (Blue) or File (Gray).
• Commit: Truncated gray text on the right.

The "Flash Alert"

• Container: rounded-md p-4 mb-4 border-l-4.
• Info: bg-blue-50 border-blue-200 text-blue-800 border-l-blue-500.
• Warn: bg-yellow-50 border-yellow-200 text-yellow-800 border-l-yellow-500.

5. Interaction Patterns

• Hover Badge: Hovering a user avatar shows a "User Card" popover (z-50).
• Keyboard: Shortcuts ('g' then 'i' to go to issues) are mandatory for power users.

UI Engineering Spec: Retro 95

1. Engineering Context

Mental Model: "The Desktop OS". Nostalgia for the GUI era (1995-2000). Beige boxes, distinct 3D bevels (light top-left, dark bottom-right), and pixelated bitmap fonts. It is "un-flat" design.

Key Traits:

• Bevels: CSS border-style: outset or custom box shadows are key.
• Chicago/Pixel Font: Text must not be anti-aliased (font-smooth: never).
• Windows: Content lives in draggable windows with blue title bars.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + Custom Borders.
• Font: MS Sans Serif (or W95FA webfont).
• Libraries: OpenWindows CSS or 98.css.

3. Design Tokens

3.1 Colors (VGA)

• Bg Desktop: #008080 (Teal).
• Bg Window: #C0C0C0 (Silver).
• Title Bar: Gradient #000080 (Navy) to #1084D0 (Light Blue).
• Text: #000000.
• Highlight: #FFFFFF (Top/Left edges).
• Shadow: #808080 (Bottom/Right edges) + #000000 (Deep shadow).

3.2 Typography

• Font: Pixelated Sans (11px or 12px fixed size).
• Sharpness: Turn off font smoothing via CSS.

4. Component Recipes

The "Window Frame"

• Outer: bg-silver p-1 shadow-outset.
• Title Bar: bg-gradient-to-r from-blue-800 to-blue-400 text-white px-2 py-1 flex justify-between.
• Controls: Minimize/Maximize/Close buttons are 3D squares with icons.

The "3D Button"

• Normal: bg-silver border-2 border-white border-b-gray-800 border-r-gray-800 active:border-gray-800 active:border-b-white.
• Interaction: Physically shifts 1px down-right on click.

The "Start Bar"

• Position: Fixed bottom.
• Style: Beveled gray bar.
• Start Button: Icon (Logo) + Text "Start". Bold bevel.

5. Interaction Patterns

• Draggable: Windows must be movable (react-draggable).
• Z-Index: Clicking a window brings it to front.
• Error Sound: The classic "Chord" or "Ding" on error.

UI Engineering Spec: Modern TUI

1. Engineering Context

Mental Model: "The Beautiful Terminal". This is not "old DOS". It is the "Modern CLI" aesthetic popularized by Charm.sh. It uses true-color (16m colors), beautiful meshes of gradient text, and rounded "bubbles" inside a terminal window.

Key Traits:

• Monospace: Everything is monospace. Even the headers.
• Black Background: #000000 or extremely dark purple/gray.
• Gradient Text: Text often has a horizontal gradient (Pink to Purple).

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Font: JetBrains Mono or Fira Code (with ligatures).
• Icons: Nerd Fonts (The standard for terminal icons).

3. Design Tokens

3.1 Colors (ANSI + Neon)

• Bg: #131313 (Soft Black).
• Selection: #262626.
• Charm Pink: #F25D94.
• Charm Purple: #A550DF.
• Charm Cyan: #61E2FF.

3.2 Typography

• Font: JetBrains Mono (The gold standard).
• Weight: Varies, but usually Regular or Bold. ExtraLight looks bad in terminal.
• Line Height: relaxed (Terminal needs breathing room).

4. Component Recipes

The "Bubble"

• Container: border border-gray-700 rounded-xl p-4 bg-gray-900/50.
• Title: text-xs uppercase tracking-widest text-gray-500 mb-2.
• Content: Monospace text.

The "Gradient Command"

• Visual: > npm install where the text has bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500.
• Cursor: A solid block | or _ that blinks exactly like a terminal.

The "Help Footer"

• Position: Sticky bottom.
• Style: Flex row of Key + Description.
• Key: text-gray-400 font-bold. "ENTER".
• Desc: text-gray-600. "select".

5. Interaction Patterns

• Keyboard Only: Visible focus states (ring-2 ring-purple-500) are mandatory. Mouse is secondary.
• Output Stream: Content should appear line-by-line (typewriter effect).

UI Engineering Spec: Gentler Streak

1. Engineering Context

Mental Model: "The Soft Path". Health apps are usually aggressive (rings, numbers). Gentler uses blobs, waves, and organic paths to show that fitness is non-linear. It is compassionate software.

Key Traits:

• Organic Shapes: No sharp corners. Everything is rounded-3xl or amorphous blobs.
• The Path: A central visualization that is a flowing river/wave, not a bar chart.
• Mascot: Use of friendly, non-threatening characters (Yorhart).

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Canvas: D3.js or VisX (To draw the smooth activity path).
• Animation: Lottie (For the mascot animations).

3. Design Tokens

3.1 Colors (Compassion)

• Bg: #FFF3E0 (Warm Peach) or #F2F2F7 (Soft Gray).
• Heart Range: #FF9F0A (Orange - High), #30D158 (Green - Optimal), #0A84FF (Blue - Rest).
• Card: White with low opacity bg-white/80.

3.2 Typography

• Font: Nunito or Rounded Mplus 1c.
• Style: Extremely round, approachable, informal.

4. Component Recipes

The "Activity Path"

• Visual: A spline area chart (Streamgraph).
• Gradient: Vertical gradient indicating intensity zones.
• Data Point: A "You are here" dot that floats on the wave.

The "Insight Card"

• Bg: Pastel colors (Soft Orange: #FFEFD5).
• Icon: 3D soft illustration.
• Text: "Take it easy today." (Empathetic copy).

The "Action Blob"

• Shape: rounded-full.
• Bg: White.
• Label: Large emoji + Text label.
• Interaction: Squishes on press (scale-90).

5. Interaction Patterns

• Haptic Delight: very subtle ticks when moving along the path.
• Language: Use first-person, encouraging language ("You're doing great", "Rest is productive").

UI Engineering Spec: Google (Material 3)

1. Engineering Context (The "Why")

Mental Model: "Personalized Paper". Material Design 3 is fluid, human, and adaptive. Unlike the "physical" paper of Material 2, MD3 is more emotional. It uses large rounded shapes, "Dynamic Color" extraction from wallpapers, and state layers (opacity) rather than just shadows to indicate interaction.

Key Traits:

• Playful: Generous curves (Pills, odd shapes).
• Adaptive: Colors shift based on user preference.
• Stateful: Dedicated state layers for hover/focus/press.

2. Tech Stack Recommendations

• Framework: React / Next.js
• Styling: Tailwind CSS (Requires heavy customization) OR Styled Components.
• Animation: Framer Motion (Essential for the "Container Transform" pattern).
• Icons: Material Symbols (Google Fonts)
• Format: font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24

3. Design Tokens (The "Physics")

3.1 Colors (Tonal Palettes)

MD3 does not use single hex codes. It uses Tonal Palettes (0-100 luminosity).

:root {
  /* Primary Key Color: Blue #4285F4 */
  --md-sys-color-primary: #0B57D0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D3E3FD;
  --md-sys-color-on-primary-container: #041E49;

  /* Surface */
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container-high: #ECE6F0;

  /* Outline */
  --md-sys-color-outline: #79747E;
}

3.2 Typography scales

Font Family: Google Sans (Product) or Roboto (System).

• Display Large: 57px / 64px / -0.25px
• Headline Medium: 28px / 36px / 0px
• Body Large: 16px / 24px / 0.5px
• Label Large (Buttons): 14px / 20px / 0.1px (font-weight: 500)

3.3 Shapes (The "Pill" Standard)

• Full: border-radius: 9999px (Buttons, Chips, Badges).
• Large: border-radius: 28px (Dialogs, Large Cards).
• Medium: border-radius: 16px (Small Cards).
• None: MD3 rarely uses squares.

4. Component Recipes

The "Filled Button"

• Shape: rounded-full (Stadium shape)
• Bg: bg-[var(--md-sys-color-primary)]
• Text: text-[var(--md-sys-color-on-primary)]
• State Layer: An overlay <div> inside usage:
• hover:bg-white/8 (8% opacity white overlay)
• active:bg-white/12
• Ripple: Material Ripple is mandatory for the atomic feel. Use react-ripple-click or similar.

The "Navigation Bar" (Bottom)

• Height: 80px (Taller than standard iOS 49px).
• Active Indicator: A pill shape (h-[32px] rounded-full) surrounding the active icon.

The "Card" (Elevated)

• Bg: bg-[var(--md-sys-color-surface-container-low)]
• Shadow: shadow-md (Elevation 1) -> shadow-lg (Elevation 2 on hover).
• Radius: rounded-[12px] or rounded-[16px].

5. Interaction Patterns

• Container Transform: When a card opens into a full page, it expands seamlessly. Use Framer Motion layoutId.
• Easing: cubic-bezier(0.2, 0.0, 0, 1.0) (Emphasized Decelerate) - starts fast, ends slow.

UI Engineering Spec: IBM (Carbon)

1. Engineering Context

Mental Model: "The Grid System". Carbon is the "Bauhaus" of digital design. It is strictly grid-based (2x grid). It is rational, modular, and accessible. It is not "fun"; it is "competent". If you are building a complex dashboard, Carbon is the gold standard.

Key Traits:

• The Grid: Everything aligns to the 16-column grid.
• Productivity: High information density. Small fonts (14px).
• Tokens: Extensive use of design tokens for theming (White, Gray 10, Gray 90, Black themes).

2. Tech Stack Recommendations

• Styling: SCSS / Tailwind (Carbon specific config).
• Icons: Carbon Icons (16px / 20px / 32px specific sizes).
• Fonts: IBM Plex (Open Source, excellent Mono/Sans/Serif family).

3. Design Tokens

3.1 Colors (The Gray 100 Scale)

Carbon themes are built by swapping these tokens.

• Interactive Blue: #0F62FE (Blue 60 - Primary Action).
• Focus: #0F62FE (2px solid border).
• Text Primary: #161616 (Gray 100).
• Text Secondary: #525252 (Gray 60).
• Bg Page: #F4F4F4 (Gray 10).
• Bg Layer: #FFFFFF.

3.2 Typography

• Font: IBM Plex Sans.
• Mono: IBM Plex Mono (Critical for data/code).
• Scale: 12px (Label), 14px (Body), 16px (Title). It feels "small" compared to consumer apps.

4. Component Recipes

The "Data Table" (The King)

• Header: Capitalized, 12px, bold.
• Row: h-[48px] border-b border-[#E0E0E0] hover:bg-[#E5E5E5].
• Cell: Monospaced numbers.
• Action: Inline overflow menu (•••).

The "Primary Button" (Sharp)

• Shape: rounded-none (Or very small 2px in v11). Carbon is traditionally sharp.
• Bg: #0F62FE hover #0353E9.
• Icon: Right aligned icon (Arrow) is very common.
• Align: Text is left-aligned in some variations, but center standard.

The "Tile"

• Bg: #FFFFFF.
• Padding: p-4.
• Border: No border, but distinct background contrast.
• Interaction: Selectable tiles have a thick gray border on select.

5. Interaction Patterns

• Skeleton Loading: Carbon pioneered the "Grey shimmer" skeleton state.
• Progressive Disclosure: Show high-level data, click to expand row for details.
• Focus States: High visibility is mandatory for accessibility.

UI Engineering Spec: Linear

1. Engineering Context

Mental Model: "Magical Utility". Linear makes productivity rendering feel like a video game. It uses "Glows", "Particles", and "Shimmers" to reward user actions. The dark mode is not just black; it's a deep canvas for lighting effects.

Key Traits:

• Glow: Radial gradients behind active elements.
• Borders: 1px subtle, sometimes shimmering borders.
• Micro-interactions: Success states have flair.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + clsx.
• VFX: Custom CSS mask-image for sparkles, radial-gradient for glows.
• Animation: Framer Motion (Layout transitions).

3. Design Tokens

3.1 Colors (The Deep Space)

• Bg: #080808 (Almost pure black)
• Surface: #161618 (Slightly lighter)
• Border: #29292D (Subtle divider)
• Primary: #5E6AD2 (Indigo)
• Success: #27B074 (Green)
• Warning: #F36D40 (Orange)

3.2 Typography

• Headings: Inter (Medium/SemiBold).
• Body: Inter (Regular).
• Spacing: Linear uses very specific letter-spacing adjustments to make text legible on dark backgrounds.

4. Component Recipes

The "Glow Card"

A background effect that follows the mouse or highlights the card.

• CSS:

  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );

The "Shimmer Border"

A border that looks like light is passing through it.

• Implementation: Mask a rotating conic gradient with a border-shape.
• Tailwind: border border-transparent bg-origin-border bg-gradient-to-r from-white/10 to-white/0 (Simplified).

The "Command Menu" (Cmd+K)

• Backdrop: backdrop-blur-[2px] bg-black/50
• Modal: bg-[#18181A] border border-[#2E2E32] shadow-2xl rounded-lg

5. Interaction Patterns

• Key-Feel: Hover states are instant. Active states have a "click" feel (scale down 0.98).
• Optimistic: Actions happen locally instantly. Loaders are thin top-bars, not spinners.

UI Engineering Spec: Locomotive

1. Engineering Context

Mental Model: "The Moving Train". The scrolling experience is decoupled from the browser's native scroll. It has mass and inertia. Elements move at different speeds (Parallax). The layout is loose, often breaking grid lines to create visual tension.

Key Traits:

• Smooth Scroll: Native scroll is hijacked (using Lenis or Locomotive Scroll).
• Reveal: Images reveal with curtain effects or scale-up masks.
• Typography: Big, bold, mixed alignment.

2. Tech Stack Recommendations

• Styling: Tailwind CSS / SCSS.
• Scroll: Lenis (Modern standard) or Locomotive Scroll.
• Motion: GSAP (Greensock) ScrollTrigger.

3. Design Tokens

3.1 Colors (Editorial)

• Bg: #D1CDC7 (Stone) or #1A1A1A (Dark Gray).
• Text: #000000.
• Accent: #BD3F32 (Rust) or #E3DCD2 (Paper).

3.2 Typography

• Font: Neue Montreal (Grotesque Sans) or Editorial New (Serif).
• Scale: text-[12vw] (Huge display text).
• Mix: Combining Italic Serif and Bold Sans in the same headline.

4. Component Recipes

The "Parallax Image"

• Wrapper: overflow-hidden.
• Image: Scale 1.2.
• Effect: translateY based on scroll position (speed: -0.1).
• Reveal: clip-path animation from bottom to top on enter.

The "Marquee"

• Content: Massive text running horizontally.
• Interaction: Scroll speed affects marquee speed (velocity * scroll).

The "Sticky Stack"

• Behavior: Sections stack on top of each other like cards.
• Scale: Previous card scales down (scale: 0.95) and fades to black (brightness: 0.5).

5. Interaction Patterns

• Cursor: Custom localized cursor (e.g., becomes "View" circle over images).
• Transition: Page transitions are mandatory (Cover screen slide up).

UI Engineering Spec: Microsoft (Fluent)

1. Engineering Context (The "Why")

Mental Model: "Natural Light & Layered Depth". Fluent Design is about material authenticity. It simulates light interacting with materials (Acrylic, Mica). It is productive, grounded, and dense (in a good way). It is less "floaty" than Apple, more "solid" than Google.

Key Traits:

• Light: Reveal Effects (borders lighting up on hover).
• Material: Mica (sampling desktop background) and Acrylic (blur).
• Scale: A strict 4px grid.

2. Tech Stack Recommendations

• Framework: React
• Styling: CSS Modules or Tailwind.
• Special: Use framer-motion for layout transitions, but CSS Grid is key for the 4px alignment.
• Icons: Fluent System Icons (Segoe Fluent Icons).
• Style: Thin strokes, straightforward geometry.

3. Design Tokens

3.1 Colors (Neutral & Brand)

Fluent relies heavily on a "Neutral Palette" for structure.

:root {
  /* Brand */
  --brand-primary: #0078D4; /* Windows Blue */
  --brand-dark: #005A9E;

  /* Neutrals (Light Mode) */
  --neutral-white: #FFFFFF;
  --neutral-gray-10: #FAF9F8;
  --neutral-gray-20: #F3F2F1;
  --neutral-gray-60: #C8C6C4; /* Borders */
  --neutral-gray-160: #323130; /* Text */

  /* Text */
  --text-primary: #201F1E;
  --text-secondary: #605E5C;
}

3.2 Typography scales

Font Family: Segoe UI Variable (Text/Display). Fallback: Segoe UI, sans-serif.

• Style: No tracking changes like Apple. Just solid, legible weights.
• Title: 28px Bold
• Subtitle: 20px Semibold
• Base: 14px Regular (Note: Default size is smaller than the web standard 16px. Fluent is information dense).

3.3 Surfaces (Materials)

Mica Material:

• Spec: Opaque, slight tint of user's wallpaper.
• Web Sim: bg-[#F3F3F3] bg-opacity-90 backdrop-blur-xl.

Acrylic Material:

• Spec: Translucent, noisy, blurred.
• Web Sim: backdrop-filter: blur(30px) saturate(125%) bg-white/60.

4. Component Recipes

The "Reveal Hover" Effect (Signature)

A border or background light that follows the mouse cursor.

• Implementation: Requires JS to track mouse position on the container.
• CSS: use radial-gradient masked to the border.

/* Simplified Web Approximation */
.card:hover {
  border-color: rgba(0,0,0,0.4); /* Darkens on hover */
}
/* Ideally use a mouse-tracking glow hook */

The "Command Bar"

• Container: bg-white border-b border-[#E1DFDD] h-[48px] px-2 flex items-center
• Item: h-[36px] rounded-[4px] px-3 flex items-center hover:bg-[#F3F2F1]

The "Corner Radius"

• Layer: rounded-[8px] (Overlays, Popups)
• Control: rounded-[4px] (Buttons, Inputs, Checkboxes)
• Window: rounded-[8px] (Windows 11 style)

5. Interaction Patterns

• Connected Transitions: Elements don't just fade; they move to their new position.
• Parallax: Subtle depth shifting on layered elements (Acrylic backgrounds move slower than content).

UI Engineering Spec: MoMA

1. Engineering Context

Mental Model: "The White Cube". MoMA's digital presence mirrors its gallery space. It is a neutral, stark container for art. The "Interface" should essentially disappear, leaving only Type and Art. "Never touch the art" means no overlays, no weird filters on images.

Key Traits:

• MoMA Sans: The custom geometric sans is the identity.
• Asymmetry: Layouts are rarely centered. They use tension.
• Big Type: Headings are often massive and cut off (clipped) or tightly stacked.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Grid: CSS Grid (Critical for the "Masonry" feel).
• Font: MoMA Sans or Franklin Gothic (The classic alternative).

3. Design Tokens

3.1 Colors (Gallery)

• Bg: #FFFFFF (White) or #000000 (Black).
• Text: #000000 / #FFFFFF.
• Accent: None. The art provides the color.
• Highlight: Vivid yellow/pink only for "Membership" promos.

3.2 Typography

• Font: MoMA Sans (Geometric, wide).
• Style: All Caps for Navigation.
• Scale: text-6xl for headlines. text-lg for body text (Gallery labels).

4. Component Recipes

The "Exhibition Poster" (Digital)

• Layout: Split screen.
• Left: Massive Typography, strictly grid aligned.
• Right: High-res Art, full bleed.
• Scroll: The text sticks, the art scrolls.

The "Events Calendar"

• List: Brutalist distinct lines (border-t-2 border-black).
• Date: Huge numbers. 24 OCT.
• Hover: Inverts colors (Black bg, White text).

The "Audio Guide"

• Ui: Minimal play button (Circle).
• Progress: A single thin line.
• Context: Text description below.

5. Interaction Patterns

• Hover Reveal: Hovering a text title reveals the artwork image behind it (z-index swap).
• Snap: Scroll snapping for "Rooms" or "Exhibitions".

UI Engineering Spec: NASA

1. Engineering Context

Mental Model: "Public Future". NASA balances two identities: The Government Agency (Accessibility, Clarity, USWDS) and The Frontier (Space, The Worm logo, Heroism). The design is accessible but awe-inspiring.

Key Traits:

• The Worm: The retro-futuristic red logo is the soul.
• Dark Mode Default: Space is dark. High quality imagery requires black backgrounds.
• Data Density: Mission control dashboards are dense but legible.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• System: USWDS (United States Web Design System) tokens for accessibility.
• Font: Inter or Helvetica Neue (Clean, neutral). Nasalization (Optional for display).

3. Design Tokens

3.1 Colors (Earth & Space)

• Bg: #000000 (Space) or #1B1B1B (Deep Grey).
• Text: #FFFFFF.
• Worm Red: #E31937 (The iconic red).
• Earth Blue: #0B3D91.
• Star White: #F1F1F1.

3.2 Typography

• Font: Helvetica Neue.
• Headings: Inter Bold.
• Numbers: Monospace DM Mono for countdowns and telemetry.

4. Component Recipes

The "Mission Countdown"

• Container: bg-black border border-gray-800.
• Digits: Huge Mono font (text-5xl).
• Labels: Tiny Uppercase (T-MINUS).
• Status: Glowing Green/Red dot (animate-pulse).

The "Image of the Day"

• Card: Full width.
• Image: High-res, no overlay.
• Caption: Bottom left, subtle gradient overlay.
• Download: "Original Quality" link (Data is public domain).

The "Worm Header"

• Logo: The "NASA" worm logo in Red.
• Nav: Simple White text, uppercase, tracking-wide.

5. Interaction Patterns

• Zoom: Deep zoom into high-res nebula images (OpenSeaDragon or similar).
• Timeline: Horizontal scrolling mission timelines.

UI Engineering Spec: Nike

1. Engineering Context

Mental Model: "Kinetic Energy". Nike's digital presence is built to move. It is not static. Typography is massive and often italicized (forward motion). Layouts are sparse to let high-energy photography dominate. The interface feels like a premium sports car dashboard.

Key Traits:

• Motion First: Transitions are aggressive (cubic-bezier(0.16, 1, 0.3, 1)).
• Helvetica Dominance: Heavy reliance on Helvetica Now.
• Monochrome Foundation: Black and White strictly, allowing product colors to pop.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Motion: GSAP (Greensock) is standard for Nike's high-end marketing sites. Framer Motion for apps.
• Video: Heavy use of background looping video (<video playsinline autoplay muted loop>).

3. Design Tokens

3.1 Colors (The Arena)

• Bg: #FFFFFF (Retail) or #111111 (Brand/SNKRS).
• Text: #111111 (Black) or #F5F5F5 (White).
• Accent: #FA5400 (Nike Orange - Legacy), #F6F6F6 (Light Gray backgrounds).
• Sale: #D30005 (Red).

3.2 Typography

• Font: Helvetica Now Display / Trade Gothic (for campaigns).
• Weight: ExtraBlack or Medium (Avoid Regular).
• Style: Text is often uppercase and tightly tracked.

4. Component Recipes

The "Product Wall" (Grid)

• Grid: grid-cols-2 md:grid-cols-3.
• Card: bg-[#F6F6F6] aspect-[4/5] relative group.
• Hover: Image swap (Lifestyle -> Product isolation).
• Typography: Brief, bold titles below the image.

The "Campaign Hero"

• Height: h-screen.
• Content: Full-bleed video.
• Text Overlay: Giant white text, centered, with mix-blend-mode: difference (sometimes).
• Button: White pill button, black text, hover scale.

The "SNKRS Button" (Hype)

• Bg: Black.
• Text: White.
• Shape: rounded-full (Capsule).
• State: Loading state changes text to "Pending..." with a custom spinner.

5. Interaction Patterns

• Parallax: Subtle vertical parallax on text over images.
• Cursor: Custom cursors on campaign sites (e.g., "View" circle).
• Horizontal Scroll: Horizontal snapping lists for shoes on mobile (snap-x snap-mandatory).

UI Engineering Spec: NIO

1. Engineering Context

Mental Model: "The Horizon". NIO's design creates a sense of space. It uses the "Horizon Line" to separate the "Vision" (Sky/Top) from "Action" (Earth/Bottom). It is airy, sophisticated, and quiet. It feels like a high-end EV interior.

Key Traits:

• Horizon Split: Top 2/3 is airy (Sky), Bottom 1/3 is functional (Earth).
• Softness: Everything is soft but structured.
• Gradients: Subtle "Dawn" and "Dusk" atmospheric gradients.

2. Tech Stack Recommendations

• Styling: Tailwind CSS
• Animation: GSAP or Framer Motion (Slow, elegant tweens).
• 3D: Three.js / React Three Fiber (NIO often features 3D car models).

3. Design Tokens

3.1 Colors (Atmospheric)

• Sky (Blue): #4E92F9
• Earth (Dark): #21272B (Warm dark gray).
• Sand: #CFAA84 (Interior leather tone).
• Gradient: linear-gradient(180deg, #7247CA 0%, #58379B 100%) (NIO Purple).
• White: #FFFFFF (Pure white for typography).

3.2 Typography

• Font: Blue Sky Standard (Custom) -> Montserrat (Clean geometric).
• Heading: Light weights (300), large sizes.
• Body: Open Sans or Nio Sans.

4. Component Recipes

The "Horizon Button"

• Bg: bg-[#4E92F9]
• Shape: rounded-full (Capsule).
• Width: Often full width (in mobile contexts).
• Shadow: shadow-[0_10px_30px_rgba(78,146,249,0.3)] (Colored soft shadow).

The "Card" (Floating)

• Bg: bg-white
• Radius: rounded-[20px].
• Shadow: shadow-xl (Soft, large diffuse).
• Content: Image on top, text below with lots of padding (p-8).

The "Nomi" (Assistant)

• Visual: A simple circle or digital face essential to the brand.
• Animation: Morphing shapes to indicate listening/thinking.

5. Interaction Patterns

• Parallax: Background elements move slower than foreground.
• Fade: Elements fade in slowly (duration-700) rather than popping in.
• Scroll: Smooth scroll with momentum.

UI Engineering Spec: Notion

1. Engineering Context

Mental Model: "The Endless Canvas". Notion is a tool for thought. The UI mimics a clean piece of paper. Elements are not "contained" in boxes; they float on the page. Structure comes from whitespace, not borders.

Key Traits:

• Emoji: First-class citizen for identification.
• Pastel: Background highlights are soft pastels.
• Serif/Sans Mix: Using Serif for friendly headings.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Editor: Tiptap or ProseMirror (if building text editing).
• Icons: Lucide (functional) + Apple Emojis (content).

3. Design Tokens

3.1 Colors (Pastel Palette)

Notion doesn't use strong block colors. It uses text colors and background highlights.

• Text Default: #37352F (Not black. A warm dark gray).
• Text Gray: #9B9A97
• Bg Default: #FFFFFF
• Bg Hover: #F1F1EF (Key interaction color).
• Highlights:
• Red: #FFEBE9 (bg) / #D44C47 (text)
• Blue: #E6F3F7 (bg) / #337EA9 (text)
• Yellow: #FBF3DB (bg) / #CB912F (text)

3.2 Typography

• Headings: Inter (Sans) or Lyon-Text (Serif).
• Body: Inter, line-height: 1.5, color: #37352F.
• Mono: iA Writer Mono or SF Mono.

4. Component Recipes

The "Block Handle" (::)

The draggable handle that appears on hover.

• Visibility: opacity-0 group-hover:opacity-100
• Icon: Six-dot grid icon.
• Color: #D3D1CB hover #37352F.

The "Select Menu"

• Bg: bg-white
• Shadow: shadow-lg border border-gray-200
• Item: px-3 py-1.5 hover:bg-[#F1F1EF] rounded-[3px]

The "Callout Block"

• Bg: bg-[#F1F1EF] (Default gray bg).
• Icon: Left aligned Emoji.
• Corner: rounded-[4px].
• Padding: p-4.

5. Interaction Patterns

• Hover Reveal: Many UI controls (delete, move, add) are hidden until hover to reduce cognitive load.
• Slash Command: The / key trigger is the primary interaction model.

UI Engineering Spec: The New York Times

1. Engineering Context

Mental Model: "The Daily Paper". The hallmark is Hierarchy. It is not about "designing boxes"; it is about organizing information density. It uses a complex mix of Blackletter (Logo), Serif (Headlines/Body), and Sans (UI) to guide the eye through dense text.

Key Traits:

• Blackletter: The masthead creates instant authority.
• Lines: Vertical and horizontal hairlines (1px solid #E2E2E2) separate every story.
• Date: The date is a central anchor element.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Typography: Georgia (System serif) is the classic web fallback, but Cheltenham (Headline) and Imperial (Body) are the branded choices.
• Grid: 5-column or 12-column heavy grid.

3. Design Tokens

3.1 Colors (Ink & Paper)

• Bg: #FFFFFF.
• Text: #121212 (Ink Black).
• Secondary: #5A5A5A (Gray).
• Links: #326891 (NYT Blue - discreet).
• Live: #B22222 (Red - for "Breaking News").

3.2 Typography

• Masthead: Chomsky or Engravers Old English.
• Headline: Cheltenham (Bold, Condensed, Italic variations).
• Body: Georgia or Imperial.
• Meta: Franklin Gothic or Arial (Byline, Date, Section).

4. Component Recipes

The "Story Card" (Standard)

• Layout: Thumbnail on Right (Desktop) or Top (Mobile).
• Headline: Serif, Bold, text-xl tight-leading.
• Summary: Serif, text-sm text-gray-600.
• Byline: Sans, text-xs uppercase text-gray-400.
• Separator: border-b border-gray-200 pb-4 mb-4.

The "Live Briefing"

• Indication: Red badge "LIVE".
• List: Timestamped updates.
• Time: Bold Sans 12:05 PM.
• Content: Serif Short text.

The "Navigation Header"

• Top: Logo centered (Blackletter).
• Sub: Section links center-aligned, border-t border-b border-black double-border.

5. Interaction Patterns

• Hover: User underlines on links.
• Reading Progress: Subtle top bar on long reads.
• Tooltips: Definitions of complex terms on click.

UI Engineering Spec: OpenAI

1. Engineering Context (The "Why")

Mental Model: "The Blank Page". OpenAI's design is utilitarian, confident, and radically simple. It disappears to let the "Intelligence" (Text) shine. It avoids decoration. It is Brutalist in its restraint but Modern in its typography.

Key Traits:

• Contrast: Stark Black and White.
• Content-First: Typography is the UI.
• Structure: Strict alignment, visible grids, thin borders.

2. Tech Stack Recommendations

• Framework: React / Next.js
• Styling: Tailwind CSS
• Why: Utility-first matches the utilitarian design philosophy.
• Animation: CSS Transitions (Minimal)
• Why: Motion should be fast (0.1s - 0.2s) and only for functional feedback.
• Icons: Lucide React or Heroicons (Outline)
• Configuration: strokeWidth={2} (Slightly bolder stroke to match text).

3. Design Tokens (The "Physics")

3.1 Colors (Monochromatic)

:root {
  /* Surfaces */
  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-sider: #000000; /* For high contrast areas */

  /* Text */
  --text-primary: #000000;
  --text-secondary: #6E6E80; /* Neutral gray */
  --text-tertiary: #ACACBE;

  /* Borders */
  --border-light: #E5E5E5;
  --border-medium: #D1D5DB;

  /* Accents - Use Sparingly! */
  --brand-green: #10A37F; /* ChatGPT Green */
  --brand-purple: #7A64FF;
}

/* Dark Mode (Crucial) */
.dark {
  --bg-page: #343541;
  --text-primary: #FFFFFF;
  --text-secondary: #C5C5D2;
  --border-light: #4D4D4F;
}

3.2 Typography scales

Font Family: Söhne (Custom) -> Inter -> System Sans. Characteristics: Geometric, legible, slightly humanist.

• Prose: max-width: 65ch (Optimal reading length).
• Line-Height: 1.6 (Generous for reading long stream of text).
• Sizes:
• text-sm (14px) for UI controls.
• text-base (16px) for conversation.

3.3 Shapes & Borders

• Corner Radius: border-radius: 6px (Small, tight corners). Not 8px, not 4px. 6px is the sweet spot.
• Borders: 1px solid borders are preferred over shadows. Shadows are rare.

4. Component Recipes

The "Prompt Input"

The core interaction point.

• Container: w-full max-w-3xl mx-auto
• Style: bg-white border border-gray-200 rounded-lg shadow-sm
• Shadow: shadow-[0_0_10px_rgba(0,0,0,0.05)] (Very subtle glow)
• Focus: ring-1 ring-black border-black (High contrast latch)

The "Action Button"

Minimalist button.

• Primary: bg-[#10A37F] hover:bg-[#1a7f64] text-white rounded-[4px] px-3 py-2 text-sm font-medium transition-colors
• Secondary: bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 rounded-[4px]

The "Avatar"

• Shape: Square with slightly rounded corners (rounded-sm or rounded-[2px]). NOT CIRCULAR.
• Color: Solid background color with white icon.

5. Interaction Patterns

• Streaming Text: Implementation of the "Typewriter Effect" is mandatory for AI responses.
• Cursor: A blinking block cursor (| or █) at the end of streaming text adds retro-futurism.
• Speed: All interactions are instant. No fade-in for pages.

UI Engineering Spec: Paco Coursey (Radical Minimalism)

1. Engineering Context

Mental Model: "Zero Latency". This style removes everything that isn't content. It is the visual equivalent of O(1) complexity. It prefers instant state changes over long transitions. It uses high-contrast monochrome to signal "Pro Tool".

Key Traits:

• Reduction: If a border can be removed, remove it. If a label isn't needed, delete it.
• Speed: Optimistic UI updates. 0ms delay.
• Blur: Heavy use of backdrop-filter to create "materials" without adding lines.

2. Tech Stack Recommendations

• Styling: Tailwind CSS (Utility first).
• Components: Radix UI (Headless, accessible base).
• Icons: Vercel/Geist Icons or custom SVG paths (1.5px stroke).

3. Design Tokens

3.1 Colors (Monochrome with Intent)

• Bg: #FFFFFF (Light) / #000000 (Dark).
• Text Main: #000000 / #EDEDED.
• Text Sub: #888888 (Medium Gray).
• Text Tertiary: #D4D4D4 (Light Gray - barely visible).
• Selection: #0070F3 (Electric Blue) or #F81CE5 (Magenta) - Only used for focus.

3.2 Typography

• Font: Geist Sans or Inter.
• Weight: Heavy reliance on 500 (Medium) for text, 400 (Regular) for body.
• Numbers: font-variant-numeric: tabular-nums (Alignment is god).

4. Component Recipes

The "Command K" (CMDK)

The signature component.

• Overlay: bg-black/20 backdrop-blur-[2px].
• Dialog: bg-white dark:bg-[#0A0A0A] border border-gray-200 dark:border-gray-800 shadow-2xl rounded-xl.
• Input: No border, massive focus ring removal.

The "Toast" (Notification)

• Position: Bottom right.
• Shape: Small, black capsule.
• Animation: Slide up + scale (y: 10 -> 0, scale: 0.95 -> 1).
• Content: Concise text. "Copied." "Saved."

The "Detail Hover"

• Default: Item is just text.
• Hover: Gray background bg-gray-100 dark:bg-gray-900 rounded-[4px] appears instantly behind the text.

5. Interaction Patterns

• Keyboard First: Every UI action must be bindable.
• Focus Rings: Custom CSS focus rings (ring-2 ring-blue-500 ring-offset-2).
• Tabular Data: Lists start simple, reveal actions on hover.

UI Engineering Spec: Personal Blog

1. Engineering Context (The "Why")

Mental Model: "The Digital Garden" or "Clean Paper". This style prioritizes the reading experience above all else. It is a sanctuary for thought, free from the noise of social media or marketing-heavy sites. It is fast, accessible, and typographically excellent.

Key Traits:

• Typography-First: The typeface is the main UI.
• Breathable: Generous whitespace and margins.
• Fast: Static Site Generation (SSG) for sub-100ms loads.
• Timeless: Avoids trendy interactions that might age quickly.

2. Tech Stack Recommendations

• Framework: Next.js (App Router) or Astro (perfect for content-heavy sites).
• Content: MDX (Markdown + React Components).
• Styling: Tailwind CSS + @tailwindcss/typography (The prose plugin is essential).
• State: Minimal. React Server Components (RSC) should handle most logic.

3. Design Tokens (The "Paper")

3.1 Colors (Comfortable Contrast)

Avoid pure black on pure white, which can cause eye strain.

• Bg: #FFFCF9 (Warm Paper) or #F8FAFC (Cool Slate).
• Text: #1e293b (Slate 800) for high contrast but not harsh black.
• Accent: A subtle color for links, e.g., #0891b2 (Cyan 600) or #db2777 (Pink 600).

3.2 Typography (The Voice)

• Body: A high-readability Serif.
• Options: Merriweather (Classic), Newsreader (Elegant), Lora (Calligraphic).
• Headings: A clean Sans-Serif or a contrasting Display Serif.
• Options: Inter, Geist Sans, or Playfair Display.
• Scale:
• Body: 1.125rem (18px) or 1.25rem (20px). Large text is better.
• Line-height: 1.75 for body text.

3.3 Layout

• Reading Column: Max-width 65ch (characters). This is the golden rule for readability.
• Container: max-w-3xl mx-auto px-6.

4. Component Recipes

The "Prose Wrapper" (Tailwind)

The core container for your Markdown content.

<article className="prose prose-lg prose-slate dark:prose-invert mx-auto">
  {/* MDX Content goes here */}
  {children}
</article>

The "Minimal Header"

Focus on the title and metadata.

<header className="mb-10 text-center">
  <div className="text-sm font-medium text-slate-500 mb-4 uppercase tracking-widest">
    {date} • {readingTime} min read
  </div>
  <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-6">
    {title}
  </h1>
  <div className="flex justify-center gap-4">
     {tags.map(tag => (
        <span key={tag} className="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-bold">
           #{tag}
        </span>
     ))}
  </div>
</header>

The "Newsletter Box"

A non-intrusive invitation to subscribe.

<div className="bg-slate-50 border border-slate-200 rounded-2xl p-8 my-16 text-center">
  <h3 className="text-xl font-bold mb-2">Join the garden</h3>
  <p className="text-slate-600 mb-6">I write monthly. No spam, just thoughts.</p>
  <form className="flex gap-2 max-w-sm mx-auto">
    <input 
      type="email" 
      placeholder="your@email.com" 
      className="flex-1 px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 outline-none" 
    />
    <button className="bg-slate-900 text-white px-6 py-2 rounded-lg font-bold hover:bg-slate-800 transition">
      Subscribe
    </button>
  </form>
</div>

5. Interaction Patterns

• No Sticky Headers: Let the user focus on reading. When they scroll down, the UI disappears.
• Table of Contents: Sticky sidebar on desktop, collapsible detail on mobile.
• Code Blocks: High-contrast syntax highlighting (e.g., Catppuccin or Dracula theme).
• Images: rounded-xl with subtle shadow-lg and captions below.

6. SEO & Social

• Meta Tags: Essential. og:image, twitter:card.
• RSS Feed: Mandatory for a personal blog.
• Sitemap: Auto-generated.

UI Engineering Spec: Presentation Scroll (PPT-Style)

1. Engineering Context (The "Why")

Mental Model: "The Interactive Deck" or "Digital Storytelling". This style turns a website into a curated, linear journey. Unlike traditional websites where the user controls the scroll freely, this model imposes a structured narrative rhythm. It is ideal for portfolios, product launches, pitch decks, and immersive editorial stories.

Key Traits:

• Snap Physics: The viewport "snaps" to specific sections, ensuring the user always sees a perfectly framed composition.
• Cinematic Transitions: Entering a new section triggers choreographed animations (Fade In, Slide Up, Scale).
• Minimalist UI: Controls are often hidden or reduced to simple pagination dots to maximize partial immersion.

2. Tech Stack Recommendations

• Core CSS: scroll-snap-type (The native, lightweight foundation).
• Logic: Custom React Hooks for intersection observing (to trigger animations).
• Libraries (Choose based on complexity):
• Leightweight: Native CSS + framer-motion (for component animations).
• Standard: fullPage.js or swiper.js (mousewheel control enabled).
• High-End: Lenis (Smooth Scroll) + GSAP ScrollTrigger (for complex pinned animations).

3. Design Tokens (The "Rhythm")

3.1 Dimensions

• Viewport: Every section MUST be h-screen (100vh) or min-h-screen.
• Containers: Content is usually centered container mx-auto px-6 or full-bleed for media.

3.2 Typography

• Headings: Massive. Since there is little text per screen, headings act as visual anchors.
• text-6xl md:text-8xl font-bold tracking-tighter
• Body: Concise.
• text-xl md:text-2xl text-balance (Uses text-wrap: balance for perfect line lengths).

3.3 Navigation (The "Compass")

• Pagination: Vertical dots on the right (Desktop) or bottom (Mobile).
• Progress Bar: A slim line at the top or bottom indicating total read progress.

4. Component Recipes

The "Slide Section" (Native CSS Snap)

A robust, dependency-free implementation of the snap container.

// Tailwind + CSS Native Snap
<div className="h-screen w-full overflow-y-scroll snap-y snap-mandatory scroll-smooth">
  {/* Slide 1 */}
  <section className="h-screen w-full snap-start flex items-center justify-center bg-zinc-950 text-white relative overflow-hidden">
     <div className="z-10 text-center space-y-4">
        <h1 className="text-8xl font-black tracking-tighter animate-in fade-in zoom-in duration-1000">
           The Future.
        </h1>
        <p className="text-2xl text-white/60">Is already here.</p>
     </div>
     {/* Background Video/Image here */}
  </section>

  {/* Slide 2 */}
  <section className="h-screen w-full snap-start flex items-center justify-center bg-white text-black">
      <h2>Slide Two</h2>
  </section>
</div>

The "Scrollytelling Layout" (Sticky)

For when you want text to scroll over a fixed background.

<div className="relative h-[300vh]"> {/* 3x Height for scroll distance */}
  <div className="sticky top-0 h-screen w-full flex items-center justify-center overflow-hidden">
     {/* The Visual that stays fixed and maybe morphs */}
     <img src="/hero.jpg" className="absolute inset-0 w-full h-full object-cover" />
  </div>
  
  {/* The Text Blocks that scroll over */}
  <div className="relative z-10">
     <div className="h-screen flex items-center justify-center pointer-events-none">
        <h2 className="bg-black/50 p-8 rounded-2xl text-white backdrop-blur-md">
           Contextual Overlay 1
        </h2>
     </div>
     <div className="h-screen flex items-center justify-center pointer-events-none">
         <h2 className="bg-black/50 p-8 rounded-2xl text-white backdrop-blur-md">
           Contextual Overlay 2
        </h2>
     </div>
  </div>
</div>

5. Interaction Patterns

• Entrance Animations: Use IntersectionObserver to add a .visible class when a slide comes into view.
• Example: Staggered reveal of text lines.
• Scroll Hijacking (Caution): If using libraries like GSAP or Lenis, ensure key commands (Spacebar, Arrows) still work for accessibility.
• Parallax: Background moves slower than foreground. translate-y-[-20%] on the background image.

6. SEO & Accessibility (Crucial for this style)

• Problem: Full-page scroll often hides content from spiders if not careful.
• Fix: content MUST be in the DOM. Do not display: none off-screen sections; just use opacity: 0 or simply let them exist below the fold.
• Keyboard: Ensure users can Arrow Down to snap to the next section.

UI Engineering Spec: Procreate

1. Engineering Context

Mental Model: "The Digital Canvas". The best UI is no UI. Procreate puts the content (the canvas) first. The UI controls are tiny, semi-transparent, and sit at the edges. They disappear entirely with a 4-finger tap.

Key Traits:

• Obsidian Dark: The UI is always dark gray to make colors look accurate.
• Edge Anchoring: Tools live in the top-right and left sidebar.
• Popovers: Menus are small popovers, not full-screen modals.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Gestures: use-gesture (React hook for complex multi-touch).
• Canvas: HTML5 Canvas (The core).

3. Design Tokens

3.1 Colors (Studio Environment)

• Bg: #121212 (Studio Dark).
• Tools: #2C2C2E (Toolbars).
• Active: #5A5A5E (Selected tool).
• Text: #EBETBF (Off-white).
• Accent: #007AFF (Apple Blue - rarely used).

3.2 Typography

• Font: System UI (San Francisco).
• Size: Small (text-xs or text-sm). Labels are secondary to Icons.

4. Component Recipes

The "Mobile Toolbar"

• Position: Fixed Top.
• Bg: bg-[#1C1C1E]/90 backdrop-blur-md.
• Items: Icons only (Brush, Smudge, Eraser, Layers, Color).
• Selected: Highlighted with a brighter gray background.

The "Slider Sidebar"

• Position: Fixed Left (or Right).
• Width: w-12.
• Sliders: Two vertical sliders (Size, Opacity).
• Interaction: Drag up/down to adjust value. No visible track until touched.

The "Color Drop"

• Visual: A circle in the top right showing current color.
• Interaction: Drag (DnD) the circle onto the canvas to "Flood Fill".

5. Interaction Patterns

• Undo/Redo: Two-finger tap (Undo), Three-finger tap (Redo). This is the industry standard now.
• Hiding UI: 4-finger tap toggles UI visible boolean.

UI Engineering Spec: Rauno Freiberg (Invisible Craft)

1. Engineering Context

Mental Model: "Digital Physics". This style treats UI elements as physical objects with mass, friction, and inertia. It is not about "animating" (A to B); it is about "simulating". The user's cursor is a force. The UI reacts to that force.

Key Traits:

• Rubber Banding: Elements stretch when pulled.
• Inertia: Scrolling and dragging have momentum.
• Invisible Details: Highlights that follow the cursor, borders that glow only near the mouse.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + CSS Modules.
• Physics: framer-motion (Springs are mandatory) or react-spring.
• Gesture: use-gesture (for dragging logic).
• Canvas: Often uses small Canvas elements for performant particle/ray tracing effects.

3. Design Tokens

3.1 Colors (Deep & Subtle)

• Bg: #000000 or very deep gray #0A0A0A.
• Border: rgba(255,255,255,0.08) (Barely visible).
• Glow: rgba(255,255,255,0.4) (Only appears on interaction).
• Text: Sub/antialiased gray #888. High contrast only for active data.

3.2 Typography

• Font: Inter featuring cv05 (Humanist geometric) or custom variable fonts.
• Size: Small, precise (13px - 14px).
• Tracking: Slightly tight tracking-[-0.01em].

4. Component Recipes

The "Magnetic Button"

A button that pulls towards the cursor when you get close.

• Logic: Calculate distance between cursor and button center. Map to x/y translate.
• Spring: stiffness: 150, damping: 15.
• Visual: Minimal text, no background until hover.

The "Spotlight Card"

• Bg: Black.
• Overlay: A radial gradient that tracks clientX/Y on mousemove.
• Border: Use mask-image to make the border visible only under the spotlight gradient.

The "Fluid Slider"

• Feel: The handle should have "weight". If you drag fast and let go, it might overshoot slightly (if configured for playfulness) or snap instantly (if for precision).
• Sound: Subtle tick sound on value change.

5. Interaction Patterns

• Gesture-driven: Swipe to archive, pull to refresh.
• Persistence: Remembers scroll position and state perfectly.
• No Layout Shift: Dimensions are calculated ahead of time.

UI Engineering Spec: Raycast

1. Engineering Context

Mental Model: "Velocity". Raycast is built for flow state. The UI is designed to be traversed via keyboard, not mouse. Visuals are high-contrast dark mode to reduce eye strain during long coding sessions.

Key Traits:

• Density: High information density.
• Focus: Clear active states (red highlight).
• Keyboard: Shortcuts are first-class visual citizens.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Logic: Custom Hooks for Keyboard Management (useKeyPress, useFocus).
• Animation: Instant (0ms) or very fast (100ms) ease-out.

3. Design Tokens

3.1 Colors (Dark Mode First)

Raycast is natively dark.

• Bg: #151515 (Main)
• Panel: #1F1F1F (List items, inputs)
• Border: #333333
• Accent: #FF6363 (The "Raycast Red")
• Text: #FFFFFF (Primary), #808080 (Secondary/Comments)

3.2 Typography

• Font: Inter (UI) / Fira Code (Code/Snippets).
• Size: 13px or 14px (Small, precise).

4. Component Recipes

The "Action Panel" (The Root UI)

• Layout: Fixed width (750px), Fixed height (450px).
• Bg: bg-[#191919]/80 backdrop-blur-md
• Border: border border-white/10 rounded-xl
• Shadow: shadow-2xl (Deep black shadow).

The "List Item" (Active State)

This is the most critical component.

• Default: px-3 py-2 text-gray-400 flex items-center
• Active: bg-white/10 text-white border-l-2 border-[#FF6363]
• Note: The red left border is the signature "You are here" marker.

The "Keyboard Shortcut" Badge

• Container: bg-[#333333] rounded-[4px] px-1.5 py-0.5
• Text: text-[10px] font-medium text-gray-400 font-mono

5. Interaction Patterns

• Immediate Response: No loaders unless absolutely necessary. Optimistic UI updates.
• Navigation: Arrow keys for list traversal. Enter for action. Esc for back.

UI Engineering Spec: Shopify

1. Engineering Context

Mental Model: "The Merchant's Workbench". Polaris is not for "shoppers"; it is for "business owners". It is dense, informative, and rock-solid. It prioritizes accessibility (A11y) above all else. It uses distinct "Cards" on a gray background to organize complex forms.

Key Traits:

• polaris-icons: A specific set of svg icons (1 point stroke).
• The Magic Layout: Sidebar navigation + Center content card stack.
• Action Context: "Save" bars appear at the top when forms are dirty.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Icons: polaris-icons (npm package).
• Charts: Recharts (Clean, simple line charts).

3. Design Tokens

3.1 Colors (Admin)

• Bg Page: #F1F2F4 (Light Gray).
• Bg Surface: #FFFFFF (White Card).
• Text: #303030 (Ink).
• Subdued: #6D7175.
• Interactive: #008060 (Shopify Green - Primary Action).
• Critical: #D82C0D.

3.2 Typography

• Font: Inter (Shopify moved to Inter recently).
• Weight: 400 / 600.
• Readability: High contrast always.

4. Component Recipes

The "Admin Card"

• Bg: White.
• Shadow: shadow-sm (Subtle ring: 0 0 0 1px rgba(63, 63, 68, 0.05)).
• Corner: rounded-lg (8px).
• Section: border-b border-gray-200 p-4.

The "Resource List"

• Layout: Stack of items.
• Item: p-4 border-b border-gray-100 hover:bg-gray-50 flex justify-between.
• Avatar: Square rounded (rounded-[4px]) product thumbnail.

The "Contextual Save Bar"

• Position: Fixed top (below header).
• Bg: #202223 (Black).
• Text: White.
• Animation: Slide down when isDirty === true.

5. Interaction Patterns

• Toast: "Product saved" appears at bottom center.
• Bulk Actions: Selecting a checkbox in header reveals bulk action buttons.

UI Engineering Spec: Soft Tech

1. Engineering Context

Mental Model: "Marshmallow". Soft Tech is an aesthetic often used in health, meditation, or "friendly" tech apps. It reacts against sharp edges and high contrast. Everything is soft, pillowy, and approachable. It often uses Claymorphism (3D inflated look) or Neumorphism.

Key Traits:

• Super Round: rounded-3xl or rounded-full everywhere.
• Pastels: High brightness, low saturation colors.
• Inflated: Elements look like they have air inside.

2. Tech Stack Recommendations

• Styling: Tailwind CSS + Custom Shadows.
• 3D: Spline (often paired with 3D soft blobs).
• Motion: react-spring (Soft, bouncy physics).

3. Design Tokens

3.1 Colors (Pastel Dream)

• Bg: #F0F4F8 (Cool White) or #FFF5F5 (Warm White).
• Surface: #FFFFFF.
• Primary: #8ECAE6 (Soft Blue), #FFB7B2 (Soft Red), #B5EAD7 (Soft Green).
• Text: #4A5568 (Soft Blue-Gray), never pure Black.

3.2 Typography

• Font: Nunito, Quicksand, or Varela Round.
• Weights: Rounded terminals are essential.

4. Component Recipes

The "Clay Card" (Claymorphism)

• Bg: bg-white.
• Shape: rounded-[32px].
• Shadow: Two internal shadows to create volume + one drop shadow.

  box-shadow: 
    inset 10px 10px 20px rgba(255,255,255,0.5), /* Highlight */
    inset -10px -10px 20px rgba(0,0,0,0.05),    /* Shading */
    10px 20px 30px rgba(0,0,0,0.05);            /* Drop */

The "Soft Button"

• Bg: Pastel color gradient (top-left light, bottom-right dark).
• Border: No border.
• Shadow: Deep, soft colored shadow (shadow-blue-200).

5. Interaction Patterns

• Squish: Buttons scale down (scale-95) on click, like squeezing a foam ball.
• Float: Important elements gently float (animate-bounce slow) in place.

UI Engineering Spec: Spotify

1. Engineering Context

Mental Model: "The Stage". Spotify is a dark theater. The content (Album Art) provides the color. The UI recedes into the background (Black/Gray). It uses opacity layers heavily to creating hierarchy without adding new colors.

Key Traits:

• Dark Mode: Native, unchanging dark mode.
• Grids: Album art grids.
• Gradients: Backgrounds adapt to the dominant color of the current album art.

2. Tech Stack Recommendations

• Styling: Tailwind CSS.
• Color Extraction: colorthief or fast-average-color (to generate background gradients from images).
• Icons: Enclose (Spotify's custom SVG set, thick strokes).

3. Design Tokens

3.1 Colors

• Bg Page: #121212 (Not #000).
• Bg Card: #181818 -> Hover #282828.
• Brand: #1ED760 (Spotify Green - Vivid).
• Text Main: #FFFFFF
• Text Sub: #B3B3B3 (Light Gray).

3.2 Typography

• Font: Circular Std / Gotham / Montserrat.
• Style: Geometric Sans. Large headings are font-weight: 900.

3.3 Shapes

• Buttons: rounded-full (Capsule).
• Images: rounded-none (Albums) or rounded-full (Artists).
• Cards: rounded-[6px].

4. Component Recipes

The "Play Button" (Green FAB)

The most iconic element.

• Size: w-[56px] h-[56px]
• Shape: rounded-full
• Bg: bg-[#1ED760] hover:scale-105 hover:bg-[#1fdf64]
• Icon: Black Triangle (filled).
• Shadow: shadow-xl.

The "Music Card"

• Container: bg-[#181818] p-4 rounded-md hover:bg-[#282828] transition-colors duration-300 ease-out group
• Image: w-full aspect-square shadow-lg mb-4 relative
• Play Overlay: Green play button appears from bottom-right on group hover (opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0).

The "Dynamic Gradient Background"

• CSS: background: linear-gradient(to bottom, var(--extracted-color), #121212 400px)
• Placement: Fixed at top, behind scrollable content.

5. Interaction Patterns

• Sticky Header: Opacity changes from 0 to 1 based on scroll position.
• Lists: Alternate row colors are NOT used. Alignment and whitespace define rows.