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:

gather-tix.org - Highly available, warm, memorable
openpass.io - Tech-forward, clear purpose
commonstix.org - Strong community message
eventkit.io - Practical, developer-friendly
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)

Welcoming - Like a friendly neighbor, not a corporate gatekeeper
Helpful - Anticipates needs, offers solutions proactively
Transparent - Clear about limitations, honest about capabilities
Empowering - Builds confidence, celebrates user success
Approachable - No jargon, no intimidation, human language
Reliable - Consistent, trustworthy, there when needed
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

Document Version: 1.0 Last Updated: 2024 License: MIT