Open Ticket Design System

# Open Ticket Design System
## Comprehensive Brand & Design Documentation

---

# 1. BRAND IDENTITY SYSTEM

---

## 1A. NAMING STRATEGY

### Recommended Names (12 Options)

| # | Name | Domain Pattern | Rationale | Tagline Suggestion |
|---|------|---------------|-----------|-------------------|
| 1 | **Gather** | gather-tix.org | Simple, warm, community-focused | "Bring people together" |
| 2 | **OpenPass** | openpass.io | Open source + ticketing clarity | "Open source, open doors" |
| 3 | **Commons** | commonstix.org | Shared resource, community asset | "Ticketing for everyone" |
| 4 | **EventKit** | eventkit.io | Toolkit metaphor, practical | "Everything you need to host" |
| 5 | **LibreTix** | libretix.org | Libre/open source emphasis | "Free as in freedom" |
| 6 | **Hearth** | hearth.events | Warm, welcoming, gathering place | "Where events come home" |
| 7 | **Ticketwise** | ticketwise.org | Smart, approachable, practical | "Smart ticketing made simple" |
| 8 | **Crowd** | crowd-tix.io | Community, people-focused | "Powered by your community" |
| 9 | **Assembly** | assemblytix.org | Coming together, democratic | "Assemble your audience" |
| 10 | **SmallHall** | smallhall.io | Intimate, non-corporate | "Big events, small footprint" |
| 11 | **Patchwork** | patchwork.events | Community-built, collaborative | "Stitched together by you" |
| 12 | **Doorway** | doorway.io | Access, opportunity, welcome | "Open the door to your event" |

### Domain Availability Notes

**Recommended Priority Order:**

1. **gather-tix.org** - Highly available, warm, memorable
2. **openpass.io** - Tech-forward, clear purpose
3. **commonstix.org** - Strong community message
4. **eventkit.io** - Practical, developer-friendly
5. **libretix.org** - Clear open source positioning

**Naming Principles Applied:**
- Avoided: TicketMaster, Eventbrite variations (trademark risk)
- Avoided: Corp, Inc, Pro suffixes (too corporate)
- Preferred: .org for non-profit alignment, .io for tech credibility
- Length: All under 12 characters (memorable, typeable)

---

## 1B. LOGO CONCEPTS

### Concept 1: The Gathering Circle
**Symbol:** Interlocking arcs forming a circle with a ticket stub silhouette
**Meaning:** Community coming together, inclusivity, shared experience
**Wordmark:** Clean sans-serif, lowercase "gather"
**Color Variations:**
- Light: Primary blue (#2563eb) on white
- Dark: Primary blue (#60a5fa) on dark

### Concept 2: The Open Door
**Symbol:** Stylized door frame with ticket shape as the opening
**Meaning:** Accessibility, welcome, opportunity
**Wordmark:** Friendly rounded sans-serif
**Color Variations:**
- Light: Secondary coral (#f43f5e) accent
- Dark: Soft coral (#fb7185) on dark

### Concept 3: The Connected Nodes
**Symbol:** Three dots connected by lines, forming a ticket shape
**Meaning:** Network, community, connection
**Wordmark:** Modern geometric sans-serif
**Color Variations:**
- Light: Gradient from primary to secondary
- Dark: Solid primary with glow effect

### Concept 4: The Ticket Leaf
**Symbol:** Ticket stub with leaf/organic elements
**Meaning:** Growth, natural, sustainable (lightweight)
**Wordmark:** Slightly organic, friendly
**Color Variations:**
- Light: Success green (#22c55e) primary
- Dark: Soft green (#4ade80) on dark

### Concept 5: The Simple Mark
**Symbol:** Minimalist "t" shape that doubles as a ticket
**Meaning:** Simplicity, clarity, focus
**Wordmark:** Bold, confident sans-serif
**Color Variations:**
- Light: Neutral dark (#171717) for versatility
- Dark: White (#ffffff) for contrast

### Favicon Approaches

| Size | Approach | Description |
|------|----------|-------------|
| 16x16 | Minimal mark | Simple geometric shape |
| 32x32 | Symbol detail | Simplified logo symbol |
| 180x180 | App icon | Full symbol with padding |
| 192x192 | PWA icon | Symbol on brand background |
| 512x512 | Splash screen | Full logo with wordmark |

### Accessibility Considerations

- **Color Independence:** Logo works in single color (black/white)
- **Minimum Size:** 24px height for readability
- **Contrast:** 4.5:1 minimum against all backgrounds
- **Animation:** No essential information in motion
- **Screen Readers:** Logo marked as decorative or with aria-label

---

## 1C. BRAND VOICE & TONE

### Brand Personality Traits (7)

1. **Welcoming** - Like a friendly neighbor, not a corporate gatekeeper
2. **Helpful** - Anticipates needs, offers solutions proactively
3. **Transparent** - Clear about limitations, honest about capabilities
4. **Empowering** - Builds confidence, celebrates user success
5. **Approachable** - No jargon, no intimidation, human language
6. **Reliable** - Consistent, trustworthy, there when needed
7. **Community-minded** - "We" not "us vs them", celebrates collective success

### Voice Characteristics

| Characteristic | Do | Don't |
|----------------|-----|-------|
| **Clear** | "Your tickets are ready" | "Ticket issuance has been completed" |
| **Warm** | "We're here to help" | "Contact support for assistance" |
| **Actionable** | "Download your tickets" | "Ticket download functionality available" |
| **Personal** | "Your event" | "The user's event" |
| **Encouraging** | "Great job setting up!" | "Setup completed successfully" |

### Tone by Context

#### Marketing / Homepage
- **Tone:** Enthusiastic, inspiring, confident
- **Example:** "Create unforgettable events without the headache. Your community deserves better ticketing."

#### Onboarding
- **Tone:** Encouraging, guiding, patient
- **Example:** "Let's get your first event set up. It'll only take a few minutes."

#### Success States
- **Tone:** Celebratory, warm, specific
- **Example:** "Tickets sent! 47 people are excited to join your event."

#### Error Messages
- **Tone:** Helpful, apologetic, solution-focused
- **Example:** "We couldn't save that change. Let's try again, or you can refresh the page."

#### Loading States
- **Tone:** Reassuring, transparent
- **Example:** "Sending tickets to your guests... This usually takes about 30 seconds."

#### Empty States
- **Tone:** Inviting, guiding, optimistic
- **Example:** "No events yet. Your first event is going to be amazing—let's create it!"

#### Confirmation Emails
- **Tone:** Warm, clear, exciting
- **Example:** "You're all set! We've got your spot reserved. Here's everything you need to know."

### Inclusive Language Guidelines

**Gender-Neutral:**
- Use: "they/them" for unknown individuals
- Use: "everyone", "folks", "team" instead of "guys"
- Avoid: Assuming gender in examples

**Ability-Inclusive:**
- Use: "accessible seating" not "handicapped seating"
- Use: "screen reader friendly" not "for blind users"
- Avoid: Defining people by ability

**Culturally Sensitive:**
- Use: Universal date formats (ISO 8601: YYYY-MM-DD)
- Use: Time zones explicitly stated
- Avoid: Cultural idioms that don't translate

**Non-Profit Sector Alignment:**
- Use: "mission", "impact", "community"
- Use: "supporters" not "customers"
- Use: "fundraiser" not "sale"
- Avoid: Commercial/retail language

---

# 2. DESIGN TOKEN SYSTEM

---

## 2A. COLOR PALETTE

### Primary Palette (Blue - Trust & Reliability)

| Token | Hex | RGB | Usage | Contrast on White |
|-------|-----|-----|-------|-------------------|
| --color-primary-50 | #eff6ff | rgb(239,246,255) | Light backgrounds | N/A |
| --color-primary-100 | #dbeafe | rgb(219,234,254) | Hover states | N/A |
| --color-primary-200 | #bfdbfe | rgb(191,219,254) | Borders, accents | N/A |
| --color-primary-300 | #93c5fd | rgb(147,197,253) | Disabled states | N/A |
| --color-primary-400 | #60a5fa | rgb(96,165,250) | Secondary accents | 3.1:1 |
| --color-primary-500 | #3b82f6 | rgb(59,130,246) | Primary actions | 4.5:1 ✓ |
| --color-primary-600 | #2563eb | rgb(37,99,235) | Primary buttons | 5.8:1 ✓ |
| --color-primary-700 | #1d4ed8 | rgb(29,78,216) | Hover states | 7.2:1 ✓ |
| --color-primary-800 | #1e40af | rgb(30,64,175) | Text | 8.9:1 ✓ |
| --color-primary-900 | #1e3a8a | rgb(30,58,138) | Headings | 11.2:1 ✓ |
| --color-primary-950 | #172554 | rgb(23,37,84) | Dark emphasis | 15.8:1 ✓ |

### Secondary Palette (Coral - Energy & Action)

| Token | Hex | RGB | Usage | Contrast on White |
|-------|-----|-----|-------|-------------------|
| --color-secondary-500 | #f43f5e | rgb(244,63,94) | CTA buttons | 5.2:1 ✓ |
| --color-secondary-600 | #e11d48 | rgb(225,29,72) | CTA hover | 6.4:1 ✓ |
| --color-secondary-700 | #be123c | rgb(190,18,60) | Emphasis | 8.1:1 ✓ |

### Neutral Grays (Balanced, Warm)

| Token | Hex | RGB | Usage | Contrast on White |
|-------|-----|-----|-------|-------------------|
| --color-gray-50 | #fafafa | rgb(250,250,250) | Page background | N/A |
| --color-gray-100 | #f5f5f5 | rgb(245,245,245) | Card backgrounds | N/A |
| --color-gray-200 | #e5e5e5 | rgb(229,229,229) | Borders | N/A |
| --color-gray-300 | #d4d4d4 | rgb(212,212,212) | Disabled borders | N/A |
| --color-gray-400 | #a3a3a3 | rgb(163,163,163) | Placeholder text | 3.0:1 |
| --color-gray-500 | #737373 | rgb(115,115,115) | Secondary text | 4.6:1 ✓ |
| --color-gray-600 | #525252 | rgb(82,82,82) | Body text | 7.0:1 ✓ |
| --color-gray-700 | #404040 | rgb(64,64,64) | Strong text | 9.2:1 ✓ |
| --color-gray-800 | #262626 | rgb(38,38,38) | Headings | 12.6:1 ✓ |
| --color-gray-900 | #171717 | rgb(23,23,23) | Primary text | 16.0:1 ✓ |
| --color-gray-950 | #0a0a0a | rgb(10,10,10) | Maximum contrast | 19.5:1 ✓ |

### Semantic Colors

#### Success (Green)
| Token | Hex | Contrast on White | Contrast on Dark |
|-------|-----|-------------------|------------------|
| --color-success-500 | #22c55e | 4.5:1 ✓ | - |
| --color-success-600 | #16a34a | 5.8:1 ✓ | - |
| --color-success-400 | #4ade80 | - | 9.8:1 ✓ |

#### Warning (Amber)
| Token | Hex | Contrast on White | Contrast on Dark |
|-------|-----|-------------------|------------------|
| --color-warning-600 | #d97706 | 4.6:1 ✓ | - |
| --color-warning-500 | #f59e0b | 3.1:1 | - |
| --color-warning-400 | #fbbf24 | - | 12.1:1 ✓ |

#### Error (Red)
| Token | Hex | Contrast on White | Contrast on Dark |
|-------|-----|-------------------|------------------|
| --color-error-600 | #dc2626 | 5.6:1 ✓ | - |
| --color-error-500 | #ef4444 | 4.5:1 ✓ | - |
| --color-error-400 | #f87171 | - | 8.4:1 ✓ |

#### Info (Blue)
| Token | Hex | Contrast on White | Contrast on Dark |
|-------|-----|-------------------|------------------|
| --color-info-600 | #0284c7 | 5.4:1 ✓ | - |
| --color-info-500 | #0ea5e9 | 3.9:1 | - |
| --color-info-400 | #38bdf8 | - | 10.2:1 ✓ |

### Event/Category Colors (Colorblind-Safe)

| Category | Color | Hex | Safe for Deuteranopia | Safe for Protanopia |
|----------|-------|-----|----------------------|---------------------|
| General | Blue | #2563eb | ✓ | ✓ |
| Workshop | Green | #16a34a | ✓ | ✓ |
| Conference | Purple | #9333ea | ✓ | ✓ |
| Social | Orange | #ea580c | ✓ | ✓ |
| Fundraiser | Cyan | #0891b2 | ✓ | ✓ |
| Performance | Pink | #db2777 | ✓ | ✓ |
| Sports | Lime | #65a30d | ✓ | ✓ |
| Education | Violet | #7c3aed | ✓ | ✓ |

**Colorblind Safety Strategy:**
- Never rely on color alone for critical information
- Always pair with icons, labels, or patterns
- Test with simulators (Coblis, Color Oracle)

### Dark Mode Color Mapping

| Semantic Token | Light Mode | Dark Mode |
|----------------|------------|-----------|
| --bg-primary | #ffffff | #0a0a0a |
| --bg-secondary | #fafafa | #171717 |
| --text-primary | #171717 | #fafafa |
| --text-secondary | #525252 | #a3a3a3 |
| --border-default | #e5e5e5 | #404040 |
| --text-link | #2563eb | #60a5fa |

---

## 2B. TYPOGRAPHY

### Font Family Stack

```css
--font-sans: 'Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 
             'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 
             'Inconsolata', 'Roboto Mono', monospace;
```

**Font Loading Strategy:**
- Inter: Google Fonts or self-hosted
- Fallback: System fonts for instant render
- Font-display: swap for performance

### Type Scale

| Token | Size | Line Height | Letter Spacing | Usage |
|-------|------|-------------|----------------|-------|
| --font-size-xs | 12px | 1.5 | 0.01em | Captions, timestamps |
| --font-size-sm | 14px | 1.5 | 0 | Body small, labels |
| --font-size-base | 16px | 1.5 | 0 | Body text (default) |
| --font-size-lg | 18px | 1.5 | -0.01em | Lead paragraphs |
| --font-size-xl | 20px | 1.4 | -0.01em | H6, small headings |
| --font-size-2xl | 24px | 1.3 | -0.01em | H5 |
| --font-size-3xl | 30px | 1.2 | -0.02em | H4 |
| --font-size-4xl | 36px | 1.2 | -0.02em | H3 |
| --font-size-5xl | 48px | 1.1 | -0.02em | H2 |
| --font-size-6xl | 60px | 1.1 | -0.03em | H1 (desktop) |
| --font-size-7xl | 72px | 1.0 | -0.03em | Hero (desktop) |

### Font Weights

| Token | Value | Usage |
|-------|-------|-------|
| --font-weight-normal | 400 | Body text |
| --font-weight-medium | 500 | Labels, emphasis |
| --font-weight-semibold | 600 | Headings, buttons |
| --font-weight-bold | 700 | Strong emphasis |

### Typography Patterns

**Headings:**
- Weight: 600 (semibold)
- Line-height: Tight (1.1-1.2)
- Letter-spacing: Negative for large sizes

**Body Text:**
- Weight: 400 (normal)
- Line-height: Normal (1.5)
- Max-width: 65ch for readability

**Labels & UI:**
- Weight: 500 (medium)
- Size: sm (14px) or base (16px)
- Uppercase with wide tracking for buttons

---

## 2C. SPACING SYSTEM

### Base Unit: 4px

All spacing values are multiples of 4px for consistency.

### Spacing Scale

| Token | Value | Pixels | Usage |
|-------|-------|--------|-------|
| --space-0 | 0 | 0 | No spacing |
| --space-1 | 0.25rem | 4px | Tight gaps |
| --space-2 | 0.5rem | 8px | Icon gaps |
| --space-3 | 0.75rem | 12px | Small padding |
| --space-4 | 1rem | 16px | Default gap |
| --space-5 | 1.25rem | 20px | Medium padding |
| --space-6 | 1.5rem | 24px | Card padding |
| --space-8 | 2rem | 32px | Section gaps |
| --space-10 | 2.5rem | 40px | Large gaps |
| --space-12 | 3rem | 48px | Section padding |
| --space-16 | 4rem | 64px | Large sections |
| --space-20 | 5rem | 80px | Hero spacing |
| --space-24 | 6rem | 96px | Major sections |

### Semantic Spacing

| Token | Value | Usage |
|-------|-------|-------|
| --space-gap-xs | 4px | Tight component gaps |
| --space-gap-sm | 8px | Default component gaps |
| --space-gap-md | 16px | Form field gaps |
| --space-gap-lg | 24px | Card content gaps |
| --space-gap-xl | 32px | Section content gaps |
| --space-section-sm | 48px | Small section padding |
| --space-section-md | 64px | Medium section padding |
| --space-section-lg | 96px | Large section padding |

### Component Spacing

**Buttons:**
- Height: sm (32px), md (40px), lg (48px)
- Padding X: sm (12px), md (16px), lg (24px)

**Inputs:**
- Height: sm (32px), md (40px), lg (48px)
- Padding X: 12px (consistent)

**Cards:**
- Padding: sm (16px), md (24px), lg (32px)
- Gap: 16px between elements

---

## 2D. BORDERS & RADIUS

### Border Widths

| Token | Value | Usage |
|-------|-------|-------|
| --border-width-0 | 0 | No border |
| --border-width-1 | 1px | Default borders |
| --border-width-2 | 2px | Focus states |
| --border-width-4 | 4px | Active states |

### Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| --radius-none | 0 | Sharp corners |
| --radius-sm | 2px | Subtle rounding |
| --radius-md | 4px | Small elements |
| --radius-lg | 8px | Buttons, inputs |
| --radius-xl | 12px | Cards, panels |
| --radius-2xl | 16px | Modals, dialogs |
| --radius-3xl | 24px | Large containers |
| --radius-full | 9999px | Pills, badges |

### Radius Usage Patterns

- **Buttons:** --radius-lg (8px)
- **Inputs:** --radius-lg (8px)
- **Cards:** --radius-xl (12px)
- **Modals:** --radius-2xl (16px)
- **Badges:** --radius-full (pill)
- **Avatars:** --radius-full (circle)

---

## 2E. SHADOWS

### Elevation System

| Token | Shadow | Elevation | Usage |
|-------|--------|-----------|-------|
| --shadow-none | none | 0 | Flat elements |
| --shadow-xs | 0 1px 2px rgba(0,0,0,0.05) | 1 | Subtle depth |
| --shadow-sm | 0 1px 3px rgba(0,0,0,0.1) | 2 | Cards default |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) | 3 | Hover states |
| --shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | 4 | Dropdowns |
| --shadow-xl | 0 20px 25px rgba(0,0,0,0.1) | 5 | Modals |
| --shadow-2xl | 0 25px 50px rgba(0,0,0,0.25) | 6 | Toasts |

### Focus Shadows

| Token | Shadow | Usage |
|-------|--------|-------|
| --shadow-focus | 0 0 0 3px rgba(59,130,246,0.5) | Default focus |
| --shadow-focus-error | 0 0 0 3px rgba(239,68,68,0.5) | Error focus |
| --shadow-focus-success | 0 0 0 3px rgba(34,197,94,0.5) | Success focus |

### Dark Mode Shadows

Dark mode uses slightly stronger shadows with reduced opacity:
- Multiply opacity by 1.5x
- Keep shadows subtle (dark UI has inherent depth)

---

## 2F. ANIMATION

### Duration Scale

| Token | Value | Usage |
|-------|-------|-------|
| --duration-instant | 0ms | No animation |
| --duration-fast | 100ms | Micro-interactions |
| --duration-normal | 150ms | Hover states |
| --duration-slow | 200ms | Transitions |
| --duration-slower | 300ms | Page transitions |
| --duration-slowest | 500ms | Complex animations |

### Easing Functions

| Token | Curve | Usage |
|-------|-------|-------|
| --ease-linear | linear | Continuous animations |
| --ease-in | cubic-bezier(0.4,0,1,1) | Exit animations |
| --ease-out | cubic-bezier(0,0,0.2,1) | Enter animations |
| --ease-in-out | cubic-bezier(0.4,0,0.2,1) | Standard transitions |
| --ease-bounce | cubic-bezier(0.68,-0.55,0.265,1.55) | Playful elements |
| --ease-spring | cubic-bezier(0.175,0.885,0.32,1.275) | Elastic effects |

### Transition Presets

```css
--transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-colors: color, background-color, border-color 150ms ease-in-out;
--transition-opacity: opacity 150ms ease-in-out;
--transition-transform: transform 200ms ease-out;
```

### Animation Guidelines

- **Purposeful:** Every animation should serve a purpose
- **Subtle:** Animations should enhance, not distract
- **Fast:** Keep interactions snappy (under 300ms)
- **Optional:** Respect prefers-reduced-motion

---

## 2G. BREAKPOINTS

### Breakpoint Scale

| Token | Value | Target |
|-------|-------|--------|
| --breakpoint-sm | 640px | Large phones |
| --breakpoint-md | 768px | Tablets |
| --breakpoint-lg | 1024px | Small laptops |
| --breakpoint-xl | 1280px | Desktops |
| --breakpoint-2xl | 1536px | Large screens |

### Container Max Widths

| Token | Value | Usage |
|-------|-------|-------|
| --container-sm | 640px | Narrow content |
| --container-md | 768px | Forms, articles |
| --container-lg | 1024px | Dashboard |
| --container-xl | 1280px | Full layouts |
| --container-2xl | 1536px | Wide layouts |

### Content Max Widths

| Token | Value | Usage |
|-------|-------|-------|
| --content-max-prose | 65ch | Reading content |
| --content-max-blog | 75ch | Blog posts |
| --content-max-form | 48rem | Forms |

### Responsive Patterns

**Mobile First Approach:**
- Base styles for mobile
- Progressive enhancement up
- Touch targets: minimum 44x44px

---

# 3. COMPONENT DESIGN PRINCIPLES

---

## 3A. BUTTONS

### Variants

| Variant | Background | Text | Border | Usage |
|---------|------------|------|--------|-------|
| Primary | --color-primary-600 | white | none | Main CTAs |
| Secondary | --color-secondary-500 | white | none | Secondary CTAs |
| Outline | transparent | --text-primary | --border-default | Tertiary |
| Ghost | transparent | --text-primary | transparent | Subtle |
| Danger | --color-error-600 | white | none | Destructive |

### States

| State | Visual Change | Transition |
|-------|---------------|------------|
| Default | Base style | - |
| Hover | Darken 10%, lift shadow | 150ms |
| Active | Darken 15%, inset shadow | 100ms |
| Focus | Ring shadow | instant |
| Disabled | 50% opacity, no-pointer | - |
| Loading | Spinner, reduced opacity | - |

### Sizes

| Size | Height | Padding X | Font Size |
|------|--------|-----------|-----------|
| sm | 32px | 12px | 14px |
| md | 40px | 16px | 16px |
| lg | 48px | 24px | 18px |

### Accessibility

- Minimum touch target: 44x44px
- Focus ring: 3px offset, high contrast
- Disabled: aria-disabled="true"
- Loading: aria-busy="true"

---

## 3B. FORMS

### Input States

| State | Border | Background | Text |
|-------|--------|------------|------|
| Default | --border-default | --surface-default | --text-primary |
| Hover | --border-strong | --surface-hover | --text-primary |
| Focus | --border-focus | --surface-default | --text-primary |
| Error | --border-error | --color-error-50 | --text-primary |
| Success | --border-success | --color-success-50 | --text-primary |
| Disabled | --border-default | --surface-disabled | --text-disabled |

### Labels

- Position: Above input (preferred) or inline
- Font: 14px, medium weight
- Color: --text-secondary
- Required indicator: * with aria-label

### Validation Messages

- Position: Below input
- Color: Error (--color-error-600), Success (--color-success-600)
- Icon: Leading icon for quick recognition
- Animation: Slide in 200ms

### Input Types

| Type | Height | Specifics |
|------|--------|-----------|
| Text | 40px | Standard |
| Textarea | Auto | Min-height 80px |
| Select | 40px | Custom dropdown |
| Checkbox | 20px | Touch target 44px |
| Radio | 20px | Touch target 44px |
| Date | 40px | Native or custom |

---

## 3C. CARDS

### Event Cards

**Structure:**
- Image (16:9 ratio)
- Date badge (absolute positioned)
- Title (2 lines max)
- Meta (date, location)
- Actions (CTA button)

**Specs:**
- Padding: 0 (image bleed) or 24px
- Radius: --radius-xl (12px)
- Shadow: --shadow-sm, --shadow-md on hover
- Hover: Lift 2px, shadow increase

### Ticket Cards

**Structure:**
- Event name
- Ticket type
- Date/time
- QR code placeholder
- Actions (download, transfer)

**Specs:**
- Padding: 24px
- Border-left: 4px accent color
- Background: Pattern overlay

---

## 3D. TABLES

### Data Density

| Density | Row Height | Padding | Usage |
|---------|------------|---------|-------|
| Compact | 40px | 8px 12px | Dashboard |
| Default | 56px | 12px 16px | Standard |
| Comfortable | 72px | 16px 24px | Detailed |

### Actions

- Primary: Icon button (visible on hover)
- Secondary: Dropdown menu
- Bulk: Checkbox + toolbar

### Responsive

- Horizontal scroll on mobile
- Card view alternative
- Priority columns visible

---

## 3E. NAVIGATION

### Organization Switcher

- Dropdown with org avatar
- Current org highlighted
- Create/join org option
- Max height with scroll

### Event Navigation

- Horizontal tabs (desktop)
- Vertical list (mobile)
- Active state: underline + color
- Badge counts for sections

### Dashboard Navigation

- Collapsible sidebar
- Icon + label
- Active: Background highlight
- Hover: Subtle background

---

## 3F. MODALS & DIALOGS

### Structure

- Header: Title + close button
- Body: Scrollable content
- Footer: Actions (right-aligned)
- Overlay: --bg-overlay

### Sizes

| Size | Max Width | Usage |
|------|-----------|-------|
| sm | 24rem | Confirmations |
| md | 32rem | Forms |
| lg | 40rem | Complex content |
| xl | 48rem | Full workflows |

### Animation

- Enter: Fade in + scale up (200ms)
- Exit: Fade out + scale down (150ms)
- Easing: --ease-out

### Accessibility

- Focus trap inside modal
- Escape to close
- aria-modal="true"
- aria-labelledby (title)

---

## 3G. TOAST NOTIFICATIONS

### Types

| Type | Icon | Color | Duration |
|------|------|-------|----------|
| Success | Check | Green | 4000ms |
| Error | X | Red | 6000ms |
| Warning | Alert | Amber | 5000ms |
| Info | Info | Blue | 4000ms |

### Position

- Default: Bottom-right (desktop)
- Mobile: Top-center
- Stack: Max 3 visible

### Animation

- Enter: Slide in from right (300ms)
- Exit: Fade out (200ms)
- Progress bar: Optional

---

## 3H. EMPTY STATES

### Structure

- Illustration (optional, decorative)
- Headline: Clear, encouraging
- Description: Explain next steps
- CTA: Primary action button

### Examples

**No Events:**
- "No events yet"
- "Create your first event and start selling tickets."
- Button: "Create Event"

**No Tickets:**
- "No tickets sold"
- "Share your event to start selling."
- Button: "Share Event"

**No Search Results:**
- "No results found"
- "Try adjusting your search terms."
- Button: "Clear Filters"

---

## 3I. LOADING STATES

### Skeleton Screens

- Use for content loading
- Animated shimmer (subtle)
- Match final layout dimensions

### Spinners

- Size: 16px (inline), 24px (buttons), 48px (page)
- Color: --color-primary-600
- Duration: 800ms rotation

### Progress Indicators

- Linear: For known progress
- Indeterminate: For unknown duration
- Steps: For multi-step processes

---

## 3J. ERROR STATES

### Page Errors

- Illustration (friendly, not scary)
- Clear error message
- Helpful next steps
- Contact/support link

### Inline Errors

- Red border on field
- Error message below
- Icon for visibility
- Suggestion for fix

### Recovery

- Auto-retry for transient errors
- Clear error codes for support
- Suggest refresh if appropriate

---

# 4. TEMPLATE SYSTEM

---

## 4A. LANDING PAGE SECTIONS

### Hero Section

**Structure:**
- Headline: Value proposition
- Subheadline: Supporting text
- CTA: Primary button
- Social proof: Stats or testimonials
- Visual: Illustration or screenshot

**Specs:**
- Min-height: 60vh
- Max-width: 1200px
- Padding: 96px vertical

### Event Info Section

**Structure:**
- Event title
- Date/time block
- Location with map
- Description
- Organizer info

**Specs:**
- Two-column (desktop)
- Single-column (mobile)
- Sticky CTA on mobile

### Ticket Selection Section

**Structure:**
- Ticket type cards
- Quantity selector
- Price display
- Total calculator
- Purchase CTA

**Specs:**
- Card-based layout
- Clear pricing
- Quantity limits shown

### FAQ Section

**Structure:**
- Accordion items
- Search/filter (optional)
- Contact CTA

**Specs:**
- Expand/collapse animation
- Anchor links for sharing

---

## 4B. EMAIL LAYOUTS

### Confirmation Email

**Header:**
- Logo
- "You're all set!"

**Body:**
- Event details
- Ticket summary
- QR code
- Add to calendar
- Location/map

**Footer:**
- Organizer contact
- Support links
- Unsubscribe

### Reminder Email

**Header:**
- "Your event is coming up"

**Body:**
- Event reminder
- Date/time countdown
- Location reminder
- What to bring
- Contact info

### Receipt Email

**Header:**
- "Thank you for your purchase"

**Body:**
- Order summary
- Payment details
- Ticket attachments
- Refund policy

**Specs:**
- Max-width: 600px
- Mobile-responsive
- Plain text alternative

---

## 4C. TICKET PDF LAYOUT

### Dimensions
- Width: 3 inches (76mm)
- Height: 7 inches (178mm)
- Or: Standard ticket size (2.125" x 5.5")

### Sections

**Header:**
- Event name
- Date/time
- Venue

**Body:**
- Ticket type
- Attendee name
- Seat/section (if applicable)
- QR code (large, scannable)

**Footer:**
- Order ID
- Terms
- Organizer info

### Design
- Clean, scannable
- High contrast for printing
- QR code minimum 2cm

---

## 4D. DASHBOARD LAYOUT PATTERNS

### Overview Page

**Structure:**
- Stats cards (4-up)
- Recent activity
- Quick actions
- Upcoming events

**Grid:**
- Desktop: 4 columns
- Tablet: 2 columns
- Mobile: 1 column

### Event Detail Page

**Structure:**
- Event header with image
- Tab navigation
- Content area
- Sidebar (stats, actions)

**Tabs:**
- Overview
- Tickets
- Attendees
- Settings

### Settings Page

**Structure:**
- Sidebar navigation
- Form sections
- Save/cancel actions

---

# 5. ACCESSIBILITY SPECIFICATIONS

---

## 5A. WCAG 2.1 AA COMPLIANCE CHECKLIST

### Perceivable

| Criterion | Requirement | Implementation |
|-----------|-------------|----------------|
| 1.1.1 | Text alternatives | All images have alt text |
| 1.2.1 | Captions (prerecorded) | Video captions provided |
| 1.3.1 | Info and relationships | Semantic HTML, ARIA labels |
| 1.4.1 | Use of color | Never rely on color alone |
| 1.4.3 | Contrast (minimum) | 4.5:1 for normal text |
| 1.4.4 | Resize text | 200% zoom support |
| 1.4.5 | Images of text | Avoid, use real text |
| 1.4.10 | Reflow | 320px width support |
| 1.4.11 | Non-text contrast | 3:1 for UI components |
| 1.4.12 | Text spacing | No content loss |
| 1.4.13 | Content on hover | Dismissible, persistent |

### Operable

| Criterion | Requirement | Implementation |
|-----------|-------------|----------------|
| 2.1.1 | Keyboard | All functions keyboard accessible |
| 2.1.2 | No keyboard trap | Escape routes provided |
| 2.2.1 | Timing adjustable | Extendable timeouts |
| 2.2.2 | Pause, stop, hide | Control over auto-play |
| 2.4.1 | Bypass blocks | Skip links provided |
| 2.4.3 | Focus order | Logical tab order |
| 2.4.4 | Link purpose | Descriptive link text |
| 2.4.6 | Headings and labels | Descriptive, unique |
| 2.4.7 | Focus visible | Clear focus indicators |
| 2.5.1 | Pointer gestures | Single pointer alternatives |
| 2.5.2 | Pointer cancellation | Up-event activation |
| 2.5.3 | Label in name | Visible label in accessible name |
| 2.5.4 | Motion actuation | Alternative controls |

### Understandable

| Criterion | Requirement | Implementation |
|-----------|-------------|----------------|
| 3.1.1 | Language of page | lang attribute set |
| 3.1.2 | Language of parts | lang on foreign text |
| 3.2.1 | On focus | No context change on focus |
| 3.2.2 | On input | No context change on input |
| 3.2.3 | Consistent navigation | Same order across pages |
| 3.2.4 | Consistent identification | Same labels for same functions |
| 3.3.1 | Error identification | Clear error messages |
| 3.3.2 | Labels or instructions | Clear field labels |
| 3.3.3 | Error suggestion | Helpful error recovery |
| 3.3.4 | Error prevention | Confirm for important actions |

### Robust

| Criterion | Requirement | Implementation |
|-----------|-------------|----------------|
| 4.1.1 | Parsing | Valid HTML |
| 4.1.2 | Name, role, value | ARIA for custom components |
| 4.1.3 | Status messages | Announce status changes |

---

## 5B. FOCUS INDICATORS

### Default Focus Ring

```css
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
  border-radius: inherit;
}
```

### Focus Requirements

- Minimum 2px thickness
- Minimum 3:1 contrast with unfocused state
- Not obscured by other elements
- Visible on all backgrounds

### Focus Styles by Component

| Component | Focus Style |
|-----------|-------------|
| Button | Ring shadow |
| Input | Border color + ring |
| Link | Underline + outline |
| Card | Border highlight |
| Checkbox | Ring around box |

---

## 5C. SCREEN READER CONSIDERATIONS

### Landmarks

- `<header>` - Banner
- `<nav>` - Navigation
- `<main>` - Main content
- `<aside>` - Complementary
- `<footer>` - Content info
- `<section>` with aria-label

### Headings

- Single H1 per page
- Logical hierarchy (no skips)
- Descriptive text

### Forms

- Label associated with input (for/id)
- Error messages linked (aria-describedby)
- Required fields indicated (aria-required)
- Fieldsets for groups

### Dynamic Content

- Live regions for updates
- aria-live="polite" for non-urgent
- aria-live="assertive" for critical
- Status announcements

### Images

- Meaningful images: descriptive alt
- Decorative images: alt=""
- Complex images: longdesc or adjacent text
- Charts: data table alternative

---

## 5D. MOTION SENSITIVITY

### Reduced Motion Support

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

### Motion Guidelines

- Never auto-play video with sound
- Parallax: Optional, respect preference
- Animations: Subtle, not disorienting
- Loading: Static fallback available

---

## 5E. COLOR-BLIND SAFE PALETTES

### Safe Combinations

| Combination | Safe |
|-------------|------|
| Blue + Yellow | ✓ |
| Blue + Orange | ✓ |
| Purple + Yellow | ✓ |
| Red + Blue | ✓ (with care) |
| Green + Red | ✗ Avoid |
| Green + Brown | ✗ Avoid |

### Testing Tools

- Coblis (Color Blindness Simulator)
- Color Oracle
- Stark (Figma plugin)
- axe DevTools

### Implementation

- Always pair color with icon/text
- Use patterns for charts
- Test with simulators
- Get real user feedback

---

# 6. DESIGN TOKENS REFERENCE

---

## Token Categories Summary

| Category | Token Count | File Location |
|----------|-------------|---------------|
| Colors | 120+ | --color-* |
| Typography | 40+ | --font-*, --line-height-* |
| Spacing | 25+ | --space-* |
| Borders | 12+ | --border-*, --radius-* |
| Shadows | 12+ | --shadow-* |
| Animation | 15+ | --duration-*, --ease-* |
| Breakpoints | 10+ | --breakpoint-*, --container-* |
| Z-Index | 10 | --z-* |

## CSS Custom Properties File

All tokens are defined in:
**`/mnt/okcomputer/output/design-tokens.css`**

### Usage Example

```css
.my-button {
  background-color: var(--color-primary-600);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-colors);
}

.my-button:hover {
  background-color: var(--color-primary-700);
}

.my-button:focus-visible {
  box-shadow: var(--shadow-focus);
}
```

---

# APPENDIX

---

## A. Font Loading

```html
<!-- Google Fonts -->
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## B. Icon System

Recommended: **Lucide Icons**
- Open source (ISC license)
- Consistent style
- Good accessibility
- Tree-shakeable

## C. Resources

- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [Inclusive Design Principles](https://inclusivedesignprinciples.org/)
- [A11y Project Checklist](https://www.a11yproject.com/checklist/)
- [Color Contrast Checker](https://webaim.org/resources/contrastchecker/)

---

*Document Version: 1.0*
*Last Updated: 2024*
*License: MIT*