blackcanyontickets/DESIGN_SYSTEM.md

Black Canyon Tickets - Design System

Overview

This design system implements a modern glassmorphism theme with a dark gradient background, creating a premium, upscale aesthetic suitable for high-end venues.

Color Palette

Primary Colors

• Blue: rgb(37, 99, 235) - Primary actions, focus states
• Purple: rgb(147, 51, 234) - Secondary actions, accents
• Indigo: rgb(67, 56, 202) - Background gradients
• Slate: rgb(51, 65, 85) - Background gradients

Status Colors

• Success: rgb(52, 211, 153) - Emerald-400
• Warning: rgb(251, 191, 36) - Yellow-400
• Error: rgb(248, 113, 113) - Red-400

Text Colors

• Primary: white - Main headings and content
• Secondary: rgba(255, 255, 255, 0.8) - Supporting text
• Tertiary: rgba(255, 255, 255, 0.6) - Helper text
• Accent: rgb(96, 165, 250) - Links and highlights

Typography

Font Weights

• Light: font-light - Large headings (text-4xl and above)
• Regular: Default - Body text
• Medium: font-medium - Navigation, buttons
• Semibold: font-semibold - Form labels, small headings
• Bold: font-bold - Emphasis elements

Font Sizes

• Hero: text-5xl lg:text-7xl - Homepage hero
• Page Title: text-4xl md:text-5xl - Main page headings
• Section: text-2xl - Section headings
• Subsection: text-xl - Subsection headings
• Body: text-base - Default body text
• Small: text-sm - Supporting text
• Tiny: text-xs - Captions, metadata

Layout Components

Background Pattern

.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

Animated Background Elements

• Floating orbs: Positioned at corners and center
• Gradient colors: Purple/pink, blue/cyan, indigo/purple
• Animation: animate-pulse for subtle movement
• Blur: blur-3xl for soft, ambient lighting

Container Patterns

• Page container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
• Content container: max-w-4xl mx-auto (forms, focused content)
• Narrow container: max-w-2xl mx-auto (scanners, simple layouts)

Glassmorphism Components

Card Styles

/* Basic glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Large glass card */
.glass-card-lg {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.15);
}

Button Styles

Primary Button (Gradient)

.gradient-button {
  background: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234));
  transition: all 0.3s ease;
}

.gradient-button:hover {
  background: linear-gradient(to right, rgb(29, 78, 216), rgb(126, 34, 206));
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3);
}

Secondary Button (Glass)

.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

Form Elements

.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgb(96, 165, 250);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
  outline: none;
}

Page-Specific Implementations

Dashboard

• Stats cards: Hover effects with scale and shadow
• Event cards: Glassmorphism with gradient badges
• Calendar view: Integrated glass design
• Navigation: Sticky with backdrop blur

Event Creation

• Form container: Large glass card with rounded corners
• Input fields: Consistent glass styling
• Section dividers: Subtle white borders
• Buttons: Gradient primary, glass secondary

Event Management

• Header section: Gradient background with stats
• Management tabs: Glass navigation with active states
• Content areas: Consistent glass containers
• Action buttons: Gradient styling with hover effects

Ticket Scanner

• Scanner interface: Centered glass card
• Camera overlay: Subtle frame with blue corners
• Results display: Color-coded status messages
• Navigation: Sticky glass navbar

Animations

Keyframes

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

Usage

• Page entry: animate-fadeInUp for content sections
• Navigation: animate-slideIn for menu items
• Floating elements: animate-float for decorative elements
• Hover effects: hover:scale-105 for interactive elements

Responsive Design

Breakpoints

• Mobile: sm: (640px+)
• Tablet: md: (768px+)
• Desktop: lg: (1024px+)
• Large Desktop: xl: (1280px+)

Mobile Optimizations

• Reduced blur effects for performance
• Simplified animations
• Touch-friendly button sizes
• Collapsed navigation patterns

Accessibility

Focus States

• Visible outlines: focus:ring-2 focus:ring-blue-400
• Color contrast: WCAG AA compliant
• Keyboard navigation: Full support
• Screen readers: Proper ARIA labels

High Contrast Mode

• Fallback colors: Maintained readability
• Border emphasis: Enhanced visibility
• Button states: Clear differentiation

Brand Guidelines

Logo Usage

• Secure areas: Subtle opacity (20%) in top corner
• Public areas: Full opacity in navigation
• Size: Consistent 48px height
• Spacing: Minimum 24px clearance

Voice & Tone

• Professional: Upscale, refined language
• Concise: Clear, direct messaging
• Welcoming: Approachable for users
• Confident: Authoritative but not intimidating

File Structure

src/
├── layouts/
│   ├── Layout.astro          # Base layout
│   └── SecureLayout.astro    # Glassmorphism layout
├── styles/
│   ├── global.css           # Global styles + imports
│   └── glassmorphism.css    # Design system utilities
├── components/
│   ├── Navigation.astro     # Consistent navigation
│   └── [other components]
└── pages/
    ├── index.astro          # Homepage (reference design)
    ├── calendar.astro       # Calendar (reference design)
    ├── dashboard.astro      # Dashboard implementation
    ├── events/
    │   ├── new.astro       # Event creation
    │   └── [id]/
    │       └── manage.astro # Event management
    └── scan.astro          # Ticket scanner

Usage Guidelines

New Pages

1. Use SecureLayout.astro for authenticated pages
2. Import glassmorphism utilities: @import './glassmorphism.css'
3. Follow container patterns for consistent spacing
4. Use established color and typography scales

New Components

1. Apply glass-card classes for containers
2. Use gradient-button for primary actions
3. Apply glass-input for form elements
4. Include hover states with scale effects

Maintenance

• Consistency: Regular design audits
• Performance: Monitor blur effects on mobile
• Accessibility: Test with screen readers
• Updates: Document any pattern changes

This design system creates a cohesive, premium experience that reflects the upscale nature of Black Canyon Tickets' target market while maintaining excellent usability and accessibility standards.