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

--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

--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

: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

@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

.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

<!-- 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
• Inclusive Design Principles
• A11y Project Checklist
• Color Contrast Checker

---

Document Version: 1.0 Last Updated: 2024 License: MIT