feat(design): introduce United Tattoo Design System with comprehensive design language

- Added design.json file containing the design system's version, last updated date, philosophy, principles, color palette, typography, spacing, layout, and component specifications.
- Established a cohesive visual language and interaction principles to enhance user experience.
- Included detailed accessibility guidelines and implementation notes for future development.

This commit lays the foundation for a unified design approach across the platform.

.gitignore

@@ -151,3 +151,5 @@ supabase/.temp/
 
 # Tanstack Query Devtools
 .tanstack/
+.cursorindexingignore
+.specstory/

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