Initial commit - Black Canyon Tickets whitelabel platform
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
280
DESIGN_SYSTEM.md
Normal file
280
DESIGN_SYSTEM.md
Normal file
@@ -0,0 +1,280 @@
|
||||
# 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
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
/* 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)
|
||||
```css
|
||||
.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)
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
.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
|
||||
```css
|
||||
@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.
|
||||
Reference in New Issue
Block a user