diff --git a/design-language/DESIGN_SYSTEM_SUMMARY.md b/design-language/DESIGN_SYSTEM_SUMMARY.md
new file mode 100644
index 000000000..316966cba
--- /dev/null
+++ b/design-language/DESIGN_SYSTEM_SUMMARY.md
@@ -0,0 +1,380 @@
+# United Tattoo Design System - Analysis Summary
+
+## Overview
+
+I have created a comprehensive design.json file that serves as the single source of truth for the United Tattoo design system. This document is located at `/home/nicholai/Documents/dev/united-tattoo-design-language/design.json` and contains complete specifications for implementing the design language consistently across projects.
+
+## Key Findings
+
+### 1. Visual Design Language
+
+The United Tattoo design system is built on a **sun-washed plaster aesthetic** with gallery pacing principles. The core visual identity draws inspiration from:
+- Warm, desaturated color palettes (burnt oranges, sage greens, charcoal blacks)
+- Plaster wall textures catching diagonal afternoon light
+- Museum-quality gallery pacing (spacious, staggered, editorial)
+- Macro photography of artistic materials and architectural details
+
+### 2. Color Palette
+
+**Primary Colors:**
+- **Burnt Orange (#E67E50)**: Hero gradients, warm spotlight moments, CTA fills
+- **Terracotta (#D87850)**: Secondary buttons, form focus states, interactive elements
+- **Burnt Dark (#b0471e)**: Primary button backgrounds, link underlines, strong accents
+
+**Secondary Colors:**
+- **Sage Concrete (#7A8B8B)**: Page background gradients, cards, subtle overlays
+- **Sage (#a28f79)**: Success states, calming accent moments
+- **Moss (#6f5c49)**: Section labels, metadata, card titles
+
+**Neutral Colors:**
+- **Charcoal (#1c1915)** & **Ink (#241b16)**: Primary text and headings
+- **Cream (#fff7ec)** & **Sand (#f2e3d0)**: Light backgrounds, card fills
+- **White (#ffffff)**: Button text, form inputs
+
+All colors have been mapped with hex values, RGB equivalents, CSS variable names, usage contexts, and accessibility considerations.
+
+### 3. Typography System
+
+**Font Families:**
+- **Playfair Display** (serif): Headlines, display text, statements
+  - Weights: 400 (regular), 600 (semibold)
+  - Usage: "Museum placards feel" - sculptural, precise statements
+  - Sizing: clamp(2.5rem, 5vw, 3.8rem) for main heading
+
+- **Space Grotesk** (sans-serif): Body copy, interface text, metadata
+  - Weights: 400, 500, 600
+  - Usage: Quiet, generous tracking for readability
+  - Minimum size: 16px to maintain legibility on textured backgrounds
+
+**Typography Rules:**
+- Eyebrow: 0.75rem, uppercase, 0.3em letter-spacing
+- Section Labels: 0.85rem, uppercase, 0.3em tracking
+- Display: clamp(2.5rem, 5vw, 3.8rem) with 1.1 line height
+- Lead Text: clamp(0.95rem, 2vw, 1.3rem) with 54ch max-width
+- Accent: 0.9rem, uppercase, 0.25em letter-spacing
+
+### 4. Spacing & Layout Systems
+
+**Base Unit:** 0.5rem
+**Responsive Container Padding:** clamp(1.5rem, 4vw, 5rem)
+
+**Grid Systems:**
+- **grid-two**: Auto-fit 2-column grid (320px minimum)
+- **sticky-split**: Sticky sidebar (0.85fr) + flexible column (1fr)
+- **layout-examples**: 3-column gallery layout (responsive to 1fr below 720px)
+- **interaction-split**: Interaction principles (0.85fr) + examples (1fr)
+
+**Key Layout Patterns:**
+- Full-bleed sections extend edge-to-edge (100vw with negative margins)
+- Sticky positioning with dynamic offsets (top: 2rem to 5rem)
+- Mobile-first responsive approach with breakpoint at 720px
+- Generous whitespace emphasizing gallery pacing
+
+### 5. Design Style Elements
+
+**Border Radius Scale:**
+- Buttons & Form inputs: 12px
+- Cards: 18-24px (depending on card type)
+- Large cards: 22-28px
+- Filmstrip items: 32px
+- Chips: 999px (full pill shape)
+
+**Shadow System:**
+- Subtle (4px, 0.08 opacity): Small card interactions
+- Medium (12-14px, 0.1-0.18 opacity): Standard cards, forms
+- Large (20-25px, 0.2 opacity): Hero sections, elevated content
+- Filmic (40px, 0.25 opacity): Filmstrip items, largest elements
+
+**Border Treatment:**
+- Primary: 1px solid with rgba(122, 139, 139, 0.2) for subtle definition
+- Form focused: 1px terracotta with 3px rgba(210, 106, 50, 0.2) glow
+- Dashed: 1px dashed rgba(122, 139, 139, 0.3) for sample containers
+
+**Backdrop Effects:**
+- Hero overlay uses: blur(12px) saturate(110%)
+- Creates frosted glass effect on sand/cream background
+
+### 6. Component Library
+
+**Buttons:**
+- Primary (.demo-btn.primary): Burnt background, white text, 0.25 shadow
+  - Hover: Scale 1.05, translateY(-1px), enhanced shadow
+- Secondary (.demo-btn.secondary): Terracotta, white text
+- Ghost (.demo-btn.ghost): Sand background, ink text, bordered
+
+**Cards:**
+- Data Card: Gradient background (rgba 0.95-0.9), 22px radius, 1.8rem padding
+- Component Card: White background (0.88 opacity), 18px radius
+- Motion Example Card: Gradient, 20px radius, 2rem padding
+- Scroll Step: White (0.92 opacity), 20px radius
+
+**Form Elements:**
+- Container: Gradient background, 22px radius, 2.2rem padding
+- Input: 12px radius, terracotta focus state, 3px glow on focus
+- Label: 0.75rem, 600 weight, 0.25em tracking, uppercase
+
+**Calendar:**
+- Grid: 7 columns with 0.4rem gap
+- Day: Square (aspect-ratio 1/1), 8px radius
+- Booked State: Terracotta background, white text, shadow
+
+**Filmstrip:**
+- Horizontal scroll with scroll-driven animation
+- Items: 32px radius, clamp(420px, 55vw, 820px) width
+- Progress bar: 2px height, burnt-to-rose gradient
+
+### 7. Animation & Motion Principles
+
+**Timing Standards:**
+- Fast: 0.2s (button hover, scale effects)
+- Normal: 0.3s (card interactions, link effects)
+- Slow: 0.6s (stagger sequences, section transitions)
+- Slower: 0.8s (main scroll reveals, entrance animations)
+
+**Easing Functions:**
+- Primary: ease-out (for reveal animations, appearing elements)
+- Secondary: ease-in (for exit animations)
+- Linear: only for progress bars and filmstrip
+
+**Key Animation Patterns:**
+
+1. **Reveal Animations** (0.8s ease-out):
+   - Initial: opacity 0, translateY(60px)
+   - Active: opacity 1, translateY(0)
+   - Trigger: Intersection Observer (threshold: 0.18)
+
+2. **3D Type Cards** (0.8s ease):
+   - Initial: perspective(900px) rotateX(10deg) translateY(60px)
+   - Active: perspective(900px) rotateX(0deg) translateY(0)
+
+3. **Button Hover** (0.2s ease):
+   - Standard: translateY(-1px)
+   - Enhanced: scale(1.05) translateY(-1px)
+   - Shadow bloom from 0.25 to 0.3
+
+4. **Link Underline Draw** (0.3s ease-out):
+   - Initial: width 0, position absolute, bottom -2px
+   - Hover: width 100%
+   - Creates painted stroke effect
+
+5. **Stagger Animations**:
+   - Cards: 50ms stagger (0s, 0.05s, 0.1s)
+   - Layout cards: 150ms stagger (0s, 0.15s, 0.3s)
+   - Creates gallery walk-through effect
+
+6. **Filmstrip Scroll** (scroll-driven):
+   - TranslateX animation follows vertical scroll
+   - Distance = (filmstrip width - viewport width)
+   - Progress bar scaleX matches scroll percentage
+
+7. **Parallax** (subtle, 0.12 factor):
+   - Hero image: window.scrollY * 0.12
+   - Kept to 5% maximum for subtlety
+
+### 8. Interaction Principles
+
+**Baseline Interactions:**
+- Fade/slide reveals on scroll (200-300ms, ease-out)
+- Buttons scale to 105% with shadow bloom
+- Link underlines draw left-to-right like painted strokes
+- All interactions feel deliberate and brush-stroke-like
+
+**Accent Moments:**
+- Parallax effects on hero imagery (limited to 5% movement)
+- Staggered card entrances (50ms delays) for walk-through feel
+- Interactive swatches with background tinting on hover
+- Color swatches that scale 1.1 on hover
+
+**User Feedback:**
+- Focus states: 2px rose outline with 3px offset
+- Form input focus: Terracotta border, 3px rgba glow
+- Hover states: Smooth elevation with shadow bloom
+- No aggressive animations - subtlety maintains sophistication
+
+### 9. Responsive Design Implementation
+
+**Mobile Breakpoint:** 720px
+
+**Mobile Changes:**
+- Single-column layouts (grid-template-columns: 1fr)
+- Sticky positioning becomes static (position: static)
+- Reduced padding: 1.5rem instead of clamp values
+- Hero height: 50vh instead of 65vh
+- Container padding: 1.5rem fixed
+
+**Responsive Techniques:**
+- clamp() for fluid typography and spacing
+- auto-fit/auto-fill grid layouts
+- minmax() for flexible column sizing
+- Viewport width (vw) units for responsive scaling
+
+### 10. Design Tokens Extracted
+
+**CSS Variables Defined:**
+- Color variables: 10 primary + semantic colors
+- Spacing variable: --sticky-offset
+- All colors have fallback hex values
+- Dynamic offset: clamp(3.5rem, 8vw, 6rem)
+
+**Opacity Scale:** 23 values from 0.03 to 0.98
+
+**Gradient Definitions:** 4 primary gradients documented with usage
+
+**Z-index Values:**
+- Background overlay: -2
+- Background texture: -1
+- Content: 0, 1 (relative positioning)
+- Hero overlay content: 1 (positioned relative)
+
+### 11. Design Principles & Voice
+
+**Visual Principles:**
+1. Sensory-driven design inspired by plaster walls catching afternoon light
+2. Gallery pacing - spacious, staggered, editorial rhythm
+3. Typography as carved etchings - precise, deliberate, never shouting
+4. Micro-interactions that feel tactile and intentional
+5. Fade/slide reveals with 200-300ms ease-out timing
+6. Authentic, transparent process-focused messaging
+
+**Tone & Voice:**
+- ARTISTIC: Creative, gallery-influenced language
+- BOLD: Confident statements about craft and process
+- SOPHISTICATED: Elevated tone for luxury positioning
+- ENERGETIC: Dynamic language paired with motion
+- AUTHENTIC: Transparent about process and collaboration
+- PROFESSIONAL: Polished, gallery-quality standards
+
+**Sensory Language:**
+- Use analogies like "sun-baked walls," "charcoal whisper"
+- Keep CTAs confident but calm ("Begin Commission," "Visit the Studio")
+- Highlight collaboration and process transparency
+- Speak to seasoned collectors, not trend chasers
+- Balance poetic descriptions with precise process language
+
+### 12. Accessibility Considerations
+
+**Color Contrast:**
+- Burnt orange on white/cream meets WCAG AA standards
+- Charcoal ink (#241b16) on sand/cream backgrounds provides full contrast
+- Rose outline (#e59863) has sufficient contrast for focus indicators
+
+**Focus States:**
+- All interactive elements have visible focus states
+- Button focus: 2px rose outline with 3px offset
+- Form inputs: Terracotta border with rgba glow
+
+**Touch Targets:**
+- Button minimum height: 44px recommended
+- Form inputs: Adequate padding for touch interaction
+- Calendar day cells: ~40px minimum
+
+**Typography:**
+- Minimum font size: 16px for body copy on textured backgrounds
+- Generous line height (1.6) for readability
+- Adequate letter-spacing for metadata (0.25em minimum)
+- Proper heading hierarchy (h1 to h4)
+
+**Mobile Accessibility:**
+- Touch-friendly spacing maintained
+- Readable font sizes scale responsibly
+- Stacked vertical layouts below 720px
+- Sticky elements become static on mobile
+
+## File Structure
+
+The design.json file is organized into these main sections:
+
+1. **Version & Metadata**: 1.0.0, lastUpdated timestamp
+2. **designLanguage**: Name, description, philosophy, core principles
+3. **colors**: Complete palette with primary, secondary, neutral, semantic, opacity, gradients
+4. **typography**: Font families, sizes, weights, line heights, letter-spacing, text transforms
+5. **spacing**: Base unit, scale, padding, margin, gap values
+6. **layout**: Max-width, breakpoints, responsive patterns, grid systems
+7. **designStyle**: Border radius, shadows, borders, backdrop filters, blend modes
+8. **animations**: Timing, easing, scroll animations, component animations, stagger effects
+9. **components**: Complete documentation for button, card, form, toast, calendar, swatch, filmstrip
+10. **patterns**: Interaction principles, scroll-driven animation, sticky layouts, responsive gallery
+11. **tonAndMessaging**: Voice characteristics, messaging principles, CTAs
+12. **designPrinciples**: Visual language, typography philosophy, spacing rhythm, motion principles
+13. **accessibility**: Color contrast, focus states, touch targets, semantic HTML
+14. **implementation**: CSS variables, font imports, responsive approach, animation triggers
+
+## How to Use This Design System
+
+1. **For Developers**: Reference the design.json file when building UI components
+   - Extract exact color values from the colors section
+   - Use defined typography styles and font sizes
+   - Apply spacing scales consistently
+   - Implement animations using specified timing and easing values
+   - Follow responsive breakpoints and grid systems
+
+2. **For Designers**: Use this as a specification guide
+   - Ensure new designs use the defined color palette
+   - Maintain typography hierarchy as specified
+   - Apply consistent spacing and grid alignment
+   - Design animations with the specified timing principles
+   - Consider mobile layouts at the 720px breakpoint
+
+3. **For Documentation**: Share this with team members
+   - Onboarding new designers/developers to the system
+   - Reference for consistency checks
+   - Source of truth for design decisions
+   - Guidelines for extending the system
+
+## Recommendations for Consistency & Scalability
+
+### Immediate Actions
+1. Add this design.json to your project documentation
+2. Create a living component library (Storybook, Zeroheight, or similar) that references this system
+3. Establish code standards for CSS variable usage across projects
+
+### For System Extension
+1. **New Colors**: Add to the appropriate palette section with hex, RGB, CSS variable, and usage
+2. **New Components**: Follow the existing documentation pattern with variations, states, and accessibility notes
+3. **New Animations**: Document timing, easing, triggers, and use cases consistently
+4. **New Breakpoints**: Add to the breakpoints section and update responsive patterns
+
+### For Consistency
+1. Always use the defined color palette - no arbitrary hex values
+2. Apply spacing from the scale (xs, sm, md, lg, xl, 2xl, etc.)
+3. Use typography sizes from the defined scale with proper families
+4. Implement animations with specified timing (0.2s, 0.3s, 0.6s, 0.8s)
+5. Test focus states and keyboard navigation for accessibility
+6. Validate color contrast ratios for any new color combinations
+
+### For Scalability
+1. Keep CSS variables synchronized with design.json definitions
+2. Consider a CSS preprocessor (SCSS) for variable composition
+3. Implement design tokens generation from JSON for multiple platforms
+4. Create component props that map to defined design tokens
+5. Document any deviations from the system with justification
+
+## Notable Design Decisions
+
+1. **Color Opacity Strategy**: Uses explicit opacity values in rgba() rather than color alpha channel, allowing flexible background layering
+
+2. **Responsive Typography**: All text sizes use clamp() for fluid scaling between mobile and desktop without breakpoints
+
+3. **Filmstrip Animation**: Scroll-driven using requestAnimationFrame for 60fps smooth horizontal scrolling triggered by vertical scroll
+
+4. **Intersection Observer Threshold**: Set to 0.18 (18% visible) for reveal animations - higher than typical 0.1 to ensure animations feel intentional
+
+5. **Parallax Constraint**: Limited to 0.12 factor (12% movement) for subtlety - prevents motion sickness on mobile
+
+6. **Stagger Timing Difference**: Uses two stagger rates (50ms for components, 150ms for layout cards) to create different visual rhythms
+
+7. **Mobile Sticky Disengagement**: Sticky positioning automatically becomes static below 720px to improve mobile scroll performance
+
+8. **Grid Full-Bleed**: Uses negative margin math (calc(50% - 50vw)) instead of viewport-relative positioning for more reliable rendering
+
+## File Locations
+
+- **Design System JSON**: `/home/nicholai/Documents/dev/united-tattoo-design-language/design.json`
+- **Index HTML**: `/home/nicholai/Documents/dev/united-tattoo-design-language/index.html`
+- **This Summary**: `/home/nicholai/Documents/dev/united-tattoo-design-language/DESIGN_SYSTEM_SUMMARY.md`
+
+---
+
+**Generated**: 2025-11-18
+**System Version**: 1.0.0
+**Analyzed From**: index.html style guide and component library
diff --git a/design-language/design.json b/design-language/design.json
new file mode 100644
index 000000000..8b5c4dc53
--- /dev/null
+++ b/design-language/design.json
@@ -0,0 +1,1243 @@
+{
+  "version": "1.0.0",
+  "lastUpdated": "2025-11-18T00:00:00Z",
+  "designLanguage": {
+    "name": "United Tattoo Design System",
+    "description": "A living design system for United Tattoo that blends sun-washed plaster aesthetics with gallery pacing principles. The system prioritizes tactile interactions, sensory analogies, and deliberate movement patterns.",
+    "philosophy": "Sun-washed plaster aesthetic with gallery pacing, tactile interactions, sensory analogies, and deliberate brush-stroke-like movements.",
+    "principles": [
+      "Sensory-driven design inspired by plaster walls catching afternoon light",
+      "Gallery pacing: spacious, staggered, editorial rhythm",
+      "Typography as carved etchings: precise, deliberate, never shouting",
+      "Micro-interactions that feel tactile and intentional",
+      "Fade/slide reveals with 200-300ms ease-out timing",
+      "Authentic, transparent process-focused messaging"
+    ]
+  },
+  "colors": {
+    "palette": {
+      "primary": {
+        "burntOrange": {
+          "name": "Burnt Orange",
+          "hex": "#E67E50",
+          "rgb": "rgb(230, 126, 80)",
+          "cssVar": "N/A",
+          "usage": "Hero gradients, CTA fills, warm spotlight moments, primary button fills",
+          "accessibility": "Used on dark text (charcoal/ink) backgrounds for sufficient contrast"
+        },
+        "terracotta": {
+          "name": "Terracotta",
+          "hex": "#D87850",
+          "rgb": "rgb(216, 120, 80)",
+          "cssVar": "--terracotta",
+          "usage": "Secondary buttons, form focus states, micro interactions, calendar booked states",
+          "accessibility": "Primary action color with high contrast against white backgrounds"
+        },
+        "burnt": {
+          "name": "Burnt (Dark Orange)",
+          "hex": "#b0471e",
+          "rgb": "rgb(176, 71, 30)",
+          "cssVar": "--burnt",
+          "usage": "Primary button background, link underlines, strong accent moments",
+          "accessibility": "Darkest orange variant for maximum contrast"
+        }
+      },
+      "secondary": {
+        "sageConcrete": {
+          "name": "Sage Concrete",
+          "hex": "#7A8B8B",
+          "rgb": "rgb(122, 139, 139)",
+          "cssVar": "N/A",
+          "usage": "Page background gradients, cards, filmstrip fades, subtle overlays",
+          "accessibility": "Background color providing calm, muted tone"
+        },
+        "sage": {
+          "name": "Sage",
+          "hex": "#a28f79",
+          "rgb": "rgb(162, 143, 121)",
+          "cssVar": "--sage",
+          "usage": "Success toast backgrounds, accent elements, metadata text",
+          "accessibility": "Desaturated green for calming success states"
+        },
+        "deepOlive": {
+          "name": "Deep Olive",
+          "hex": "#4a4034",
+          "rgb": "rgb(74, 64, 52)",
+          "cssVar": "--deep-olive",
+          "usage": "Dark accent color, alternative text color",
+          "accessibility": "High contrast dark tone"
+        },
+        "moss": {
+          "name": "Moss",
+          "hex": "#6f5c49",
+          "rgb": "rgb(111, 92, 73)",
+          "cssVar": "--moss",
+          "usage": "Section labels, metadata text, card titles, eyebrow text",
+          "accessibility": "Medium-dark brown for labels and metadata"
+        }
+      },
+      "neutral": {
+        "charcoal": {
+          "name": "Charcoal",
+          "hex": "#1c1915",
+          "rgb": "rgb(28, 25, 21)",
+          "cssVar": "--charcoal",
+          "usage": "Darkest text color, photography overlays, line work",
+          "accessibility": "Maximum contrast text color"
+        },
+        "ink": {
+          "name": "Ink",
+          "hex": "#241b16",
+          "rgb": "rgb(36, 27, 22)",
+          "cssVar": "--ink",
+          "usage": "Primary text color, headings, body copy",
+          "accessibility": "Primary text color with full contrast"
+        },
+        "cream": {
+          "name": "Cream",
+          "hex": "#fff7ec",
+          "rgb": "rgb(255, 247, 236)",
+          "cssVar": "--cream",
+          "usage": "Light background, card fills, soft off-white",
+          "accessibility": "Warm white background alternative"
+        },
+        "sand": {
+          "name": "Sand",
+          "hex": "#f2e3d0",
+          "rgb": "rgb(242, 227, 208)",
+          "cssVar": "--sand",
+          "usage": "Ghost button backgrounds, light card fills, hero overlay base",
+          "accessibility": "Warm beige for soft backgrounds"
+        },
+        "white": {
+          "name": "White",
+          "hex": "#ffffff",
+          "rgb": "rgb(255, 255, 255)",
+          "usage": "Button text, form inputs, toast icons background",
+          "accessibility": "Maximum brightness for text on colored backgrounds"
+        }
+      },
+      "semantic": {
+        "success": {
+          "name": "Success",
+          "hex": "#a28f79",
+          "cssVar": "--sage",
+          "usage": "Success toasts, confirmation states, check marks",
+          "description": "Sage green for positive actions"
+        },
+        "alert": {
+          "name": "Alert",
+          "hex": "#e59863",
+          "cssVar": "--rose",
+          "usage": "Alert toasts, warning states, notification badges",
+          "description": "Rose/coral for attention-grabbing notifications"
+        },
+        "rose": {
+          "name": "Rose",
+          "hex": "#e59863",
+          "rgb": "rgb(229, 152, 99)",
+          "cssVar": "--rose",
+          "usage": "Alert accent, warm highlights, notification colors",
+          "accessibility": "Warm accent color for alerts and highlights"
+        }
+      },
+      "opacity": {
+        "10": 0.1,
+        "15": 0.15,
+        "18": 0.18,
+        "20": 0.2,
+        "25": 0.25,
+        "3": 0.03,
+        "35": 0.35,
+        "4": 0.04,
+        "5": 0.05,
+        "50": 0.5,
+        "55": 0.55,
+        "6": 0.06,
+        "65": 0.65,
+        "75": 0.75,
+        "8": 0.08,
+        "85": 0.85,
+        "88": 0.88,
+        "9": 0.09,
+        "90": 0.9,
+        "95": 0.95,
+        "98": 0.98"
+      },
+      "gradients": {
+        "heroBackground": {
+          "value": "linear-gradient(180deg, #7A8B8B 0%, #9CAAA6 45%, #F2E3D0 100%)",
+          "usage": "Full-page background gradient"
+        },
+        "heroOverlay": {
+          "value": "linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9))",
+          "usage": "Hero section card background"
+        },
+        "buttonGradient": {
+          "value": "linear-gradient(90deg, #b0471e, #d26a32)",
+          "usage": "Primary button gradient (not currently implemented)"
+        },
+        "burnedToRose": {
+          "value": "linear-gradient(90deg, #b0471e, #e59863)",
+          "usage": "Filmstrip progress bar"
+        }
+      }
+    }
+  },
+  "typography": {
+    "fontFamilies": {
+      "primary": {
+        "name": "Playfair Display",
+        "fallback": "Times New Roman, serif",
+        "usage": "Display, headlines, statements",
+        "source": "Google Fonts",
+        "weights": [400, 600]
+      },
+      "secondary": {
+        "name": "Space Grotesk",
+        "fallback": "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",
+        "usage": "Body, interface, metadata",
+        "source": "Google Fonts",
+        "weights": [400, 500, 600]
+      }
+    },
+    "sizes": {
+      "xs": {
+        "value": "0.7rem",
+        "usage": "Uppercase metadata, filmstrip labels"
+      },
+      "sm": {
+        "value": "0.75rem",
+        "usage": "Small labels, form hints, section labels"
+      },
+      "base": {
+        "value": "0.95rem",
+        "usage": "Body copy, interface text"
+      },
+      "md": {
+        "value": "1rem",
+        "usage": "Regular body text"
+      },
+      "lg": {
+        "value": "1.1rem",
+        "usage": "Large body, section leads"
+      },
+      "xl": {
+        "value": "1.2rem",
+        "usage": "Card titles, strong statements"
+      },
+      "2xl": {
+        "value": "1.9rem",
+        "usage": "Section headings (responsive)"
+      },
+      "3xl": {
+        "value": "2.4rem",
+        "usage": "Main interface headings"
+      },
+      "4xl": {
+        "value": "2.5rem",
+        "usage": "Page section headings"
+      },
+      "5xl": {
+        "value": "3rem",
+        "usage": "Large section headings"
+      },
+      "6xl": {
+        "value": "3.8rem",
+        "usage": "Hero title, main page heading"
+      }
+    },
+    "weights": {
+      "light": 300,
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "lineHeights": {
+      "tight": 1.1,
+      "snug": 1.15,
+      "normal": 1.5,
+      "relaxed": 1.6,
+      "loose": 1.65,
+      "veryLoose": 1.7
+    },
+    "letterSpacing": {
+      "tight": "-0.02em",
+      "normal": "0em",
+      "wide": "0.05em",
+      "wider": "0.2em",
+      "widest": "0.25em",
+      "veryWide": "0.3em",
+      "extraWide": "0.35em"
+    },
+    "textTransforms": {
+      "uppercase": "text-transform: uppercase",
+      "capitalize": "text-transform: capitalize",
+      "none": "text-transform: none"
+    },
+    "typographyRules": {
+      "eyebrow": {
+        "size": "0.75rem",
+        "weight": 600,
+        "transform": "uppercase",
+        "letterSpacing": "0.3em",
+        "color": "var(--moss)",
+        "usage": "Section labels, metadata headers"
+      },
+      "sectionLabel": {
+        "size": "0.85rem",
+        "weight": 600,
+        "transform": "uppercase",
+        "letterSpacing": "0.3em",
+        "color": "var(--moss)",
+        "usage": "Section dividers, component labels"
+      },
+      "display": {
+        "family": "Playfair Display",
+        "size": "clamp(2.5rem, 5vw, 3.8rem)",
+        "weight": 400,
+        "lineHeight": 1.1,
+        "usage": "Hero title"
+      },
+      "heading2": {
+        "family": "Playfair Display",
+        "size": "clamp(1.9rem, 4vw, 3rem)",
+        "weight": 400,
+        "lineHeight": 1.1,
+        "usage": "Section headings"
+      },
+      "heading3": {
+        "size": "0.95rem",
+        "weight": 600,
+        "transform": "uppercase",
+        "letterSpacing": "0.2em",
+        "usage": "Card titles, data card headers"
+      },
+      "heading4": {
+        "size": "0.85rem",
+        "weight": 600,
+        "letterSpacing": "0.2em",
+        "usage": "Component labels, subsection headers"
+      },
+      "body": {
+        "family": "Space Grotesk",
+        "size": "0.95rem",
+        "weight": 400,
+        "lineHeight": 1.6,
+        "usage": "Body copy, interface text"
+      },
+      "lead": {
+        "size": "clamp(0.95rem, 2vw, 1.3rem)",
+        "color": "rgba(31, 27, 23, 0.75)",
+        "lineHeight": 1.65,
+        "maxWidth": "54ch",
+        "usage": "Introductory paragraph text, section descriptions"
+      },
+      "accent": {
+        "size": "0.9rem",
+        "weight": 500,
+        "letterSpacing": "0.25em",
+        "transform": "uppercase",
+        "usage": "Buttons, accent text, metadata"
+      }
+    }
+  },
+  "spacing": {
+    "baseUnit": "0.5rem",
+    "scale": {
+      "0": "0",
+      "xs": "0.4rem",
+      "sm": "0.5rem",
+      "md": "0.8rem",
+      "lg": "1rem",
+      "xl": "1.2rem",
+      "2xl": "1.5rem",
+      "3xl": "1.8rem",
+      "4xl": "2rem",
+      "5xl": "2.5rem",
+      "6xl": "3rem",
+      "7xl": "3.5rem",
+      "8xl": "4rem",
+      "9xl": "5rem",
+      "10xl": "6rem"
+    },
+    "padding": {
+      "container": "clamp(1.5rem, 4vw, 5rem)",
+      "containerLarge": "clamp(2rem, 5vw, 6rem)",
+      "card": "1.6rem",
+      "cardDense": "1.4rem",
+      "cardLarge": "2rem",
+      "button": "1rem 1.6rem",
+      "section": "clamp(2.5rem, 6vw, 5rem)"
+    },
+    "margin": {
+      "section": "3.5rem",
+      "sectionLarge": "4rem"
+    },
+    "gap": {
+      "xs": "0.4rem",
+      "sm": "0.8rem",
+      "md": "1rem",
+      "lg": "1.2rem",
+      "xl": "1.5rem",
+      "2xl": "1.8rem",
+      "3xl": "2rem",
+      "4xl": "2.5rem",
+      "5xl": "3rem",
+      "6xl": "4rem"
+    },
+    "gridGaps": {
+      "tight": "1rem",
+      "normal": "1.8rem",
+      "comfortable": "2rem",
+      "spacious": "clamp(2rem, 5vw, 5rem)"
+    }
+  },
+  "layout": {
+    "maxWidth": "1600px",
+    "breakpoints": {
+      "mobile": "720px",
+      "tablet": "1024px",
+      "desktop": "1600px"
+    },
+    "responsivePatterns": {
+      "containerPadding": "clamp(1.5rem, 4vw, 5rem)",
+      "sectionPadding": "clamp(2rem, 5vw, 6rem)",
+      "gapResponsive": "clamp(1.5rem, 4vw, 4rem)"
+    },
+    "gridSystems": {
+      "gridTwo": {
+        "description": "Two-column auto-fit grid for cards",
+        "css": "grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))",
+        "gap": "1.8rem",
+        "usage": "Color swatches, data cards, component grids"
+      },
+      "stickySplit": {
+        "description": "Sticky left column with flexible right column",
+        "css": "grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr)",
+        "gap": "clamp(1.5rem, 4vw, 4rem)",
+        "usage": "Identity section, process storytelling"
+      },
+      "layoutExamples": {
+        "description": "Three-column layout for gallery-style displays",
+        "css": "grid-template-columns: repeat(3, 1fr)",
+        "gap": "clamp(2rem, 4vw, 4rem)",
+        "responsiveBreakpoint": "720px = 1fr"
+      },
+      "componentDemo": {
+        "description": "Auto-fit grid for component showcases",
+        "css": "grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))",
+        "gap": "2rem"
+      },
+      "interactionSplit": {
+        "description": "Split layout for interaction principles and examples",
+        "css": "grid-template-columns: minmax(300px, 0.85fr) minmax(400px, 1fr)",
+        "gap": "clamp(2rem, 5vw, 4rem)"
+      },
+      "stickyGrid": {
+        "description": "Sticky left panel with scrolling right content",
+        "css": "grid-template-columns: minmax(230px, 320px) minmax(280px, 1fr)",
+        "gap": "2rem"
+      },
+      "swapContentTrack": {
+        "description": "Two-column layout for interface swap sections",
+        "css": "grid-template-columns: minmax(400px, 1fr) minmax(380px, 0.95fr)",
+        "gap": "clamp(3rem, 5vw, 6rem)"
+      }
+    },
+    "fullBleedPatterns": {
+      "fullBleed": {
+        "width": "100vw",
+        "marginLeft": "calc(50% - 50vw)",
+        "marginRight": "calc(50% - 50vw)",
+        "usage": "Hero, filmstrip, section dividers"
+      }
+    },
+    "stickyPositioning": {
+      "columnSticky": {
+        "position": "sticky",
+        "top": "5rem",
+        "alignSelf": "start",
+        "usage": "Sidebar in sticky-split layouts"
+      },
+      "panelSticky": {
+        "position": "sticky",
+        "top": "2rem",
+        "usage": "Sticky panels in scroll-based sections"
+      }
+    },
+    "mobileResponsive": {
+      "breakpoint": "720px",
+      "changes": {
+        "stickySplit": "1fr (stacks vertically)",
+        "layoutExamples": "1fr (single column)",
+        "stickyColumn": "position: static",
+        "interactionSplit": "1fr (stacks vertically)",
+        "containerPadding": "1.5rem",
+        "heroHeight": "50vh"
+      }
+    }
+  },
+  "designStyle": {
+    "borderRadius": {
+      "xs": "8px",
+      "sm": "12px",
+      "md": "14px",
+      "lg": "18px",
+      "xl": "20px",
+      "2xl": "22px",
+      "3xl": "24px",
+      "4xl": "28px",
+      "5xl": "32px",
+      "full": "999px"
+    },
+    "borderRadiusUsage": {
+      "buttons": "12px",
+      "formInputs": "12px",
+      "cards": "18px-24px",
+      "largeCards": "22px-28px",
+      "filmstripItems": "32px",
+      "chips": "999px"
+    },
+    "shadows": {
+      "none": "none",
+      "sm": "0 4px 12px rgba(31, 27, 23, 0.08)",
+      "md": "0 12px 28px rgba(31, 27, 23, 0.1)",
+      "lg": "0 14px 24px rgba(31, 27, 23, 0.18)",
+      "xl": "0 20px 35px rgba(31, 27, 23, 0.1)",
+      "2xl": "0 20px 40px rgba(31, 27, 23, 0.2)",
+      "3xl": "0 25px 40px rgba(31, 27, 23, 0.08)",
+      "4xl": "0 32px 60px rgba(31, 27, 23, 0.2)",
+      "5xl": "0 35px 55px rgba(31, 27, 23, 0.18)",
+      "6xl": "0 40px 70px rgba(31, 27, 23, 0.25)",
+      "filmic": "0 40px 70px rgba(31, 27, 23, 0.25)"
+    },
+    "borders": {
+      "width": {
+        "hairline": "1px",
+        "thin": "1px",
+        "thick": "4px"
+      },
+      "style": "solid",
+      "colors": {
+        "subtle": "rgba(122, 139, 139, 0.2)",
+        "muted": "rgba(210, 106, 50, 0.2)",
+        "light": "rgba(31, 27, 23, 0.08)",
+        "lighter": "rgba(31, 27, 23, 0.12)",
+        "dashed": "1px dashed rgba(122, 139, 139, 0.3)"
+      }
+    },
+    "backdropFilters": {
+      "heroOverlay": "blur(12px) saturate(110%)",
+      "usage": "Hero section card background blurring"
+    },
+    "maskImages": {
+      "heroFade": "linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%)",
+      "usage": "Hero section fade to transparent at bottom"
+    },
+    "blendModes": {
+      "multiply": "mix-blend-mode: multiply",
+      "usage": "Texture overlay on body background"
+    }
+  },
+  "animations": {
+    "timing": {
+      "fast": "0.2s",
+      "normal": "0.3s",
+      "slow": "0.6s",
+      "slower": "0.8s"
+    },
+    "easing": {
+      "easeOut": "ease-out",
+      "easeIn": "ease-in",
+      "linear": "linear"
+    },
+    "scrollAnimations": {
+      "reveal": {
+        "initial": {
+          "opacity": 0,
+          "transform": "translateY(60px)"
+        },
+        "active": {
+          "opacity": 1,
+          "transform": "translateY(0)"
+        },
+        "timing": "0.8s ease-out",
+        "trigger": "Intersection Observer (threshold: 0.18)",
+        "usage": "Fade-in and slide-up animations on scroll"
+      },
+      "typeCard": {
+        "initial": {
+          "opacity": 0,
+          "transform": "perspective(900px) rotateX(10deg) translateY(60px)"
+        },
+        "active": {
+          "opacity": 1,
+          "transform": "perspective(900px) rotateX(0deg) translateY(0)"
+        },
+        "timing": "0.8s ease",
+        "usage": "3D rotation effect for typography cards"
+      },
+      "sectionDivider": {
+        "initial": {
+          "opacity": 0,
+          "transform": "scaleX(0)"
+        },
+        "active": {
+          "opacity": 1,
+          "transform": "scaleX(1)"
+        },
+        "timing": "opacity 0.6s ease-out, transform 0.8s ease-out",
+        "usage": "Section separator line animation"
+      },
+      "sectionTransition": {
+        "initial": {
+          "opacity": 0,
+          "transform": "translateY(80px)"
+        },
+        "active": {
+          "opacity": 1,
+          "transform": "translateY(0)"
+        },
+        "timing": "opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s",
+        "usage": "Delayed section entrance animations"
+      }
+    },
+    "componentAnimations": {
+      "button": {
+        "hover": {
+          "transform": "translateY(-1px)",
+          "boxShadow": "0 8px 16px rgba(186, 75, 47, 0.2)"
+        },
+        "timing": "0.2s ease",
+        "motionExample": "Buttons scale to 105% with shadow bloom on hover"
+      },
+      "buttonScale": {
+        "hover": {
+          "transform": "scale(1.05) translateY(-1px)",
+          "boxShadow": "0 12px 24px rgba(186, 75, 47, 0.3)"
+        },
+        "timing": "0.2s ease",
+        "usage": "Enhanced button hover in motion examples"
+      },
+      "linkUnderline": {
+        "initial": {
+          "width": 0,
+          "position": "absolute",
+          "bottom": "-2px",
+          "left": 0,
+          "height": "2px",
+          "background": "var(--burnt)"
+        },
+        "hover": {
+          "width": "100%"
+        },
+        "timing": "0.3s ease-out",
+        "usage": "Link underlines draw from left to right like painted stroke"
+      },
+      "layoutExample": {
+        "hover": {
+          "transform": "translateY(-6px)",
+          "boxShadow": "0 32px 60px rgba(31, 27, 23, 0.2)"
+        },
+        "imageHover": {
+          "transform": "scale(1.03)"
+        },
+        "timing": "0.3s ease"
+      },
+      "motionExampleCard": {
+        "hover": {
+          "transform": "translateY(-2px)",
+          "boxShadow": "0 16px 36px rgba(31, 27, 23, 0.15)"
+        },
+        "timing": "0.3s ease"
+      },
+      "swatch": {
+        "hover": {
+          "transform": "scale(1.1)"
+        },
+        "timing": "0.2s ease",
+        "usage": "Color swatch hover effect"
+      }
+    },
+    "staggerAnimations": {
+      "staggerCard": {
+        "baseDelay": "0s",
+        "card1": "0s",
+        "card2": "0.05s",
+        "card3": "0.1s",
+        "timing": "0.3s ease-out",
+        "usage": "Staggered card animations (50ms between cards)"
+      },
+      "staggerLayoutCard": {
+        "baseDelay": "0s",
+        "card1": "0s",
+        "card2": "0.15s",
+        "card3": "0.3s",
+        "timing": "0.6s ease-out",
+        "usage": "Staggered layout card animations (150ms between cards)"
+      }
+    },
+    "filmstripAnimation": {
+      "scrollDriven": {
+        "description": "Horizontal scroll follows vertical scroll position",
+        "transform": "translateX(calculated based on scroll progress)",
+        "calculation": "-distance * progress where distance = max scroll distance needed",
+        "usage": "Filmstrip scrolls horizontally as user scrolls vertically"
+      },
+      "progressBar": {
+        "transform": "scaleX(progress)",
+        "timing": "0.1s linear",
+        "origin": "left",
+        "gradient": "linear-gradient(90deg, var(--burnt), var(--rose))"
+      }
+    },
+    "parallax": {
+      "heroImage": {
+        "factor": 0.12,
+        "calculation": "window.scrollY * 0.12",
+        "usage": "Subtle hero image parallax effect"
+      },
+      "maxParallax": {
+        "limit": "5%",
+        "note": "Parallax limited to 5% translateY for subtlety"
+      }
+    },
+    "keyframes": {
+      "float": {
+        "0%": "transform: translateY(0px)",
+        "50%": "transform: translateY(-6px)",
+        "100%": "transform: translateY(0px)",
+        "usage": "Floating element animation"
+      }
+    }
+  },
+  "components": {
+    "button": {
+      "description": "Interactive button component for primary actions, secondary options, and ghost links",
+      "element": "button",
+      "className": "demo-btn",
+      "structure": {
+        "element": "button.demo-btn",
+        "padding": "1rem 1.6rem",
+        "borderRadius": "12px",
+        "fontSize": "0.85rem",
+        "fontWeight": 500,
+        "textTransform": "uppercase",
+        "letterSpacing": "0.2em",
+        "border": "none",
+        "cursor": "pointer",
+        "transition": "transform 0.2s ease, box-shadow 0.2s ease"
+      },
+      "variations": {
+        "primary": {
+          "className": "demo-btn.primary",
+          "background": "var(--burnt)",
+          "color": "#fff",
+          "boxShadow": "0 10px 22px rgba(186, 75, 47, 0.25)",
+          "usage": "Primary calls-to-action (Begin Commission, Submit Brief)",
+          "hoverState": "scale(1.05) translateY(-1px), shadow: 0 12px 24px"
+        },
+        "secondary": {
+          "className": "demo-btn.secondary",
+          "background": "var(--terracotta)",
+          "color": "#fff",
+          "boxShadow": "0 10px 22px rgba(216, 120, 80, 0.25)",
+          "usage": "Secondary actions (View Portfolio)",
+          "hoverState": "translateY(-1px), shadow: 0 8px 16px"
+        },
+        "ghost": {
+          "className": "demo-btn.ghost",
+          "background": "var(--sand)",
+          "border": "1px solid rgba(31, 27, 23, 0.25)",
+          "color": "var(--ink)",
+          "boxShadow": "none",
+          "usage": "Tertiary actions, secondary links (Ghost Link, Download PDF)",
+          "hoverState": "translateY(-1px)"
+        }
+      },
+      "states": {
+        "default": "Static button state",
+        "hover": "Scale to 105%, shadow bloom, slight elevation",
+        "focus": "outline: 2px solid var(--rose), outline-offset: 3px",
+        "active": "Scale up with enhanced shadow"
+      },
+      "accessibility": {
+        "focusVisible": "outline: 2px solid var(--rose), outline-offset: 3px",
+        "textContrast": "Primary: white on burnt (high contrast)",
+        "minHeight": "44px recommended for touch targets"
+      }
+    },
+    "card": {
+      "description": "Card component for containing grouped content",
+      "variations": {
+        "dataCard": {
+          "element": ".data-card",
+          "background": "linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9))",
+          "borderRadius": "22px",
+          "padding": "1.8rem",
+          "border": "1px solid rgba(122, 139, 139, 0.2)",
+          "boxShadow": "0 20px 35px rgba(31, 27, 23, 0.1)",
+          "usage": "Color language, typography, voice notes, reference sections"
+        },
+        "componentCard": {
+          "element": ".component-card",
+          "borderRadius": "18px",
+          "padding": "1.6rem",
+          "background": "rgba(255, 255, 255, 0.88)",
+          "border": "1px solid rgba(31, 27, 23, 0.08)",
+          "usage": "Smaller component showcases"
+        },
+        "motionExampleCard": {
+          "element": ".motion-example-card-enhanced",
+          "padding": "2rem",
+          "borderRadius": "20px",
+          "background": "linear-gradient(135deg, rgba(255, 247, 236, 0.95), rgba(242, 227, 208, 0.9))",
+          "border": "1px solid rgba(122, 139, 139, 0.25)",
+          "boxShadow": "0 12px 28px rgba(31, 27, 23, 0.1)",
+          "hoverState": "translateY(-2px), shadow: 0 16px 36px",
+          "usage": "Motion and interaction example demonstrations"
+        },
+        "scrollStep": {
+          "element": ".scroll-step",
+          "background": "rgba(255, 255, 255, 0.92)",
+          "borderRadius": "20px",
+          "padding": "1.6rem",
+          "border": "1px solid rgba(31, 27, 23, 0.08)",
+          "boxShadow": "0 18px 28px rgba(31, 27, 23, 0.06)",
+          "usage": "Sequential scroll-based content"
+        },
+        "stickyPanel": {
+          "element": ".sticky-panel",
+          "position": "sticky",
+          "top": "2rem",
+          "background": "rgba(255, 255, 255, 0.95)",
+          "borderRadius": "22px",
+          "padding": "1.8rem",
+          "border": "1px solid rgba(31, 27, 23, 0.12)",
+          "boxShadow": "0 25px 40px rgba(31, 27, 23, 0.08)",
+          "usage": "Sticky sidebars in scroll narratives"
+        }
+      }
+    },
+    "form": {
+      "description": "Form components for user input",
+      "container": {
+        "element": ".form-demo",
+        "borderRadius": "22px",
+        "padding": "2.2rem 2.5rem",
+        "background": "linear-gradient(135deg, rgba(242, 227, 208, 0.98), rgba(255, 247, 236, 0.95))",
+        "border": "1px solid rgba(210, 106, 50, 0.2)",
+        "display": "grid",
+        "gap": "1.5rem",
+        "boxShadow": "0 14px 24px rgba(31, 27, 23, 0.18)",
+        "color": "rgba(31, 27, 23, 0.9)"
+      },
+      "row": {
+        "element": ".form-row",
+        "display": "grid",
+        "gridTemplateColumns": "repeat(auto-fit, minmax(200px, 1fr))",
+        "gap": "1.2rem"
+      },
+      "field": {
+        "element": ".form-field",
+        "display": "flex",
+        "flexDirection": "column"
+      },
+      "label": {
+        "display": "block",
+        "fontSize": "0.75rem",
+        "fontWeight": 600,
+        "letterSpacing": "0.25em",
+        "textTransform": "uppercase",
+        "color": "rgba(31, 27, 23, 0.7)",
+        "marginBottom": "0.5rem"
+      },
+      "input": {
+        "width": "100%",
+        "borderRadius": "12px",
+        "border": "1px solid rgba(210, 106, 50, 0.25)",
+        "padding": "1rem 1.2rem",
+        "fontSize": "0.95rem",
+        "fontWeight": 500,
+        "background": "rgba(255, 255, 255, 0.9)",
+        "color": "rgba(31, 27, 23, 0.9)",
+        "transition": "border 0.2s ease, box-shadow 0.2s ease",
+        "placeholder": "rgba(31, 27, 23, 0.5)"
+      },
+      "inputFocus": {
+        "outline": "none",
+        "borderColor": "var(--terracotta)",
+        "boxShadow": "0 0 0 3px rgba(210, 106, 50, 0.2)",
+        "background": "rgba(255, 255, 255, 0.95)"
+      },
+      "helper": {
+        "fontSize": "0.8rem",
+        "fontWeight": 500,
+        "lineHeight": 1.5,
+        "color": "rgba(31, 27, 23, 0.65)",
+        "usage": "Helper text below form fields"
+      }
+    },
+    "toast": {
+      "description": "Toast notification component for feedback messages",
+      "element": ".toast",
+      "container": {
+        "borderRadius": "14px",
+        "padding": "1.2rem 1.5rem",
+        "display": "flex",
+        "alignItems": "center",
+        "gap": "1.2rem",
+        "color": "#fff",
+        "boxShadow": "0 14px 24px rgba(31, 27, 23, 0.18)"
+      },
+      "variations": {
+        "success": {
+          "className": "toast.success",
+          "background": "var(--sage)",
+          "icon": "✓",
+          "usage": "Deposit received, confirmation messages"
+        },
+        "alert": {
+          "className": "toast.alert",
+          "background": "var(--rose)",
+          "icon": "!",
+          "usage": "Waitlist updates, alerts, warnings"
+        }
+      },
+      "icon": {
+        "element": ".toast-icon",
+        "width": "32px",
+        "height": "32px",
+        "borderRadius": "8px",
+        "background": "rgba(255, 255, 255, 0.25)",
+        "display": "grid",
+        "placeItems": "center",
+        "fontWeight": 600
+      }
+    },
+    "calendar": {
+      "description": "Calendar component for booking/scheduling display",
+      "container": {
+        "element": ".calendar-demo",
+        "borderRadius": "20px",
+        "padding": "1.8rem 2rem",
+        "background": "linear-gradient(135deg, rgba(242, 227, 208, 0.98), rgba(255, 247, 236, 0.95))",
+        "border": "1px solid rgba(210, 106, 50, 0.2)",
+        "width": "100%",
+        "boxShadow": "0 14px 24px rgba(31, 27, 23, 0.18)",
+        "color": "rgba(31, 27, 23, 0.9)"
+      },
+      "grid": {
+        "element": ".calendar-grid",
+        "display": "grid",
+        "gridTemplateColumns": "repeat(7, minmax(0, 1fr))",
+        "gap": "0.4rem",
+        "marginTop": "1.2rem"
+      },
+      "day": {
+        "element": ".calendar-day",
+        "aspectRatio": "1 / 1",
+        "borderRadius": "8px",
+        "background": "rgba(255, 255, 255, 0.8)",
+        "border": "1px solid rgba(210, 106, 50, 0.2)",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "fontSize": "0.75rem",
+        "fontWeight": 500,
+        "color": "rgba(31, 27, 23, 0.8)"
+      },
+      "dayBooked": {
+        "className": "calendar-day.is-booked",
+        "background": "var(--terracotta)",
+        "border": "none",
+        "color": "#fff",
+        "boxShadow": "0 10px 18px rgba(216, 120, 80, 0.3)"
+      },
+      "dayMuted": {
+        "className": "calendar-day.is-muted",
+        "opacity": 0.4,
+        "usage": "Past or unavailable dates"
+      },
+      "legend": {
+        "booked": "Terracotta background with white text",
+        "open": "White background with border",
+        "past": "White background with border and reduced opacity"
+      }
+    },
+    "swatch": {
+      "description": "Color swatch component for displaying color palette",
+      "element": ".swatch",
+      "borderRadius": "24px",
+      "padding": "1.6rem",
+      "color": "#fff",
+      "minHeight": "220px",
+      "display": "flex",
+      "flexDirection": "column",
+      "justifyContent": "space-between",
+      "fontWeight": 600,
+      "letterSpacing": "0.05em",
+      "structure": {
+        "strong": {
+          "fontSize": "1.2rem",
+          "usage": "Hex color value"
+        },
+        "span": {
+          "fontSize": "0.9rem",
+          "opacity": 0.9,
+          "usage": "Color name"
+        },
+        "small": {
+          "fontSize": "0.75rem",
+          "letterSpacing": "0.15em",
+          "textTransform": "uppercase",
+          "opacity": 0.85,
+          "usage": "Usage description"
+        }
+      },
+      "hoverState": {
+        "transform": "scale(1.1)",
+        "timing": "0.2s ease"
+      }
+    },
+    "filmstrip": {
+      "description": "Horizontal scrollable gallery component with scroll-driven animation",
+      "container": {
+        "element": ".filmstrip-wrapper",
+        "marginTop": "1.5rem",
+        "position": "sticky",
+        "top": 0,
+        "height": "100vh",
+        "display": "flex",
+        "alignItems": "center",
+        "overflow": "hidden",
+        "width": "100vw"
+      },
+      "track": {
+        "element": ".filmstrip",
+        "display": "flex",
+        "gap": "clamp(0.4rem, 0.6vw, 0.8rem)",
+        "willChange": "transform",
+        "padding": "0 clamp(0.5rem, 2vw, 1.5rem)",
+        "animation": "Scroll-driven translateX animation"
+      },
+      "item": {
+        "element": ".filmstrip-item",
+        "borderRadius": "32px",
+        "minWidth": "clamp(420px, 55vw, 820px)",
+        "minHeight": "clamp(420px, 80vh, 780px)",
+        "backgroundSize": "cover",
+        "backgroundPosition": "center",
+        "boxShadow": "0 40px 70px rgba(31, 27, 23, 0.25)",
+        "overflow": "hidden",
+        "label": "data-label attribute displayed in uppercase metadata"
+      },
+      "progressBar": {
+        "element": ".filmstrip-progress-bar",
+        "height": "2px",
+        "background": "linear-gradient(90deg, var(--burnt), var(--rose))",
+        "animation": "Driven by scroll progress"
+      }
+    },
+    "layout": {
+      "heroOverlay": {
+        "element": ".hero-overlay",
+        "width": "min(600px, 100%)",
+        "maxWidth": "620px",
+        "padding": "clamp(2rem, 4vw, 3.5rem)",
+        "background": "rgba(242, 227, 208, 0.95)",
+        "borderRadius": "24px",
+        "border": "1px solid rgba(36, 27, 22, 0.15)",
+        "boxShadow": "0 20px 40px rgba(36, 27, 22, 0.2)",
+        "backdropFilter": "blur(12px) saturate(110%)",
+        "textAlign": "center",
+        "usage": "Main hero section content container"
+      },
+      "layoutExample": {
+        "element": ".layout-example",
+        "borderRadius": "28px",
+        "overflow": "hidden",
+        "boxShadow": "0 20px 40px rgba(31, 27, 23, 0.12), 0 0 0 1px rgba(122, 139, 139, 0.1)",
+        "background": "rgba(255, 247, 236, 0.6)",
+        "transition": "transform 0.3s ease, box-shadow 0.3s ease",
+        "hoverState": "translateY(-6px), enhanced shadow",
+        "figcaption": {
+          "padding": "1.8rem 2rem",
+          "background": "linear-gradient(180deg, rgba(255, 247, 236, 0.98), rgba(242, 227, 208, 0.95))",
+          "fontSize": "0.95rem",
+          "borderTop": "1px solid rgba(122, 139, 139, 0.2)"
+        }
+      },
+      "identityPanel": {
+        "element": ".identity-panel",
+        "borderRadius": "24px",
+        "padding": "1.6rem 2rem",
+        "background": "linear-gradient(120deg, rgba(186, 75, 47, 0.18), rgba(90, 102, 95, 0.25))",
+        "border": "1px solid rgba(31, 27, 23, 0.08)",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.5rem",
+        "flexWrap": "wrap"
+      },
+      "macroPanel": {
+        "element": ".macro-panel",
+        "marginTop": "1.5rem",
+        "borderRadius": "24px",
+        "backgroundImage": "linear-gradient(120deg, rgba(31, 27, 23, 0.4), rgba(255, 255, 255, 0)), url('./public/images/UP1_00012_.png')",
+        "backgroundSize": "cover",
+        "backgroundPosition": "center",
+        "minHeight": "240px",
+        "padding": "1.8rem",
+        "color": "#fff",
+        "boxShadow": "0 35px 55px rgba(31, 27, 23, 0.18)",
+        "position": "relative",
+        "overflow": "hidden",
+        "label": "Content label via ::after pseudo-element"
+      }
+    }
+  },
+  "patterns": {
+    "interactionPrinciples": {
+      "baseline": [
+        "Fade/slide reveals on scroll, 200-300ms, ease-out timing",
+        "Buttons scale to 105% with shadow bloom; no bounce easing",
+        "Link underlines draw from left to right like a painted stroke"
+      ],
+      "accentMoments": [
+        "Parallax on hero imagery (limited to 5% translateY)",
+        "Staggered card entrances of 50ms to mimic gallery walk-through",
+        "Interactive swatches that tint background panels subtly on hover"
+      ]
+    },
+    "scrollDrivenAnimation": {
+      "description": "Filmstrip scrolls horizontally as user scrolls vertically",
+      "implementation": "JavaScript tracks scroll progress and transforms filmstrip translateX",
+      "progressBar": "Scales horizontally (scaleX) matching scroll progress"
+    },
+    "stickyLayout": {
+      "description": "Sticky left sidebar paired with scrolling right content",
+      "rules": [
+        "Panel height <= 70vh with generous padding",
+        "Use position: sticky with top: 2rem",
+        "Mobile stacks vertically; sticky disengages below 720px"
+      ]
+    },
+    "responsiveGallery": {
+      "description": "Gallery pacing: alternate full-width blocks with modular cards",
+      "principles": [
+        "Spacious, staggered, editorial rhythm",
+        "Horizontal galleries with framed imagery",
+        "Salon-hang staggered rows"
+      ]
+    },
+    "textureAndBackground": {
+      "description": "Layered background effects mimicking sun-washed plaster",
+      "layers": [
+        "Base gradient: #7A8B8B to #F2E3D0",
+        "Overlay gradient with multiple radial gradients for depth",
+        "SVG grid texture with low opacity (0.25)",
+        "Multiply blend mode for texture integration"
+      ]
+    },
+    "mobileStickyOffset": {
+      "variable": "--sticky-offset",
+      "value": "clamp(3.5rem, 8vw, 6rem)",
+      "usage": "Dynamic sticky positioning that responds to viewport"
+    }
+  },
+  "tonAndMessaging": {
+    "voice": [
+      "ARTISTIC - Creative, gallery-influenced language",
+      "BOLD - Confident statements about craft and process",
+      "SOPHISTICATED - Elevated tone for luxury positioning",
+      "ENERGETIC - Dynamic language paired with motion",
+      "AUTHENTIC - Transparent about process and collaboration",
+      "PROFESSIONAL - Polished, gallery-quality standards"
+    ],
+    "principles": [
+      "Use sensory analogies ('sun-baked walls', 'charcoal whisper') to anchor visuals",
+      "Keep call-to-actions confident but calm ('Begin Commission', 'Visit the Studio')",
+      "Highlight collaboration and process transparency in every section",
+      "Speak to seasoned collectors, not trend chasers",
+      "Balance poetic descriptions with precise process language"
+    ],
+    "callToActions": {
+      "primary": [
+        "Begin Commission",
+        "Submit Brief",
+        "Request Consultation"
+      ],
+      "secondary": [
+        "View Portfolio",
+        "Visit the Studio",
+        "Explore Process"
+      ]
+    }
+  },
+  "designPrinciples": {
+    "visualLanguage": {
+      "palette": "Burnt oranges, sage concrete, charcoal blacks, and off-whites that feel powdery and matte",
+      "materiality": "Sun-washed plaster walls catching diagonal slant light",
+      "photography": "Macro crops of plaster textures, charcoal studies, architectural details"
+    },
+    "typography": {
+      "principle": "Type as carved etchings on plaster - precise, deliberate, never shouting",
+      "headlines": "Museum placards feel: sculptural serif (Playfair Display)",
+      "body": "Quiet grotesk (Space Grotesk) with generous tracking",
+      "metadata": "Whisper-thin uppercase with letter spacing"
+    },
+    "spacing": {
+      "rhythm": "Gallery pacing - spacious, staggered, editorial",
+      "breathing": "Generous whitespace that feels intentional",
+      "alignment": "Salon-hang staggered rows for imagery"
+    },
+    "motion": {
+      "philosophy": "Every movement should feel deliberate, like brush strokes",
+      "timing": "200-300ms fade/slide reveals with ease-out",
+      "subtlety": "Parallax <= 5%, staggered entrances 50ms apart",
+      "naturalness": "No bounce easing, smooth accelerations only"
+    },
+    "interaction": {
+      "tactile": "Micro-interactions that feel physical and responsive",
+      "feedback": "Clear visual feedback for all user actions",
+      "confidence": "Actions feel intentional and reversible"
+    }
+  },
+  "accessibility": {
+    "colorContrast": {
+      "primary": "Burnt orange/white meets WCAG AA standards",
+      "text": "Charcoal ink (#241b16) on sand/cream backgrounds",
+      "focus": "Rose outline (2px) with 3px offset"
+    },
+    "focusStates": {
+      "button": "outline: 2px solid var(--rose), outline-offset: 3px",
+      "link": "Rose underline with 300ms draw timing"
+    },
+    "minTouchTarget": "44px recommended for interactive elements",
+    "semanticHtml": "Proper heading hierarchy (h1-h4), form labels associated with inputs",
+    "mobileAccessibility": "Touch-friendly spacing, readable font sizes (min 16px), stacked layouts below 720px"
+  },
+  "implementation": {
+    "cssVariables": {
+      "--sand": "#f2e3d0",
+      "--terracotta": "#d26a32",
+      "--burnt": "#b0471e",
+      "--rose": "#e59863",
+      "--deep-olive": "#4a4034",
+      "--sage": "#a28f79",
+      "--ink": "#241b16",
+      "--moss": "#6f5c49",
+      "--cream": "#fff7ec",
+      "--charcoal": "#1c1915",
+      "--ambient-color": "rgba(178, 109, 70, 0.4)",
+      "--sticky-offset": "clamp(3.5rem, 8vw, 6rem)"
+    },
+    "fontImports": "Google Fonts (Playfair Display, Space Grotesk)",
+    "responsiveApproach": "Mobile-first with clamp() for fluid typography and spacing",
+    "animationTriggers": "Intersection Observer API with 0.18 threshold for reveal animations",
+    "scrollBehavior": "RequestAnimationFrame for smooth filmstrip and parallax animations"
+  }
+}
diff --git a/design-language/index.html b/design-language/index.html
new file mode 100644
index 000000000..bb421a8a9
--- /dev/null
+++ b/design-language/index.html
@@ -0,0 +1,1713 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>United Tattoo — Style Brief</title>
+    <meta name="description"
+        content="A living style brief for United Tattoo: targets, palette, typography, layout, and interaction rules expressed in a single immersive page.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Playfair+Display:wght@400;600&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --sand: #f2e3d0;
+            --terracotta: #d26a32;
+            --burnt: #b0471e;
+            --rose: #e59863;
+            --deep-olive: #4a4034;
+            --sage: #a28f79;
+            --ink: #241b16;
+            --moss: #6f5c49;
+            --cream: #fff7ec;
+            --charcoal: #1c1915;
+            --ambient-color: rgba(178, 109, 70, 0.4);
+            --sticky-offset: clamp(3.5rem, 8vw, 6rem);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            color: var(--ink);
+            background: linear-gradient(180deg, #7A8B8B 0%, #9CAAA6 45%, #F2E3D0 100%);
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        body::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+            background: linear-gradient(160deg, rgba(122, 139, 139, 0.85), rgba(242, 227, 208, 0.5)),
+                radial-gradient(circle at 15% 20%, rgba(210, 106, 50, 0.18), transparent 45%),
+                radial-gradient(circle at 85% 5%, rgba(36, 27, 22, 0.1), transparent 55%);
+            opacity: 0.6;
+            z-index: -2;
+        }
+
+        body::after {
+            content: "";
+            position: fixed;
+            inset: 0;
+            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200" fill="none" stroke="rgba(0,0,0,0.05)" stroke-width="0.2"><path d="M0 0h200v200H0z"/><path d="M-10 20h220"/><path d="M-10 60h220"/><path d="M-10 100h220"/><path d="M-10 140h220"/><path d="M-10 180h220"/><path d="M20 -10v220"/><path d="M60 -10v220"/><path d="M100 -10v220"/><path d="M140 -10v220"/><path d="M180 -10v220"/></svg>');
+            mix-blend-mode: multiply;
+            opacity: 0.25;
+            z-index: -1;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .site-shell {
+            position: relative;
+            width: 100%;
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 0 clamp(1.5rem, 4vw, 5rem) 4rem;
+        }
+
+        header.hero {
+            position: relative;
+            min-height: 65vh;
+            padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 6vw, 6rem);
+            background-image: url('./public/images/UP1_00010_.png');
+            background-size: cover;
+            background-position: center top;
+            background-repeat: no-repeat;
+            margin-left: calc(50% - 50vw);
+            margin-top: 0;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            isolation: isolate;
+            -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+            mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+        }
+
+        header.hero::before,
+        header.hero::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+        }
+
+        header.hero::before {
+            background: linear-gradient(135deg, rgba(122, 139, 139, 0.75), rgba(242, 227, 208, 0.65));
+            z-index: 0;
+        }
+
+        header.hero::after {
+            background: linear-gradient(180deg, rgba(122, 139, 139, 0) 0%, rgba(122, 139, 139, 0.5) 50%, rgba(122, 139, 139, 0.85) 80%, #7A8B8B 100%);
+            z-index: 0;
+        }
+
+        header.hero>* {
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero-overlay {
+            position: relative;
+            width: min(600px, 100%);
+            max-width: 620px;
+            padding: clamp(2rem, 4vw, 3.5rem);
+            background: rgba(242, 227, 208, 0.95);
+            border-radius: 24px;
+            border: 1px solid rgba(36, 27, 22, 0.15);
+            box-shadow: 0 20px 40px rgba(36, 27, 22, 0.2);
+            backdrop-filter: blur(12px) saturate(110%);
+            text-align: center;
+        }
+
+
+        .eyebrow {
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            letter-spacing: 0.3em;
+            color: var(--moss);
+            font-weight: 600;
+            margin-bottom: 0.8rem;
+        }
+
+        h1 {
+            font-family: 'Playfair Display', 'Times New Roman', serif;
+            font-size: clamp(2.5rem, 5vw, 3.8rem);
+            line-height: 1.1;
+            margin: 0 0 1.2rem 0;
+        }
+
+
+        .reveal {
+            opacity: 0;
+            transform: translateY(60px);
+            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+        }
+
+        .reveal.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .type-card {
+            opacity: 0;
+            transform: perspective(900px) rotateX(10deg) translateY(60px);
+            transition: opacity 0.8s ease, transform 0.8s ease;
+        }
+
+        .type-card.is-visible {
+            opacity: 1;
+            transform: perspective(900px) rotateX(0deg) translateY(0);
+        }
+
+        .section-divider {
+            width: 100%;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(31, 27, 23, 0.2), transparent);
+            margin: 4rem 0 2rem;
+            opacity: 0;
+            transform: scaleX(0);
+            transition: opacity 0.6s ease-out, transform 0.8s ease-out;
+        }
+
+        .section-divider.is-visible {
+            opacity: 1;
+            transform: scaleX(1);
+        }
+
+        .section-transition {
+            opacity: 0;
+            transform: translateY(80px);
+            transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
+        }
+
+        .section-transition.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .section {
+            margin-top: 3.5rem;
+        }
+
+        .section-label {
+            text-transform: uppercase;
+            letter-spacing: 0.3em;
+            font-size: 0.85rem;
+            color: var(--moss);
+            margin-bottom: 0.5rem;
+        }
+
+        .section h2 {
+            font-family: 'Playfair Display', 'Times New Roman', serif;
+            font-size: clamp(1.9rem, 4vw, 3rem);
+            margin: 0 0 1rem 0;
+        }
+
+        .lead {
+            color: rgba(31, 27, 23, 0.75);
+            max-width: 54ch;
+            line-height: 1.65;
+            margin: 0;
+        }
+        
+        .hero-overlay .lead {
+            font-size: clamp(0.95rem, 2vw, 1.1rem);
+        }
+
+        .grid-two {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 1.8rem;
+        }
+
+        .sticky-split {
+            display: grid;
+            grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr);
+            gap: clamp(1.5rem, 4vw, 4rem);
+        }
+
+        .identity-full-bleed {
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: clamp(2.5rem, 6vw, 5rem) 0;
+            background: linear-gradient(90deg, rgba(122, 139, 139, 0.35), rgba(242, 227, 208, 0.4));
+        }
+
+        .identity-track {
+            width: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 0 clamp(1.5rem, 4vw, 5rem);
+            display: flex;
+            flex-direction: column;
+            gap: clamp(2rem, 5vw, 5rem);
+        }
+
+        .sticky-column {
+            position: sticky;
+            top: 5rem;
+            align-self: start;
+        }
+
+        .data-card {
+            background: linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9));
+            border-radius: 22px;
+            padding: 1.8rem;
+            border: 1px solid rgba(122, 139, 139, 0.2);
+            box-shadow: 0 20px 35px rgba(31, 27, 23, 0.1);
+        }
+
+        .data-card h3 {
+            margin-top: 0;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            font-size: 0.95rem;
+            color: var(--moss);
+        }
+
+        .stack {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .list {
+            padding-left: 1.1rem;
+            margin: 0.5rem 0 0 0;
+            color: rgba(31, 27, 23, 0.75);
+        }
+
+        .swatches {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        .swatch {
+            border-radius: 24px;
+            padding: 1.6rem;
+            color: #fff;
+            min-height: 220px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            font-weight: 600;
+            letter-spacing: 0.05em;
+        }
+
+        .swatch strong {
+            font-size: 1.2rem;
+        }
+
+        .swatch span {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        .swatch small {
+            font-size: 0.75rem;
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            opacity: 0.85;
+        }
+
+        .type-stack {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .type-sample {
+            padding: 1.2rem 1.5rem;
+            border-radius: 18px;
+            border: 1px dashed rgba(122, 139, 139, 0.3);
+            background: rgba(255, 247, 236, 0.8);
+        }
+
+        .type-sample strong {
+            display: block;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            font-size: 0.8rem;
+            color: var(--moss);
+        }
+
+        .components-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.8rem;
+        }
+
+        .layout-full-bleed {
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: clamp(3rem, 6vw, 6rem) 0;
+            background: linear-gradient(90deg, rgba(242, 227, 208, 0.4), rgba(255, 247, 236, 0.5), rgba(122, 139, 139, 0.25));
+        }
+
+        .layout-track {
+            width: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 0 clamp(2rem, 5vw, 6rem);
+        }
+
+        .layout-examples {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: clamp(2rem, 4vw, 4rem);
+            margin-top: 2.5rem;
+        }
+
+        .layout-example {
+            position: relative;
+            border-radius: 28px;
+            overflow: hidden;
+            box-shadow: 0 20px 40px rgba(31, 27, 23, 0.12), 0 0 0 1px rgba(122, 139, 139, 0.1);
+            background: rgba(255, 247, 236, 0.6);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            opacity: 0;
+            transform: translateY(40px);
+        }
+
+        .stagger-layout-card {
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+        }
+
+        .stagger-layout-card-1 {
+            transition-delay: 0s;
+        }
+
+        .stagger-layout-card-2 {
+            transition-delay: 0.15s;
+        }
+
+        .stagger-layout-card-3 {
+            transition-delay: 0.3s;
+        }
+
+        .stagger-layout-card.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .layout-example:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 32px 60px rgba(31, 27, 23, 0.2), 0 0 0 1px rgba(122, 139, 139, 0.2);
+        }
+
+        .layout-example img {
+            width: 100%;
+            height: auto;
+            display: block;
+            transition: transform 0.3s ease;
+        }
+
+        .layout-example:hover img {
+            transform: scale(1.03);
+        }
+
+        .layout-example figcaption {
+            padding: 1.8rem 2rem;
+            background: linear-gradient(180deg, rgba(255, 247, 236, 0.98), rgba(242, 227, 208, 0.95));
+            font-size: 0.95rem;
+            letter-spacing: 0.05em;
+            line-height: 1.7;
+            color: rgba(31, 27, 23, 0.9);
+            border-top: 1px solid rgba(122, 139, 139, 0.2);
+        }
+
+        .component-demo {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2rem;
+            margin-top: 2.5rem;
+            text-align: left;
+        }
+
+        #interface-swap {
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: clamp(4rem, 7vw, 8rem) 0;
+        }
+
+        .swap-header-text {
+            padding: 0 clamp(1.5rem, 4vw, 5rem) clamp(2rem, 4vw, 3rem);
+            text-align: center;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .swap-header-text .section-label {
+            font-size: 0.95rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            letter-spacing: 0.05em;
+        }
+
+        .swap-heading-container h2 {
+            font-family: 'Playfair Display', 'Times New Roman', serif;
+            font-size: clamp(2.4rem, 5.5vw, 4rem);
+            line-height: 1.15;
+            margin: 0.5rem 0 1rem;
+            color: var(--ink);
+        }
+
+        .swap-content-track {
+            display: grid;
+            grid-template-columns: minmax(400px, 1fr) minmax(380px, 0.95fr);
+            gap: clamp(3rem, 5vw, 6rem);
+            padding: 0 clamp(1.5rem, 4vw, 5rem);
+            width: 100%;
+            align-items: start;
+        }
+
+        .swap-content {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+
+        .swap-content#interface-controls {
+            text-align: center;
+        }
+
+        .swap-content#booking-examples {
+            text-align: left;
+        }
+
+        .split-demo {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2rem;
+            align-items: flex-start;
+            margin-top: 2rem;
+            text-align: left;
+        }
+
+        .button-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .demo-btn {
+            border: none;
+            border-radius: 12px;
+            padding: 1rem 1.6rem;
+            font-size: 0.85rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .demo-btn:focus-visible {
+            outline: 2px solid var(--rose);
+            outline-offset: 3px;
+        }
+
+        .demo-btn.primary {
+            background: var(--burnt);
+            color: #fff;
+            box-shadow: 0 10px 22px rgba(186, 75, 47, 0.25);
+        }
+
+        .demo-btn.secondary {
+            background: var(--terracotta);
+            color: #fff;
+            box-shadow: 0 10px 22px rgba(216, 120, 80, 0.25);
+        }
+
+        .demo-btn.ghost {
+            background: var(--sand);
+            border: 1px solid rgba(31, 27, 23, 0.25);
+            color: var(--ink);
+        }
+
+        .demo-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 8px 16px rgba(186, 75, 47, 0.2);
+        }
+
+        .motion-example-card .demo-btn:hover {
+            transform: scale(1.05) translateY(-1px);
+            box-shadow: 0 12px 24px rgba(186, 75, 47, 0.3);
+        }
+
+        .motion-link {
+            position: relative;
+        }
+
+        .motion-link::after {
+            content: "";
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: var(--burnt);
+            transition: width 0.3s ease-out;
+        }
+
+        .motion-link:hover::after {
+            width: 100%;
+        }
+
+        .stagger-card {
+            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+            transition-delay: 0s;
+        }
+
+        .stagger-card-2 {
+            transition-delay: 0.05s;
+        }
+
+        .stagger-card-3 {
+            transition-delay: 0.1s;
+        }
+
+        .stagger-card.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .hover-swatch:hover {
+            transform: scale(1.1);
+        }
+
+        .motion-example-card {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .interaction-full-bleed {
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: clamp(3rem, 6vw, 6rem) 0;
+            background: linear-gradient(90deg, rgba(122, 139, 139, 0.25), rgba(255, 247, 236, 0.5), rgba(242, 227, 208, 0.4));
+        }
+
+        .interaction-track {
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 clamp(1.5rem, 4vw, 5rem);
+        }
+
+        .interaction-split {
+            display: grid;
+            grid-template-columns: minmax(300px, 0.85fr) minmax(400px, 1fr);
+            gap: clamp(2rem, 5vw, 4rem);
+            margin-top: 3rem;
+            align-items: flex-start;
+        }
+
+        .interaction-column {
+            position: sticky;
+            top: 5rem;
+            align-self: start;
+        }
+
+        .interaction-principles {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .motion-examples-enhanced {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .motion-example-card-enhanced {
+            padding: 2rem;
+            border-radius: 20px;
+            background: linear-gradient(135deg, rgba(255, 247, 236, 0.95), rgba(242, 227, 208, 0.9));
+            border: 1px solid rgba(122, 139, 139, 0.25);
+            box-shadow: 0 12px 28px rgba(31, 27, 23, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .motion-example-card-enhanced:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 16px 36px rgba(31, 27, 23, 0.15);
+        }
+
+        #interaction .data-card {
+            background: linear-gradient(135deg, rgba(242, 227, 208, 0.95), rgba(255, 247, 236, 0.9));
+            border: 1px solid rgba(122, 139, 139, 0.2);
+            box-shadow: 0 20px 35px rgba(31, 27, 23, 0.1);
+        }
+
+        #interaction .motion-example-card {
+            background: rgba(255, 247, 236, 0.8);
+            border-color: rgba(122, 139, 139, 0.3);
+        }
+
+        .form-demo {
+            border-radius: 22px;
+            padding: 2.2rem 2.5rem;
+            background: linear-gradient(135deg, rgba(242, 227, 208, 0.98), rgba(255, 247, 236, 0.95));
+            border: 1px solid rgba(210, 106, 50, 0.2);
+            display: grid;
+            gap: 1.5rem;
+            box-shadow: 0 14px 24px rgba(31, 27, 23, 0.18);
+            color: rgba(31, 27, 23, 0.9);
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.2rem;
+        }
+
+        .form-field label {
+            display: block;
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 0.75rem;
+            font-weight: 600;
+            letter-spacing: 0.25em;
+            text-transform: uppercase;
+            color: rgba(31, 27, 23, 0.7);
+            margin-bottom: 0.5rem;
+        }
+
+        .form-field input,
+        .form-field textarea {
+            width: 100%;
+            border-radius: 12px;
+            border: 1px solid rgba(210, 106, 50, 0.25);
+            padding: 1rem 1.2rem;
+            font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-size: 0.95rem;
+            font-weight: 500;
+            background: rgba(255, 255, 255, 0.9);
+            color: rgba(31, 27, 23, 0.9);
+            transition: border 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .form-field input::placeholder,
+        .form-field textarea::placeholder {
+            color: rgba(31, 27, 23, 0.5);
+        }
+
+        .form-field input:focus,
+        .form-field textarea:focus {
+            outline: none;
+            border-color: var(--terracotta);
+            box-shadow: 0 0 0 3px rgba(210, 106, 50, 0.2);
+            background: rgba(255, 255, 255, 0.95);
+        }
+
+        .form-helper {
+            font-size: 0.8rem;
+            font-weight: 500;
+            line-height: 1.5;
+            color: rgba(31, 27, 23, 0.65);
+        }
+
+        .toast-stack {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .toast {
+            border-radius: 14px;
+            padding: 1.2rem 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 1.2rem;
+            color: #fff;
+            box-shadow: 0 14px 24px rgba(31, 27, 23, 0.18);
+        }
+
+        .toast.success {
+            background: var(--sage);
+        }
+
+        .toast.alert {
+            background: var(--rose);
+        }
+
+        .toast-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.25);
+            display: grid;
+            place-items: center;
+            font-weight: 600;
+        }
+
+        .calendar-demo {
+            border-radius: 20px;
+            padding: 1.8rem 2rem;
+            background: linear-gradient(135deg, rgba(242, 227, 208, 0.98), rgba(255, 247, 236, 0.95));
+            border: 1px solid rgba(210, 106, 50, 0.2);
+            width: 100%;
+            box-shadow: 0 14px 24px rgba(31, 27, 23, 0.18);
+            color: rgba(31, 27, 23, 0.9);
+        }
+
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, minmax(0, 1fr));
+            gap: 0.4rem;
+            margin-top: 1.2rem;
+        }
+
+        .calendar-day {
+            aspect-ratio: 1 / 1;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.8);
+            border: 1px solid rgba(210, 106, 50, 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: rgba(31, 27, 23, 0.8);
+            min-height: 0;
+        }
+
+        .calendar-day.is-booked {
+            background: var(--terracotta);
+            border: none;
+            color: #fff;
+            box-shadow: 0 10px 18px rgba(216, 120, 80, 0.3);
+        }
+
+        .calendar-day.is-muted {
+            opacity: 0.4;
+        }
+
+        .component-card {
+            border-radius: 18px;
+            padding: 1.6rem;
+            background: rgba(255, 255, 255, 0.88);
+            border: 1px solid rgba(31, 27, 23, 0.08);
+        }
+
+        .component-card h4 {
+            margin: 0 0 0.8rem 0;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            font-size: 0.85rem;
+            color: var(--moss);
+        }
+
+        .identity-panel {
+            border-radius: 24px;
+            padding: 1.6rem 2rem;
+            background: linear-gradient(120deg, rgba(186, 75, 47, 0.18), rgba(90, 102, 95, 0.25));
+            border: 1px solid rgba(31, 27, 23, 0.08);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+        }
+
+        .identity-panel strong {
+            font-family: 'Playfair Display', serif;
+            font-size: 2.2rem;
+        }
+
+        .identity-panel small {
+            text-transform: uppercase;
+            letter-spacing: 0.25em;
+            font-size: 0.7rem;
+            display: block;
+        }
+
+        .macro-panel {
+            margin-top: 1.5rem;
+            border-radius: 24px;
+            background-image: linear-gradient(120deg, rgba(31, 27, 23, 0.4), rgba(255, 255, 255, 0)), url('./public/images/UP1_00012_.png');
+            background-size: cover;
+            background-position: center;
+            min-height: 240px;
+            padding: 1.8rem;
+            color: #fff;
+            box-shadow: 0 35px 55px rgba(31, 27, 23, 0.18);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .macro-panel::after {
+            content: \"Brush study · 02\";
+            position: absolute;
+            bottom: 1.2rem;
+            right: 1.5rem;
+            letter-spacing: 0.35em;
+            font-size: 0.68rem;
+            text-transform: uppercase;
+            opacity: 0.75;
+        }
+
+        .horizontal-scroll {
+            position: relative;
+        }
+
+        .filmstrip-text {
+            margin-bottom: 0.5rem;
+            padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem);
+        }
+
+        .filmstrip-text .section-label {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: 0 clamp(1.5rem, 4vw, 3rem);
+        }
+
+        .filmstrip-text h2 {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+            color: var(--ink);
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: 0 clamp(1.5rem, 4vw, 3rem);
+        }
+
+        .filmstrip-text .lead {
+            font-size: clamp(1.1rem, 2vw, 1.3rem);
+            line-height: 1.6;
+            color: rgba(31, 27, 23, 0.8);
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+            margin-right: calc(50% - 50vw);
+            padding: 0 clamp(1.5rem, 4vw, 3rem);
+        }
+
+        .filmstrip-wrapper {
+            margin-top: 1.5rem;
+            position: sticky;
+            top: 0;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+        }
+
+        .filmstrip {
+            display: flex;
+            gap: clamp(0.4rem, 0.6vw, 0.8rem);
+            will-change: transform;
+            padding: 0 clamp(0.5rem, 2vw, 1.5rem);
+        }
+
+        .filmstrip-item {
+            border-radius: 32px;
+            min-width: clamp(420px, 55vw, 820px);
+            min-height: clamp(420px, 80vh, 780px);
+            background-size: cover;
+            background-position: center;
+            position: relative;
+            box-shadow: 0 40px 70px rgba(31, 27, 23, 0.25);
+            overflow: hidden;
+        }
+
+        .filmstrip-item::after {
+            content: attr(data-label);
+            position: absolute;
+            left: 1.5rem;
+            bottom: 1.2rem;
+            text-transform: uppercase;
+            letter-spacing: 0.3em;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        .filmstrip-progress {
+            position: relative;
+            height: 2px;
+            background: rgba(31, 27, 23, 0.15);
+            border-radius: 999px;
+            overflow: hidden;
+            margin-top: 1rem;
+            width: 100vw;
+            margin-left: calc(50% - 50vw);
+        }
+
+        .filmstrip-progress-bar {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, var(--burnt), var(--rose));
+            transform-origin: left;
+            transform: scaleX(0);
+            transition: transform 0.1s linear;
+        }
+
+        .wide-callout {
+            margin-top: 2rem;
+            padding: 1.8rem 2.2rem;
+            border-left: 4px solid var(--burnt);
+            background: rgba(255, 255, 255, 0.85);
+            border-radius: 18px;
+            font-size: 1.05rem;
+            line-height: 1.5;
+        }
+
+        .sticky-grid {
+            display: grid;
+            grid-template-columns: minmax(230px, 320px) minmax(280px, 1fr);
+            gap: 2rem;
+            align-items: flex-start;
+        }
+
+        .sticky-panel {
+            position: sticky;
+            top: 2rem;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 22px;
+            padding: 1.8rem;
+            border: 1px solid rgba(31, 27, 23, 0.12);
+            box-shadow: 0 25px 40px rgba(31, 27, 23, 0.08);
+        }
+
+        .scroll-steps {
+            display: grid;
+            gap: 1.2rem;
+        }
+
+        .scroll-step {
+            background: rgba(255, 255, 255, 0.92);
+            border-radius: 20px;
+            padding: 1.6rem;
+            border: 1px solid rgba(31, 27, 23, 0.08);
+            box-shadow: 0 18px 28px rgba(31, 27, 23, 0.06);
+        }
+
+        .scroll-step strong {
+            display: block;
+            text-transform: uppercase;
+            letter-spacing: 0.25em;
+            font-size: 0.78rem;
+            color: var(--moss);
+            margin-bottom: 0.4rem;
+        }
+
+        .tone-chips {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.8rem;
+            margin: 1.5rem 0;
+        }
+
+        .tone-chips span {
+            padding: 0.6rem 1.2rem;
+            border-radius: 999px;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            font-size: 0.7rem;
+            color: #fff;
+        }
+
+        .ref-list {
+            list-style: none;
+            padding: 0;
+            margin: 1rem 0 0 0;
+        }
+
+        .ref-list li {
+            margin-bottom: 0.9rem;
+            padding-bottom: 0.9rem;
+            border-bottom: 1px solid rgba(31, 27, 23, 0.08);
+        }
+
+        footer {
+            margin-top: 4rem;
+            padding: 2.5rem 0 1.5rem;
+            text-align: center;
+            font-size: 0.85rem;
+            letter-spacing: 0.2em;
+            color: rgba(31, 27, 23, 0.55);
+        }
+
+        @keyframes float {
+            0% {
+                transform: translateY(0px);
+            }
+
+            50% {
+                transform: translateY(-6px);
+            }
+
+            100% {
+                transform: translateY(0px);
+            }
+        }
+
+        @media (max-width: 720px) {
+            header.hero {
+                min-height: 50vh;
+                padding: 2rem 1.5rem;
+            }
+
+            .hero-overlay {
+                width: 100%;
+                border-radius: 20px;
+                padding: 1.8rem 1.5rem;
+            }
+
+            .sticky-split {
+                grid-template-columns: 1fr;
+            }
+
+            .sticky-column {
+                position: static;
+                padding-right: 0;
+                margin-bottom: 1.5rem;
+            }
+
+            .data-card,
+            .component-card {
+                padding: 1.4rem;
+            }
+
+            .sticky-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .sticky-panel {
+                position: static;
+            }
+
+            .layout-full-bleed,
+            .interaction-full-bleed {
+                padding: 2rem 0;
+            }
+
+            .layout-track,
+            .interaction-track {
+                padding: 0 1.5rem;
+            }
+
+            .interaction-split {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+
+            .interaction-column {
+                position: static;
+            }
+
+            .layout-examples {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+
+            #interface-swap {
+                padding: 3rem 0;
+            }
+
+            .swap-header-text {
+                padding: 0 1.5rem 2rem;
+            }
+
+            .swap-heading-container h2 {
+                font-size: clamp(2rem, 6vw, 2.8rem);
+            }
+
+            .swap-content-track {
+                grid-template-columns: 1fr;
+                gap: 3rem;
+                padding: 0 1.5rem;
+            }
+
+            .swap-content#booking-examples {
+                text-align: center;
+            }
+            
+            .form-demo {
+                padding: 1.8rem 1.5rem;
+            }
+            
+            .calendar-demo {
+                padding: 1.5rem 1.2rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="site-shell">
+        <header class="hero">
+            <div class="hero-overlay reveal">
+                <p class="eyebrow">United Tattoo</p>
+                <h1 class="hero-title">
+                    <span>Design Language Reference</span>
+                </h1>
+                <p class="lead">A living style guide documenting color, typography, components, and interaction patterns.</p>
+            </div>
+        </header>
+
+        <section class="section reveal horizontal-scroll" id="immersion" data-filmstrip-section>
+            <div class="filmstrip-text" data-filmstrip-prelude>
+                <p class="section-label">Immersion gallery</p>
+                <h2>Sunbleached walls, charcoal studies, and avian sketches.</h2>
+                <p class="lead">Use this scrollable filmstrip to source tonal references. Each frame ties to a studio
+                    story —
+                    from Liberty-inspired murals to macro plaster textures.</p>
+            </div>
+            <div class="filmstrip-wrapper" data-filmstrip-sticky>
+                <div class="filmstrip" data-filmstrip-track>
+                    <figure class="filmstrip-item" data-label="Monument prep"
+                        style="background-image: url('./public/images/UP1_00007_.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Avian story"
+                        style="background-image: url('./public/images/UP1_00009_.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Architectural study"
+                        style="background-image: url('./public/images/UP1_00010_.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Liberty detail"
+                        style="background-image: url('./public/images/UP1_00018_.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Warm plaster"
+                        style="background-image: url('./public/images/0_1.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Shadow glyph"
+                        style="background-image: url('./public/images/0_3.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Studio light"
+                        style="background-image: url('./public/images/0_6.png');"></figure>
+                    <figure class="filmstrip-item" data-label="Avian flight"
+                        style="background-image: url('./public/images/0_7.png');"></figure>
+                </div>
+                <div class="filmstrip-progress">
+                    <div class="filmstrip-progress-bar" data-filmstrip-progress></div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section reveal identity-full-bleed" id="identity">
+            <div class="identity-track">
+            <div class="sticky-split">
+                <div class="sticky-column reveal">
+                    <p class="section-label">02 • Brand Identity</p>
+                    <h2>Color, typography, and materiality echo sun-washed plaster.</h2>
+                    <p class="lead">Think plaster walls catching a diagonal slice of afternoon light—burnt oranges,
+                        desaturated greens, charcoal blacks, and off-whites that feel powdery and matte. Typography should
+                        feel like museum placards: serif statements, grotesk body copy, and micro-type metadata whispering
+                        along the edges.</p>
+                </div>
+                <div class="stack">
+                    <article class="data-card">
+                        <h3>Color Language</h3>
+                        <p>Primary palette blends burnt oranges with sage concrete. Use gradients and overlays to mimic
+                            painted walls catching slant light.</p>
+                        <p style="font-size:0.85rem; text-transform:uppercase; letter-spacing:0.3em; color:rgba(36,27,22,0.6); margin-bottom:0.5rem;">
+                            Ratio — 60 / 25 / 15</p>
+                        <div class="swatches">
+                            <div class="swatch" style="background:#E67E50">
+                                <div>
+                                    <strong>#E67E50</strong>
+                                    <span>Burnt Orange</span>
+                                </div>
+                                <small>Hero gradients, CTA fills, warm spotlight moments.</small>
+                            </div>
+                            <div class="swatch" style="background:#D87850">
+                                <div>
+                                    <strong>#D87850</strong>
+                                    <span>Terracotta</span>
+                                </div>
+                                <small>Buttons, form focus states, micro interactions.</small>
+                            </div>
+                            <div class="swatch" style="background:#7A8B8B">
+                                <div>
+                                    <strong>#7A8B8B</strong>
+                                    <span>Sage Concrete</span>
+                                </div>
+                                <small>Page background, cards, filmstrip fades.</small>
+                            </div>
+                            <div class="swatch" style="background:#2D2D2D">
+                                <div>
+                                    <strong>#2D2D2D</strong>
+                                    <span>Charcoal Ink</span>
+                                </div>
+                                <small>Typography, photographic overlays, line work.</small>
+                            </div>
+                        </div>
+                    </article>
+                    <article class="data-card type-card reveal">
+                        <h3>Typography</h3>
+                        <p style="font-size:0.95rem; color:rgba(36,27,22,0.7); margin-bottom:1rem;">Pair sculptural serif
+                            headlines with quiet grotesk paragraphs and whisper-thin uppercase metadata. Treat type like
+                            carved etchings on plaster—precise, deliberate, never shouting.</p>
+                        <div class="type-stack">
+                            <div class="type-sample">
+                                <strong>Display / Headlines</strong>
+                                <span style="font-family: 'Playfair Display', serif; font-size: 2.1rem; line-height: 1.1;">Playfair Display
+                                    — Use for statements, paired with tight leading.</span>
+                            </div>
+                            <div class="type-sample">
+                                <strong>Body / Interface</strong>
+                                <span style="font-size:1rem;">Space Grotesk — Sentence case, generous tracking. Minimum size
+                                    16px to keep copy airy against textured grounds.</span>
+                            </div>
+                            <div class="type-sample">
+                                <strong>Accent</strong>
+                                <span style="font-size:0.9rem; letter-spacing:0.25em; text-transform:uppercase;">Use
+                                    uppercase micro-type for metadata, nav, and chips.</span>
+                            </div>
+                        </div>
+                    </article>
+                    <div class="macro-panel">
+                        <p style="max-width:32ch; font-size:1.1rem;">Reference imagery pairs plaster gradients with
+                            charcoal studies. Use this macro crop treatment for hero backups or transitions.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="section-divider" data-section-divider></div>
+            <section class="section reveal" id="interface-swap">
+                <div class="swap-header-text">
+                    <p class="section-label">03 • Interface Components</p>
+                    <div class="swap-heading-container">
+                        <h2>Micro-interactions that feel tactile.</h2>
+                    </div>
+                </div>
+                <div class="swap-content-track">
+                    <div class="swap-content" id="interface-controls" data-swap-content="first">
+                        <p class="section-label" style="margin-bottom: 1.5rem;">Buttons & Toasts</p>
+                        <p class="lead" style="max-width: 65ch; margin: 0 auto 2rem;">Primary actions carry
+                            burnt-orange fills while secondary options lean on terracotta and sand. Toasts inherit the same
+                            hues for instant recognition.</p>
+                        <div class="button-showcase" style="margin-top: 2rem;">
+                            <h4 style="text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.85rem; color: var(--moss); margin-bottom: 1.5rem;">Buttons</h4>
+                            <div class="button-row" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 600px; margin: 0 auto;">
+                                <button class="demo-btn primary" style="width: 100%;">Begin Commission</button>
+                                <button class="demo-btn secondary" style="width: 100%;">View Portfolio</button>
+                                <button class="demo-btn ghost" style="width: 100%;">Ghost Link</button>
+                            </div>
+                        </div>
+                        <div class="toast-showcase" style="margin-top: 3rem;">
+                            <h4 style="text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.85rem; color: var(--moss); margin-bottom: 1.5rem;">Toasts</h4>
+                            <div class="toast-stack" style="gap: 1.5rem; max-width: 600px; margin: 0 auto;">
+                                <div class="toast success">
+                                    <div class="toast-icon">✓</div>
+                                    <div>
+                                        <strong>Deposit received</strong>
+                                        <p style="margin:0;">We'll confirm your consultation slot within 24 hours.</p>
+                                    </div>
+                                </div>
+                                <div class="toast alert">
+                                    <div class="toast-icon">!</div>
+                                    <div>
+                                        <strong>Waitlist update</strong>
+                                        <p style="margin:0;">Masato's calendar just opened for February.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="swap-content" id="booking-examples" data-swap-content="second">
+                        <p class="section-label" style="margin-bottom: 1.5rem;">Interface Treatments</p>
+                        <p class="lead" style="margin-bottom: 2rem;">Forms and calendars that echo studio serenity.</p>
+                        <div class="split-demo" style="display: flex; flex-direction: column; gap: 2rem;">
+                    <form class="form-demo" style="width: 100%; max-width: 600px;">
+                        <p style="margin:0; font-size:0.85rem; color:rgba(31,27,23,0.7);">Request a consultation slot in
+                            under a minute.</p>
+                        <div class="form-row">
+                            <div class="form-field">
+                                <label for="demo-name">Full Name</label>
+                                <input id="demo-name" type="text" placeholder="Eden Morales">
+                            </div>
+                            <div class="form-field">
+                                <label for="demo-email">Email</label>
+                                <input id="demo-email" type="email" placeholder="eden@collectors.club">
+                            </div>
+                        </div>
+                        <div class="form-field">
+                            <label for="demo-notes">Concept Notes</label>
+                            <textarea id="demo-notes" rows="3" placeholder="Large-scale illustrative back piece..."></textarea>
+                        </div>
+                        <div class="form-helper">We reply within 24 hours to confirm consultation dates and deposit
+                            details.</div>
+                        <div style="display:flex; gap:0.8rem; flex-wrap:wrap;">
+                            <button class="demo-btn primary" style="align-self:flex-start;">Submit Brief</button>
+                            <button class="demo-btn ghost" type="button" style="align-self:flex-start;">Download PDF</button>
+                        </div>
+                    </form>
+                    <div class="calendar-demo" style="width: 100%; max-width: 400px;">
+                        <div style="display:flex; justify-content:space-between; align-items:center;">
+                            <div>
+                                <p class="section-label" style="margin-bottom:0;">Studio Calendar</p>
+                                <h3 style="margin:0;">February 2026</h3>
+                            </div>
+                            <div class="button-row" style="gap:0.4rem;">
+                                <button class="demo-btn ghost" style="padding:0.4rem 0.8rem;">←</button>
+                                <button class="demo-btn ghost" style="padding:0.4rem 0.8rem;">→</button>
+                            </div>
+                        </div>
+                        <div class="calendar-grid">
+                            <div class="calendar-day is-muted">28</div>
+                            <div class="calendar-day is-muted">29</div>
+                            <div class="calendar-day is-muted">30</div>
+                            <div class="calendar-day is-muted">31</div>
+                            <div class="calendar-day">1</div>
+                            <div class="calendar-day">2</div>
+                            <div class="calendar-day">3</div>
+                            <div class="calendar-day">4</div>
+                            <div class="calendar-day">5</div>
+                            <div class="calendar-day">6</div>
+                            <div class="calendar-day">7</div>
+                            <div class="calendar-day">8</div>
+                            <div class="calendar-day">9</div>
+                            <div class="calendar-day is-booked">10</div>
+                            <div class="calendar-day">11</div>
+                            <div class="calendar-day">12</div>
+                            <div class="calendar-day">13</div>
+                            <div class="calendar-day">14</div>
+                            <div class="calendar-day">15</div>
+                            <div class="calendar-day">16</div>
+                            <div class="calendar-day">17</div>
+                            <div class="calendar-day">18</div>
+                            <div class="calendar-day">19</div>
+                            <div class="calendar-day">20</div>
+                            <div class="calendar-day">21</div>
+                            <div class="calendar-day is-booked">22</div>
+                            <div class="calendar-day is-booked">23</div>
+                            <div class="calendar-day">24</div>
+                            <div class="calendar-day">25</div>
+                            <div class="calendar-day">26</div>
+                            <div class="calendar-day">27</div>
+                            <div class="calendar-day">28</div>
+                            <div class="calendar-day">29</div>
+                            <div class="calendar-day is-muted">1</div>
+                            <div class="calendar-day is-muted">2</div>
+                            <div class="calendar-day is-muted">3</div>
+                        </div>
+                        <div class="calendar-legend" style="display:flex; gap:1rem; margin-top:0.8rem; font-size:0.78rem; color:rgba(31,27,23,0.7);">
+                            <span><span style="display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--terracotta); margin-right:0.3rem;"></span>booked</span>
+                            <span><span style="display:inline-block; width:10px; height:10px; border-radius:3px; border:1px solid rgba(31,27,23,0.4); margin-right:0.3rem;"></span>open</span>
+                            <span><span style="display:inline-block; width:10px; height:10px; border-radius:3px; border:1px solid rgba(31,27,23,0.4); opacity:0.4; margin-right:0.3rem;"></span>past</span>
+                        </div>
+                    </div>
+                </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        <div class="section-divider" data-section-divider></div>
+        <section class="section reveal section-transition layout-full-bleed" id="layout-components">
+            <div class="layout-track">
+                <p class="section-label">04 • Layout & Components</p>
+                <h2>Structure mirrors gallery pacing: spacious, staggered, editorial.</h2>
+                <p class="lead" style="max-width: 65ch; margin-bottom: 3rem;">Think in horizontal galleries: alternate full-width manifesto blocks with modular cards so the page rhythm breathes like walking past framed works.</p>
+                <div class="layout-examples">
+                    <figure class="layout-example stagger-layout-card stagger-layout-card-1">
+                        <img src="./public/images/UP1_00007_.png" alt="Hero layout mock showing manifesto block beside art">
+                        <figcaption>Hero Canvas • Manifesto copy sits in a plaster card while artwork bleeds edge-to-edge,
+                            mimicking a gallery wall diptych.</figcaption>
+                    </figure>
+                    <figure class="layout-example stagger-layout-card stagger-layout-card-2">
+                        <img src="./public/images/UP1_00009_.png" alt="Artist card layout reference">
+                        <figcaption>Artist Card • Portraits rest on color blocks with caption chips, offering the same pacing
+                            as framed studies.</figcaption>
+                    </figure>
+                    <figure class="layout-example stagger-layout-card stagger-layout-card-3">
+                        <img src="./public/images/UP1_00014_.png" alt="Lookbook grid with staggered imagery">
+                        <figcaption>Lookbook Grid • Stagger rows so imagery steps across the viewport the way canvases do in a
+                            salon hang.</figcaption>
+                    </figure>
+                </div>
+            </div>
+        </section>
+
+        <section class="section reveal interaction-full-bleed" id="interaction">
+            <div class="interaction-track">
+                <p class="section-label">05 • Interaction & Motion</p>
+                <h2>Every movement should feel deliberate, like brush strokes.</h2>
+                <div class="interaction-split">
+                    <div class="interaction-column reveal">
+                        <div class="interaction-principles">
+                            <article class="data-card">
+                                <h3>Baseline</h3>
+                                <ul class="list">
+                                    <li>Fade/slide reveals on scroll, 200–300ms, ease-out.</li>
+                                    <li>Buttons scale to 105% with shadow bloom; no bounce easing.</li>
+                                    <li>Link underlines draw from left to right like a painted stroke.</li>
+                                </ul>
+                            </article>
+                            <article class="data-card" style="margin-top: 2rem;">
+                                <h3>Accent Moments</h3>
+                                <ul class="list">
+                                    <li>Parallax on hero imagery (≤5% translateY).</li>
+                                    <li>Staggered card entrances of 50ms to mimic gallery walk-through.</li>
+                                    <li>Interactive swatches that tint background panels subtly on hover.</li>
+                                </ul>
+                            </article>
+                        </div>
+                    </div>
+                    <div class="interaction-examples-column">
+                        <div class="motion-examples-enhanced">
+                            <div class="motion-example-card-enhanced" style="margin-bottom: 2rem;">
+                                <strong style="display: block; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin-bottom: 1.2rem;">Example: Button Scale</strong>
+                                <button class="demo-btn primary">Hover to see 105% scale</button>
+                            </div>
+                            <div class="motion-example-card-enhanced" style="margin-bottom: 2rem;">
+                                <strong style="display: block; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin-bottom: 1.2rem;">Example: Link Underline</strong>
+                                <a href="#" class="motion-link" style="color: var(--burnt); text-decoration: none; position: relative; display: inline-block; font-size: 1.1rem;">Hover to see underline draw from left</a>
+                            </div>
+                            <div class="motion-example-card-enhanced" style="margin-bottom: 2rem;">
+                                <strong style="display: block; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin-bottom: 1.2rem;">Example: Staggered Cards</strong>
+                                <div style="display: grid; gap: 1rem;">
+                                    <div class="stagger-card stagger-card-1" style="padding: 1.2rem; background: rgba(255, 247, 236, 0.95); border-radius: 16px; opacity: 0; transform: translateY(20px); border: 1px solid rgba(122, 139, 139, 0.2); box-shadow: 0 4px 12px rgba(31, 27, 23, 0.08);">Card 1 (0ms)</div>
+                                    <div class="stagger-card stagger-card-2" style="padding: 1.2rem; background: rgba(255, 247, 236, 0.95); border-radius: 16px; opacity: 0; transform: translateY(20px); border: 1px solid rgba(122, 139, 139, 0.2); box-shadow: 0 4px 12px rgba(31, 27, 23, 0.08);">Card 2 (50ms)</div>
+                                    <div class="stagger-card stagger-card-3" style="padding: 1.2rem; background: rgba(255, 247, 236, 0.95); border-radius: 16px; opacity: 0; transform: translateY(20px); border: 1px solid rgba(122, 139, 139, 0.2); box-shadow: 0 4px 12px rgba(31, 27, 23, 0.08);">Card 3 (100ms)</div>
+                                </div>
+                            </div>
+                            <div class="motion-example-card-enhanced">
+                                <strong style="display: block; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin-bottom: 1.2rem;">Example: Interactive Swatch</strong>
+                                <div class="swatch-hover-demo" style="display: flex; gap: 1rem; flex-wrap: wrap;">
+                                    <div class="hover-swatch" data-color="#E67E50" style="width: 70px; height: 70px; border-radius: 16px; background: #E67E50; cursor: pointer; transition: transform 0.2s ease; box-shadow: 0 4px 12px rgba(31, 27, 23, 0.15);"></div>
+                                    <div class="hover-swatch" data-color="#7A8B8B" style="width: 70px; height: 70px; border-radius: 16px; background: #7A8B8B; cursor: pointer; transition: transform 0.2s ease; box-shadow: 0 4px 12px rgba(31, 27, 23, 0.15);"></div>
+                                    <div class="hover-swatch" data-color="#D87850" style="width: 70px; height: 70px; border-radius: 16px; background: #D87850; cursor: pointer; transition: transform 0.2s ease; box-shadow: 0 4px 12px rgba(31, 27, 23, 0.15);"></div>
+                                </div>
+                                <p style="font-size: 0.8rem; color: rgba(31, 27, 23, 0.65); margin-top: 1rem; margin-bottom: 0;">Hover swatches to tint background</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section reveal" id="sticky-demo">
+            <p class="section-label">06 • Sticky Storytelling Example</p>
+            <h2>Anchor manifesto copy while narrating evolving work.</h2>
+            <p class="lead">Use sticky paired columns for case studies or process pages: the left rail sets expectations,
+                the right column scrolls through vivid chapters.</p>
+            <div class="sticky-grid">
+                <aside class="sticky-panel">
+                    <h3 style="margin-top:0; text-transform:uppercase; letter-spacing:0.25em; font-size:0.85rem; color:var(--moss);">Sticky
+                        Rules</h3>
+                    <ul class="list">
+                        <li>Panel height ≤ 70vh with generous padding so it never feels cramped.</li>
+                        <li>Set <code>position: sticky</code> with <code>top: 2rem</code> to mimic gallery placards.</li>
+                        <li>Ensure mobile stacks vertically; sticky disengages gracefully below 720px.</li>
+                    </ul>
+                </aside>
+                <div class="scroll-steps">
+                    <article class="scroll-step">
+                        <strong>Phase 01 — Brief Capture</strong>
+                        <p>Client brings mural references, sculptures, and light studies. Capture quotes and palette
+                            swatches directly in the viewport.</p>
+                    </article>
+                    <article class="scroll-step">
+                        <strong>Phase 02 — Material Study</strong>
+                        <p>Use macro photography of charcoal lines and plaster chips. Pair with captions outlining needle
+                            groupings and pigment blends.</p>
+                    </article>
+                    <article class="scroll-step">
+                        <strong>Phase 03 — Session Rhythm</strong>
+                        <p>Document progression with warm gradients + timestamps to show layering, wiping, and varnish
+                            moments.</p>
+                    </article>
+                    <article class="scroll-step">
+                        <strong>Phase 04 — Aftercare</strong>
+                        <p>Close with archival photography and care steps so the story resolves with confidence.</p>
+                    </article>
+                </div>
+            </div>
+        </section>
+
+        <section class="section reveal" id="tone">
+            <p class="section-label">07 • Tone & Messaging</p>
+            <h2>Words should feel archival yet alive.</h2>
+            <p class="lead">Balance poetic descriptions with precise process language. Speak to seasoned collectors, not
+                trend chasers.</p>
+            <div class="tone-chips">
+                <span style="background:#7A8B8B">ARTISTIC</span>
+                <span style="background:#E91E63">BOLD</span>
+                <span style="background:#8B9A9A">SOPHISTICATED</span>
+                <span style="background:#F5A862">ENERGETIC</span>
+                <span style="background:#E67E50">AUTHENTIC</span>
+                <span style="background:#D87850">PROFESSIONAL</span>
+            </div>
+            <article class="data-card">
+                <h3>Voice Notes</h3>
+                <ul class="list">
+                    <li>Use sensory analogies (“sun-baked walls”, “charcoal whisper”) to anchor visuals.</li>
+                    <li>Keep call-to-actions confident but calm (“Begin Commission”, “Visit the Studio”).</li>
+                    <li>Highlight collaboration and process transparency in every section.</li>
+                </ul>
+            </article>
+        </section>
+
+        <section class="section reveal" id="references">
+            <p class="section-label">08 • Reference + Guardrails</p>
+            <h2>Borrow selectively; keep the voice distinctly United.</h2>
+            <div class="grid-two">
+                <article class="data-card">
+                    <h3>Sites We Admire</h3>
+                    <ul class="ref-list">
+                        <li>
+                            <strong>Studio Nari</strong> — Editorial typography pacing, soft gradients.
+                        </li>
+                        <li>
+                            <strong>Acne Studios</strong> — Confident whitespace + effortless photography pairing.
+                        </li>
+                        <li>
+                            <strong>Slowdown Studio</strong> — Product storytelling with tactile textures.
+                        </li>
+                    </ul>
+                </article>
+                <article class="data-card">
+                    <h3>Avoid</h3>
+                    <ul class="list">
+                        <li>Aggressive gothic motifs that feel intimidating.</li>
+                        <li>Overly dark backgrounds that hide brush detail.</li>
+                        <li>Cluttered galleries or confusing booking funnels.</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <footer>
+            UNITED TATTOO • LIVING STYLE BRIEF • UPDATED QUARTERLY
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('is-visible');
+                    }
+                });
+            }, { threshold: 0.18 });
+
+            document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
+            document.querySelectorAll('[data-section-divider]').forEach((el) => observer.observe(el));
+            document.querySelectorAll('.section-transition').forEach((el) => observer.observe(el));
+
+            const heroImage = document.querySelector('.hero-image');
+            if (heroImage) {
+                const handleScroll = () => {
+                    const offset = window.scrollY * 0.12;
+                    heroImage.style.transform = `translateY(${offset}px)`;
+                };
+                handleScroll();
+                window.addEventListener('scroll', () => {
+                    requestAnimationFrame(handleScroll);
+                });
+            }
+
+            const filmstripSection = document.querySelector('[data-filmstrip-section]');
+            const filmstripTrack = document.querySelector('[data-filmstrip-track]');
+            const filmstripProgress = document.querySelector('[data-filmstrip-progress]');
+            const filmstripPrelude = document.querySelector('[data-filmstrip-prelude]');
+            if (filmstripSection && filmstripTrack) {
+                let distance = 0;
+                const setDimensions = () => {
+                    const trackWidth = filmstripTrack.scrollWidth;
+                    distance = Math.max(trackWidth - window.innerWidth, 0);
+                    const preludeHeight = filmstripPrelude ? filmstripPrelude.offsetHeight : 0;
+                    const progressHeight = filmstripProgress ? filmstripProgress.offsetHeight : 0;
+                    filmstripSection.style.height = `${preludeHeight + progressHeight + window.innerHeight + distance + 40}px`;
+                };
+
+                const handleFilmstripScroll = () => {
+                    const sectionTop = filmstripSection.offsetTop;
+                    const sectionHeight = filmstripSection.offsetHeight;
+                    const scrollY = window.scrollY;
+                    const progress = Math.min(Math.max((scrollY - sectionTop) / (sectionHeight - window.innerHeight), 0), 1);
+                    filmstripTrack.style.transform = `translateX(${-distance * progress}px)`;
+                    if (filmstripProgress) {
+                        filmstripProgress.style.transform = `scaleX(${progress})`;
+                    }
+                };
+
+                setDimensions();
+                handleFilmstripScroll();
+                window.addEventListener('resize', () => {
+                    setDimensions();
+                    handleFilmstripScroll();
+                });
+                window.addEventListener('scroll', () => requestAnimationFrame(handleFilmstripScroll));
+            }
+
+            // Staggered cards animation
+            const staggerContainers = document.querySelectorAll('.motion-example-card');
+            staggerContainers.forEach((container) => {
+                const staggerCards = container.querySelectorAll('.stagger-card');
+                if (staggerCards.length > 0) {
+                    const staggerObserver = new IntersectionObserver((entries) => {
+                        entries.forEach((entry) => {
+                            if (entry.isIntersecting) {
+                                staggerCards.forEach((card) => {
+                                    card.classList.add('is-visible');
+                                });
+                                staggerObserver.unobserve(entry.target);
+                            }
+                        });
+                    }, { threshold: 0.2 });
+                    staggerObserver.observe(container);
+                }
+            });
+
+            // Staggered layout cards animation
+            const layoutExamples = document.querySelector('.layout-examples');
+            if (layoutExamples) {
+                const layoutCards = layoutExamples.querySelectorAll('.stagger-layout-card');
+                if (layoutCards.length > 0) {
+                    const layoutObserver = new IntersectionObserver((entries) => {
+                        entries.forEach((entry) => {
+                            if (entry.isIntersecting) {
+                                layoutCards.forEach((card) => {
+                                    card.classList.add('is-visible');
+                                });
+                                layoutObserver.unobserve(entry.target);
+                            }
+                        });
+                    }, { threshold: 0.1 });
+                    layoutObserver.observe(layoutExamples);
+                }
+            }
+
+            // Interactive swatch hover effect
+            const swatches = document.querySelectorAll('.hover-swatch');
+            const swatchDemo = document.querySelector('.swatch-hover-demo');
+            swatches.forEach((swatch) => {
+                swatch.addEventListener('mouseenter', () => {
+                    if (swatchDemo) {
+                        const color = swatch.getAttribute('data-color');
+                        swatchDemo.style.backgroundColor = color + '20';
+                        swatchDemo.style.transition = 'background-color 0.3s ease';
+                    }
+                });
+                swatch.addEventListener('mouseleave', () => {
+                    if (swatchDemo) {
+                        swatchDemo.style.backgroundColor = 'transparent';
+                    }
+                });
+            });
+
+        });
+    </script>
+</body>
+
+</html>
diff --git a/design-language/public/images/0_1.png b/design-language/public/images/0_1.png
new file mode 100644
index 000000000..bf439eb03
Binary files /dev/null and b/design-language/public/images/0_1.png differ
diff --git a/design-language/public/images/0_3.png b/design-language/public/images/0_3.png
new file mode 100644
index 000000000..15cd5c830
Binary files /dev/null and b/design-language/public/images/0_3.png differ
diff --git a/design-language/public/images/0_6.png b/design-language/public/images/0_6.png
new file mode 100644
index 000000000..d82d358e6
Binary files /dev/null and b/design-language/public/images/0_6.png differ
diff --git a/design-language/public/images/0_7.png b/design-language/public/images/0_7.png
new file mode 100644
index 000000000..62751e995
Binary files /dev/null and b/design-language/public/images/0_7.png differ
diff --git a/design-language/public/images/UP1_00007_.png b/design-language/public/images/UP1_00007_.png
new file mode 100644
index 000000000..7c5be572f
Binary files /dev/null and b/design-language/public/images/UP1_00007_.png differ
diff --git a/design-language/public/images/UP1_00009_.png b/design-language/public/images/UP1_00009_.png
new file mode 100644
index 000000000..c213e2f8c
Binary files /dev/null and b/design-language/public/images/UP1_00009_.png differ
diff --git a/design-language/public/images/UP1_00010_.png b/design-language/public/images/UP1_00010_.png
new file mode 100644
index 000000000..edbce00bf
Binary files /dev/null and b/design-language/public/images/UP1_00010_.png differ
diff --git a/design-language/public/images/UP1_00011_.png b/design-language/public/images/UP1_00011_.png
new file mode 100644
index 000000000..c4bb0c712
Binary files /dev/null and b/design-language/public/images/UP1_00011_.png differ
diff --git a/design-language/public/images/UP1_00012_.png b/design-language/public/images/UP1_00012_.png
new file mode 100644
index 000000000..32312dc2b
Binary files /dev/null and b/design-language/public/images/UP1_00012_.png differ
diff --git a/design-language/public/images/UP1_00013_.png b/design-language/public/images/UP1_00013_.png
new file mode 100644
index 000000000..bdc503068
Binary files /dev/null and b/design-language/public/images/UP1_00013_.png differ
diff --git a/design-language/public/images/UP1_00014_.png b/design-language/public/images/UP1_00014_.png
new file mode 100644
index 000000000..e2b2702c6
Binary files /dev/null and b/design-language/public/images/UP1_00014_.png differ
diff --git a/design-language/public/images/UP1_00018_.png b/design-language/public/images/UP1_00018_.png
new file mode 100644
index 000000000..265dc8a06
Binary files /dev/null and b/design-language/public/images/UP1_00018_.png differ