@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/design/cognitive-core-ui/references/websites.md

@@ -35,6 +35,65 @@ A commercial page using this skill should feel **premium and technical, but stil
 
 ---
 
+## Website Composition Library
+
+Choose one primary composition before building sections. Do not default to the same centered hero every time.
+
+### 1. Split Narrative
+
+Use when:
+- the product needs both message and visual proof above the fold
+
+Composition:
+- headline and CTA on one side
+- product frame, screenshot, or visual artifact on the other
+- secondary proof rail below
+
+### 2. Editorial Stack
+
+Use when:
+- the brand needs intelligence, depth, or cultural weight
+
+Composition:
+- offset headline
+- side notes, quote blocks, or pull metrics
+- more asymmetry, more narrative rhythm
+
+### 3. Proof-First
+
+Use when:
+- credibility matters more than storytelling flourish
+
+Composition:
+- immediate outcomes, metrics, logos, or customer proof near the hero
+- product explanation follows
+
+### 4. Product Theater
+
+Use when:
+- the interface itself is the main differentiator
+
+Composition:
+- immersive product frame
+- layered caption rails
+- supporting sections explain workflows and advantages
+
+### 5. Institutional Precision
+
+Use when:
+- the site must feel trustworthy, executive, and polished
+
+Composition:
+- concise hero
+- structured value blocks
+- case study or trust strip
+- elegant CTA instead of hype-heavy spectacle
+
+Rule:
+- pick one composition and one signature move from `references/art-direction.md`, then propagate them intentionally
+
+---
+
 ## Default theme for websites
 
 - **Light theme**: Institutional sites, corporate, marketing pages, client-facing products
@@ -55,7 +114,7 @@ If the user does not specify, use **dark with a light option toggle** for tech/S
 │  HERO SECTION (padding: space-24 top, space-20 bottom) │
 │  ┌──────────────────────────────────────────────────┐  │
 │  │ MONO LABEL: tagline (centered)                   │  │
-│  │ DISPLAY HEADING text-5xl, weight-black (centered)│  │
+│  │ DISPLAY HEADING text-5xl, weight-bold (centered) │  │
 │  │ Subtitle: text-lg, text-secondary (centered)     │  │
 │  │ [CTA Primary Button]  [Secondary Button]         │  │
 │  └──────────────────────────────────────────────────┘  │
@@ -85,12 +144,15 @@ If the user does not specify, use **dark with a light option toggle** for tech/S
 
 ### Hero section (required elements)
 
-1. **Mono label** above heading — category / tagline in monospace uppercase
-2. **Display heading** — `text-5xl`, `weight-black`, `tracking-tight`, `line-height: 1.1`
+1. **Mono label** above heading — category / tagline in monospace uppercase, used sparingly
+2. **Display heading** — `text-5xl`, `weight-bold` or `weight-black` only when the hero truly needs extra emphasis, `tracking-tight`, `line-height: 1.1`
 3. **Subtitle** — 1–2 sentences, `text-lg`, `text-secondary`
 4. **Two CTAs** — primary (solid accent) + secondary (outline or ghost)
 5. **Optional**: hero visual (screenshot, illustration, or abstract mesh)
 
+Hero rule:
+- If the page would benefit from split, editorial, or proof-first composition, do not force all five elements into a centered stack.
+
 ```css
 .hero {
   min-height: 90vh; display: flex; align-items: center; justify-content: center;
@@ -108,7 +170,7 @@ If the user does not specify, use **dark with a light option toggle** for tech/S
 }
 .hero-heading {
   font-family: var(--font-display); font-size: var(--text-5xl);
-  font-weight: var(--weight-black); color: var(--text-heading);
+  font-weight: var(--weight-bold); color: var(--text-heading);
   letter-spacing: var(--tracking-tight); line-height: 1.05;
   margin-bottom: var(--space-5);
 }
@@ -142,7 +204,7 @@ If the user does not specify, use **dark with a light option toggle** for tech/S
 }
 .section-heading {
   font-family: var(--font-display); font-size: var(--text-3xl);
-  font-weight: var(--weight-black); color: var(--text-heading);
+  font-weight: var(--weight-bold); color: var(--text-heading);
   letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
 }
 ```
@@ -303,12 +365,13 @@ Two columns: [Left: contact info cards] [Right: form card]
 Primary CTA button:
 ```css
 .btn-primary {
-  background: var(--accent); color: var(--bg-base);
-  font-family: var(--font-mono); font-size: var(--text-sm);
+  background: var(--accent); color: var(--accent-contrast);
+  font-family: var(--font-body); font-size: var(--text-sm);
   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
-  text-transform: uppercase; padding: var(--space-3) var(--space-6);
+  text-transform: none; padding: var(--space-3) var(--space-6);
+  min-height: var(--control-md);
   border-radius: var(--radius-md); border: none; cursor: pointer;
-  transition: var(--transition-base);
+  transition: var(--transition-base), transform 150ms ease, box-shadow 150ms ease;
   box-shadow: 0 0 20px var(--accent-glow);
 }
 .btn-primary:hover {
@@ -316,6 +379,10 @@ Primary CTA button:
   box-shadow: 0 0 32px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.2);
   transform: translateY(-1px);
 }
+.btn-primary:focus-visible {
+  outline: var(--focus-ring-width) solid var(--accent);
+  outline-offset: var(--focus-ring-offset);
+}
 ```
 
 Secondary button:
@@ -323,18 +390,29 @@ Secondary button:
 .btn-secondary {
   background: transparent; color: var(--text-primary);
   border: 1px solid var(--border-medium);
-  font-family: var(--font-mono); font-size: var(--text-sm);
+  font-family: var(--font-body); font-size: var(--text-sm);
   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
-  text-transform: uppercase; padding: var(--space-3) var(--space-6);
+  text-transform: none; padding: var(--space-3) var(--space-6);
+  min-height: var(--control-md);
   border-radius: var(--radius-md); cursor: pointer;
-  transition: var(--transition-base);
+  transition: var(--transition-base), transform 150ms ease;
 }
 .btn-secondary:hover {
+  background: var(--accent-subtle);
   border-color: var(--border-accent);
   color: var(--accent);
 }
+.btn-secondary:focus-visible {
+  outline: var(--focus-ring-width) solid var(--accent);
+  outline-offset: var(--focus-ring-offset);
+}
 ```
 
+Guardrails:
+- Do not use `color: var(--bg-base)` for accent buttons in light theme.
+- Default website CTAs should read like polished product buttons, not terminal labels.
+- If uppercase mono is desired for branding reasons, keep the label very short and re-check contrast in hover/focus states.
+
 ---
 
 ## Key differences: dashboard vs website
@@ -348,3 +426,12 @@ Secondary button:
 | Cards | Dense, compact | Spacious, feature-oriented |
 | Navigation | Tab-heavy, sidebar | Linear anchors, single bar |
 | Background alternation | Same bg-base | Alternates `bg-base` / `bg-surface` |
+
+---
+
+## Anti-Generic Website Rules
+
+- Do not repeat the same section rhythm from top to bottom.
+- Do not rely on centered text alone to create impact.
+- Use at least one memorable section transition, composition break, or proof rail.
+- If the page looks like "SaaS template with nicer colors", it is not finished.

package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md

@@ -0,0 +1,222 @@
+---
+name: glassmorphism-ui
+description: Glassmorphism UI is a design system for modern, layered interfaces that use frosted glass effects, subtle transparency, and light gradients to create depth and elegance. Use it when `design_skill: glassmorphism-ui` is set in project.context.md OR when the user explicitly asks for "glassmorphism", "glass UI", "frosted glass", "blur cards", "translucent", "Apple-like", "iOS-style", "modern fintech", "floating cards", "layered depth", "aurora gradients", or similar. Ideal for fintech apps, crypto dashboards, modern mobile apps, music/media apps, portfolio sites, and any product where visual sophistication and perceived depth matter. Supports apps, dashboards, and marketing sites — light by default with an elegant dark variant. Do NOT use this skill unless explicitly selected.
+---
+
+# Glassmorphism UI
+
+Glassmorphism UI is built around **perceived depth through transparency** — a design system where surfaces appear as frosted glass floating over gradient backgrounds. Unlike flat or shadow-depth systems, the UI structure itself is visible through its layers. The background shows through the cards. The cards show through the modals. Depth is real, not simulated.
+
+Inspiration: Apple.com product pages, iOS Control Center, Linear marketing site, Raycast.com, Revolut/N26 apps.
+
+**This is one visual system.** Never combine it with another design skill.
+
+## Package structure
+
+```text
+.aioson/skills/design/glassmorphism-ui/
+  SKILL.md                      ← you are here (load this first)
+  references/
+    art-direction.md            ← intent, 5 expression modes, signature library, anti-generic tests
+    design-tokens.md            ← CSS variables light + dark, glass tokens, typography, spacing, radius, shadows
+    components.md               ← 22 components (all with glass variant), glass rules, fallbacks
+    patterns.md                 ← App shell glass, 6 page patterns, responsive with mobile bottom tab bar
+    dashboards.md               ← 5 dashboard presets + chart palette + gradient fill rules
+    websites.md                 ← 4 hero patterns, 8 section patterns, glass nav, anti-patterns
+    motion.md                   ← Fluid transitions, 5 entrances with blur, glass-specific animations, reduced motion
+```
+
+## Activation rules
+
+- Apply this package **only** when `project.context.md` contains `design_skill: "glassmorphism-ui"` or the user explicitly chooses it.
+- If another design skill is selected, do **not** load this package.
+- Never auto-select this skill — always require explicit confirmation.
+- If no skill is set yet, the active agent must ask or confirm before applying.
+
+## Responsibility boundary
+
+This skill defines:
+- Visual direction and aesthetic DNA (blur layers, transparency, gradient backgrounds)
+- Design tokens (glass surfaces, colors, typography, spacing, radius, shadows)
+- Component vocabulary and anatomy (22 glass-variant components)
+- Page composition patterns (gradient substrate → glass sidebar → glass cards)
+- Theme switching behavior (light default / dark optional)
+
+This skill does **not** decide:
+- Stack (React, Vue, Blade, HTML, etc.)
+- Output format (single file, multi-file, CSS modules, Tailwind, etc.)
+- Icon library choice
+- Whether a theme toggle exists in the product (the agent decides)
+- Animation library (CSS or JS — motion.md is stack-agnostic)
+
+## Loading guide
+
+Always load only what the current task needs:
+
+| Task | Load |
+|---|---|
+| Any UI work | `references/design-tokens.md` |
+| Reusable components | `references/design-tokens.md` + `references/components.md` |
+| Dashboard or admin panel | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` + `references/dashboards.md` |
+| Detail / settings page | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` |
+| Landing page or website | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/websites.md` |
+| Motion / animation | add `references/motion.md` when animation materially improves the result |
+| Full UI build | all seven reference files |
+
+## Visual signature — three pillars
+
+1. **Layered depth** — The interface is built in visible layers: background → substrate → glass cards → elevated elements. Each layer has distinct blur and transparency. Depth does not come from shadows (as in warm-craft) but from real transparency between layers. The user "feels" the layers as stacked glass surfaces.
+2. **Luminous subtlety** — Soft gradients, luminous borders (1px rgba white), subtle reflections at the top of cards. No neon, no saturation. Light comes from background gradients and edge reflections — like light hitting real glass. Colors are pastel and desaturated.
+3. **Fluid precision** — Generous radius (more than clean-saas, comparable to warm-craft), fluid transitions, micro-interactions with depth shift. The interface feels liquid but controlled — not gelatinous, not elastic. Movements smooth as a slider on glass.
+
+## Theme system
+
+```html
+<div data-theme="light">   <!-- or data-theme="dark" -->
+```
+
+- **Light (default)**: lavender gradient background, white glass cards with backdrop-blur — bright, elegant, iOS-like
+- **Dark**: deep navy background with dark aurora gradients, dark glass cards — premium, immersive, Raycast-like
+- Toggle always available by default
+
+If the user does not specify: default to **light with a theme toggle** in the navigation bar.
+
+## Visual DNA
+
+### Foundation rule: gradient substrate is mandatory
+Glass only works over a gradient background. Never place glass cards over a solid white or solid black background — the blur has nothing to reveal. The gradient substrate is not decoration; it is functional.
+
+### Colors — light theme (default)
+- Background gradient: `linear-gradient(135deg, #F0EEF6 0%, #E0DFF0 30%, #D8E0F0 70%, #EDE8F0 100%)`
+- Glass surface: `rgba(255, 255, 255, 0.60)` — TRANSPARENT
+- Glass elevated: `rgba(255, 255, 255, 0.80)` — hover, nested
+- Primary accent: `#7C3AED` (violet-600)
+- Secondary accent: `#3B82F6` (blue-500) — for gradients
+- Accent gradient: `linear-gradient(135deg, #7C3AED, #3B82F6)` — violet → blue
+- Text heading: `#1A1A2E` (deep navy)
+- Text primary: `#2D2D44`
+- Text secondary: `#6B6B8A`
+
+### Colors — dark theme
+- Background gradient: `linear-gradient(135deg, #141425 0%, #1A1535 30%, #151A30 70%, #1A1425 100%)`
+- Glass surface: `rgba(255, 255, 255, 0.08)` — TRANSPARENT
+- Primary accent: `#8B5CF6` (violet-500 — brighter for dark bg)
+- Secondary accent: `#60A5FA` (blue-400)
+- Text heading: `#F0F0FA`
+- Text primary: `#C8C8E0`
+
+### Typography
+- Headings and body: `Inter`, `-apple-system`, `BlinkMacSystemFont`, `system-ui` — differentiator is the glass effects, not the font family
+- Headings: weight 600–700, letter-spacing -0.02em
+- Body: weight 400, tracking normal
+- System fallback: SF Pro Display/Text (Apple vibe) — use `-apple-system, BlinkMacSystemFont` as first fallback
+- Mono: `JetBrains Mono` for code, IDs, metadata only
+
+### Layout structure (app)
+```
+┌──────────────────────────────────────────────────────────────┐
+│          GRADIENT BACKGROUND (substrate)                     │
+│  ┌────────────────┐  ┌──────────────────────────────────┐   │
+│  │ GLASS SIDEBAR  │  │ GLASS TOP BAR (sticky)           │   │
+│  │ 256px          │  ├──────────────────────────────────┤   │
+│  │ blur-lg        │  │ CONTENT AREA                     │   │
+│  │ border-right   │  │ Glass cards floating over        │   │
+│  │ glass-border   │  │ gradient substrate               │   │
+│  └────────────────┘  └──────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### Signature details
+- Glass cards: `backdrop-filter: blur(16px)` + `background: rgba(255,255,255,0.60)` + `border: 1px solid rgba(255,255,255,0.40)`
+- Top reflection pseudo-element `::before`: `linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%)`
+- Card hover: opacity increase (0.60 → 0.75) + shadow-sm → shadow-md, 200ms
+- Shadows: colored with violet (not black): `0 8px 24px rgba(124, 58, 237, 0.08)`
+- Accent gradient on CTAs and stat numbers: `linear-gradient(135deg, #7C3AED, #3B82F6)`
+- Active sidebar item: `background: rgba(124,58,237,0.12)` + `border-left: 2px solid var(--accent)`
+- Active tab: `border-bottom: 2px solid` accent gradient underline
+- Buttons: gradient primary (accent-gradient), glass secondary variant
+- Border radius: generous — cards at 16px (radius-xl), hero cards at 24px (radius-3xl)
+
+## Application rules
+
+- Treat `references/design-tokens.md` as the source of truth for ALL tokens.
+- Treat `references/art-direction.md` as the source of truth for expression and anti-generic decisions.
+- Never combine this package with `interface-design`, `clean-saas-ui`, `warm-craft-ui`, `bold-editorial-ui`, or any other design skill.
+- Glass requires a gradient background — if the existing project uses a solid background, update it.
+- Reuse the project's component library if one exists — map Glassmorphism tokens onto it instead of rebuilding primitives.
+- Always include `@supports (backdrop-filter: blur(1px))` fallbacks: when unsupported, use solid `bg-surface` at 0.95 opacity.
+- Limit glass nesting to 3 levels max. Each `backdrop-filter` creates a composite layer.
+- Adapt code examples to the active stack. Reference snippets are design specifications, not copy-paste code.
+- Accessibility, responsiveness, and production semantics are the agent's responsibility (not this skill).
+
+## Intent before visuals
+
+Before choosing layout, answer all three:
+
+1. Who is the human using this page right now?
+2. What is the main action or decision they must complete?
+3. How should this interface feel in concrete words, not generic labels?
+
+Bad answers:
+- "for users"
+- "show data"
+- "modern and elegant"
+
+Good answers:
+- "crypto trader scanning their portfolio performance at market open"
+- "music listener discovering new artists through their listening history"
+- "premium, focused, immersive — the data feels curated, not dumped"
+
+## Workflow discipline
+
+1. Confirm the gradient substrate is in place before building any component.
+2. Explore the product domain and choose one expression mode from `references/art-direction.md`.
+3. Name one signature glass move and repeat it intentionally across the page.
+4. Run the Glass Test: remove backdrop-blur from all cards — if the UI still looks fine, glass is decorative not structural. Fix it.
+5. Build from tokens first, then components, then page composition.
+6. Validate state parity: default, hover, active, focus, disabled — all using glass token transitions.
+7. Validate contrast: glass surfaces must meet WCAG AA. Increase glass-bg opacity if needed.
+
+## Non-negotiable quality gates
+
+- The gradient substrate is non-negotiable. No gradient = no glass system.
+- Never use saturated colors above 70% saturation. Glass is luminous, not neon.
+- Never nest more than 3 glass layers (performance + visual confusion).
+- Never use solid black shadows — always violet-tinted (`rgba(124, 58, 237, ...)`).
+- Fallback without `backdrop-filter` must be tested: use `bg-surface` solid with opacity 0.95.
+- Every glass card must pass WCAG AA for body text.
+- Every page must pass the **Glass Test**: backdrop-blur is structural, not decorative.
+- Every page must pass the **Depth Test**: squinting reveals 3+ visible depth layers.
+- Every page must pass the **Neon Test**: no color at saturation > 80%. Glass ≠ cyberpunk.
+- Sameness is failure. If the result looks like a default Tailwind starter with blur added, iterate.
+
+## Positioning vs other skills
+
+| Aspect | glassmorphism-ui | warm-craft-ui | clean-saas-ui | bold-editorial-ui |
+|--------|-----------------|---------------|---------------|-------------------|
+| Accent | Violet-blue (#7C3AED) | Terracotta | Blue | Red-orange |
+| Depth model | Blur layers | Shadow depth | Border/bg | Light/dark contrast |
+| Radius | Large (16px+) | Large (16px+) | Medium (8px) | Minimal (4-6px) |
+| Background | Gradient (required) | Warm solid | Neutral solid | Dark solid |
+| Borders | Luminous (rgba white) | Subtle solid | Solid gray | Minimal |
+| Headings | Sans-serif (Inter/SF) | Serif (Source Serif) | Sans-serif (Inter) | Sans-serif (bold) |
+| Best for | Fintech, mobile, media | B2C, productivity | B2B SaaS, admin | Marketing, portfolio |
+| Default theme | Light (lavender gradient) | Light (warm) | Light (neutral) | Dark |
+
+## Delivery modes
+
+### Greenfield
+1. Choose page variant (dashboard, mobile app, landing, detail, auth, onboarding)
+2. Establish gradient background substrate first
+3. Load relevant references
+4. Apply token scope from `design-tokens.md` (glass tokens are the foundation)
+5. Compose layout from `patterns.md` or `websites.md`
+6. Build components from `components.md`
+
+### Brownfield
+1. Audit existing UI before rewriting
+2. Check if a gradient background can be added without breaking existing work
+3. Map Glassmorphism tokens onto the existing component library
+4. Fix non-glass surfaces first: add backdrop-blur and transparency progressively
+5. Consolidate duplicate variants before introducing new ones
+6. Prefer targeted upgrades over full rewrites unless the user asks for a redesign

package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md

@@ -0,0 +1,159 @@
+# Art Direction — Glassmorphism UI
+
+Read this file for any page-level work where differentiation matters: apps, dashboards, landing pages, and major flows.
+
+This file exists to stop Glassmorphism UI from collapsing into the same "blur everything and call it done" result every time.
+
+The glass system stays coherent, but the expression must change with the product, the user, and the dominant task.
+
+---
+
+## Core Rule
+
+**Same glass system, different expressions.**
+
+Keep the Glassmorphism DNA:
+- gradient background substrate (always)
+- backdrop-filter blur as structural depth
+- luminous borders (rgba white)
+- violet-blue accent with colored shadows
+- desaturated, luminous palette
+
+But do **not** keep the exact same card grid, blur intensity, gradient colors, or sidebar composition from product to product.
+
+---
+
+## Mandatory Pre-Build Outputs
+
+Before designing a full page, produce all of these:
+
+1. **Human**
+   The real person using this page right now.
+
+2. **Main action**
+   The one decision, action, or question that matters most on this screen.
+
+3. **Felt quality**
+   Concrete words such as `immersive`, `premium`, `fluid`, `calm`, `sophisticated`, `focused`, `alive`, `trustworthy`.
+   Never use empty labels like `modern`, `glassmorphic`, or `beautiful`.
+
+4. **Domain vocabulary**
+   At least 5 concepts from the product's world.
+   Example for fintech: `portfolio`, `allocation`, `yield`, `position`, `rebalance`.
+
+5. **Material world**
+   At least 5 tones or materials that belong to that product world.
+   Example for crypto: deep space navy, aurora violet glow, crystalline white, signal green, amber alert.
+
+6. **Defaults to avoid**
+   Name 3 obvious glass UI choices that would make the result generic.
+   Example: purple gradient background on everything, neon glow borders, glass card with no content hierarchy.
+
+7. **Signature move**
+   One memorable glass detail that appears in at least 5 places on the page.
+   Example: "stat numbers with accent-gradient text, repeated in hero, chart labels, and metric badges."
+
+If you cannot produce these seven, you are not ready to compose the page.
+
+---
+
+## Expression Modes
+
+Choose **one primary mode** per screen. You may borrow a small amount from a secondary mode only after the main expression is clear.
+
+### 1. Crystal Dashboard
+- **For**: fintech, crypto, investment portfolios, modern analytics
+- **Feel**: premium, trustworthy, sophisticated, modern
+- **Composition**: gradient background → glass stat cards floating → charts with gradient fills → translucent sidebar
+- **Visual cues**: strong backdrop-blur (20px+), luminous borders, large numbers in cards with transparent background, gradient fills in chart areas
+- **Signature ideas**: glass stat cards with inner glow on hover; chart area fill matches background gradient hue; glass sidebar showing gradient behind it
+- **Blur level**: `blur-md` (16px) for cards, `blur-lg` (24px) for sidebar
+
+### 2. Floating Mobile
+- **For**: mobile apps, PWAs, iOS-style interfaces, media players
+- **Feel**: modern, fluid, polished, delightful
+- **Composition**: cards floating over gradient background, glass bottom sheet, floating action buttons, translucent tab bar
+- **Visual cues**: very rounded corners (radius-2xl+), glass bottom sheets revealing blurred content behind, inset shadows on cards, icon backgrounds with blur
+- **Signature ideas**: bottom sheet revealing glass blur of content underneath; swipeable glass cards; glass tab bar matching iOS Control Center vibe
+- **Blur level**: `blur-sm` (8px) for performance on mobile, `blur-md` (16px) for key surfaces
+
+### 3. Aurora Landing
+- **For**: product launches, fintech marketing, modern SaaS marketing, crypto projects
+- **Feel**: futuristic, elegant, immersive, aspirational
+- **Composition**: hero with aurora gradient background (mesh of 2-3 pastel colors), floating glass feature cards, social proof in glass strip
+- **Visual cues**: aurora mesh gradient background (color-shifting blobs), glass hero card, floating product screenshots in glass frame, decorative gradient orbs
+- **Signature ideas**: animated aurora background with slow color shift; glass pricing cards with luminous highlight on featured; glass navigation becoming more opaque on scroll
+- **Blur level**: `blur-lg` (24px) for hero card, `blur-md` (16px) for feature cards, `blur-xl` (40px) for background blobs
+
+### 4. Media Player
+- **For**: music apps, video platforms, podcast players, streaming dashboards
+- **Feel**: immersive, atmospheric, contextual, alive
+- **Composition**: background is album art with extreme blur, controls over glass surfaces, playlist in glass sidebar, now-playing as central glass card
+- **Visual cues**: background adapts to dominant color of current media (color extraction), extreme blur (40px+), glass controls and buttons, progress bar over glass strip
+- **Signature ideas**: background color changes based on current media (smooth transition); glass now-playing card with album art reflection effect; volume and progress controls with glass knobs
+- **Blur level**: `blur-xl` (40px) for media background, `blur-lg` (24px) for player card, `blur-md` (16px) for playlist
+
+### 5. Zen Workspace
+- **For**: note-taking, writing tools, meditation apps, wellness dashboards
+- **Feel**: calm, focused, clean, serene
+- **Composition**: very subtle gradient background (almost solid), minimal glass cards, generous whitespace, clean typography
+- **Visual cues**: light blur (8-12px), almost invisible borders, ultra-subtle gradients, thin/line iconography
+- **Signature ideas**: focus mode where glass cards dim everything except the active card; soft ambient background with breathing opacity shift (very slow); glass toolbar that disappears during writing
+- **Blur level**: `blur-sm` (8px) throughout — restraint is the signature
+
+---
+
+## Signature Library
+
+These details are immediately available for any glass composition. Pick at least 2 per screen.
+
+| Detail | Usage |
+|--------|-------|
+| Gradient text on stat numbers | Hero metrics, KPI cards, price displays |
+| Top reflection `::before` | Every glass card, modal, sidebar |
+| Glass sidebar showing gradient behind | App shell, always |
+| Luminous border (rgba white) | All glass containers |
+| Colored shadow with violet tint | Cards, modals, elevated elements |
+| Accent gradient on primary CTA | Buttons, progress fills, chart fills |
+| Glass badge with semantic color tint | Status, labels, chip filters |
+| Inner glow on hover | Featured cards, stat cards |
+| Glass bottom sheet | Mobile overlays, drawers |
+| Aurora gradient background | Marketing heroes, login pages |
+| Gradient orbs (decorative blobs) | Landing pages, auth pages |
+| Glass nav becoming more opaque on scroll | All website navigation |
+
+---
+
+## Anti-Generic Tests
+
+Run all five before presenting the result.
+
+### Glass Test (unique to this skill)
+Remove `backdrop-filter: blur(...)` from all cards. If the interface still looks visually coherent and attractive, the glass is decorative, not structural. The transparency must be essential to the hierarchy — background must show through, gradient must be visible behind cards. Fix: reduce glass-bg opacity and ensure gradient substrate is visible.
+
+### Neon Test
+Is any color at saturation > 80%? If yes, you're building cyberpunk, not glassmorphism. Glass is desaturated and luminous. Fix: reduce saturation, shift to pastel variants, use violet-blue as accent only.
+
+### Depth Test
+Squint your eyes. Can you distinguish 3+ layers of depth? If everything feels flat, the glass isn't working. Fix: increase blur intensity on deeper layers, reduce opacity on background surfaces, add more distinct gradient between layers.
+
+### Squint Test
+Does the visual hierarchy hold without reading the text? Glass cards should create visible structure. If everything blurs into the same luminous soup, reduce glass nesting and increase contrast between layers.
+
+### Performance Test
+Does the blur cause excessive repaint? Every `backdrop-filter` creates a composite layer. More than 8-10 simultaneous blur elements on one screen can cause performance issues on mobile. Fix: use `blur-sm` on mobile, reduce glass nesting to 2 levels, use `will-change: transform` sparingly.
+
+---
+
+## What Makes Each Mode Distinct
+
+These are the diverging choices — the things that make mode 1 impossible to confuse with mode 5.
+
+| | Crystal Dashboard | Floating Mobile | Aurora Landing | Media Player | Zen Workspace |
+|---|---|---|---|---|---|
+| Blur intensity | 16-24px | 8-16px | 16-40px | 24-40px | 8-12px |
+| Card radius | radius-xl (16px) | radius-2xl+ (20px+) | radius-2xl (20px) | radius-2xl (20px) | radius-xl (16px) |
+| Background | Lavender aurora | Clean gradient | Color-shifting aurora | Album art (blurred) | Near-solid subtle gradient |
+| Signature element | Gradient stat numbers | Glass bottom sheet | Animated aurora orbs | Color-responsive background | Disappearing toolbar |
+| Motion | Card glow on hover | Swipe gestures | Parallax orbs | Color transition on track change | Breathing opacity |
+| Density | Medium | Low (mobile) | Low (marketing) | Low (immersive) | Very low |