mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-27 16:47:00 -05:00
feat: Add blog, media, and support apps, implement ride credits and image API, and remove toplist feature.
This commit is contained in:
pacnpal
495
source_docs/DESIGN_SYSTEM.md
Normal file
495
source_docs/DESIGN_SYSTEM.md
Normal file
@@ -0,0 +1,495 @@
|
||||
# ThrillWiki Design System
|
||||
|
||||
> Visual identity, colors, typography, and styling guidelines
|
||||
|
||||
---
|
||||
|
||||
## Brand Identity
|
||||
|
||||
### Logo & Name
|
||||
- **Name**: ThrillWiki (with optional "(Beta)" suffix)
|
||||
- **Tagline**: The Ultimate Theme Park Database
|
||||
- **Personality**: Enthusiastic, trustworthy, community-driven
|
||||
|
||||
### Visual Style
|
||||
- Modern and clean
|
||||
- Subtle gradients and glow effects
|
||||
- Smooth animations
|
||||
- Card-based layouts
|
||||
- Generous whitespace
|
||||
|
||||
---
|
||||
|
||||
## Color System
|
||||
|
||||
### Light Mode Palette
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ LIGHT MODE │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Background Foreground Primary │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ White │ │ Dark │ │ Blue │ │
|
||||
│ │ #FFFFFF │ │ #1A1A2E │ │ #3B82F6 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
│ Secondary Muted Accent │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ Light │ │ Gray │ │ Cyan │ │
|
||||
│ │ Gray │ │ Text │ │ Glow │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Dark Mode Palette
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ DARK MODE │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Background Foreground Primary │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │░░░░░░░░░░│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
|
||||
│ │░ Dark ░░│ │ Light │ │▓ Blue ▓▓│ │
|
||||
│ │░ Navy ░░│ │ Gray │ │▓ Glow ▓▓│ │
|
||||
│ │░░░░░░░░░░│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
│ Secondary Muted Accent │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │▒▒▒▒▒▒▒▒▒▒│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
|
||||
│ │▒ Slate ▒▒│ │ Muted │ │▓ Cyan ▓▓│ │
|
||||
│ │▒ Blue ▒▒│ │ Gray │ │▓ Accent▓▓│ │
|
||||
│ │▒▒▒▒▒▒▒▒▒▒│ │ │ │▓▓▓▓▓▓▓▓▓▓│ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
| Token | Purpose | Light | Dark |
|
||||
|-------|---------|-------|------|
|
||||
| `--background` | Page background | White | Dark navy |
|
||||
| `--foreground` | Primary text | Dark gray | Light gray |
|
||||
| `--primary` | Buttons, links | Blue | Blue |
|
||||
| `--secondary` | Secondary UI | Light gray | Slate |
|
||||
| `--muted` | Disabled, hints | Gray | Muted gray |
|
||||
| `--accent` | Highlights | Cyan | Cyan |
|
||||
| `--destructive` | Errors, delete | Red | Red |
|
||||
| `--success` | Confirmations | Green | Green |
|
||||
| `--warning` | Alerts | Amber | Amber |
|
||||
|
||||
### Gradients
|
||||
|
||||
| Name | Usage |
|
||||
|------|-------|
|
||||
| Primary Gradient | Hero sections, featured cards |
|
||||
| Glow Effect | Hover states, focus rings |
|
||||
| Subtle Gradient | Backgrounds, depth |
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
```
|
||||
Primary Font: Inter (Sans-Serif)
|
||||
├── Weights: 400, 500, 600, 700
|
||||
├── Used for: All UI text
|
||||
└── Fallback: system-ui, sans-serif
|
||||
```
|
||||
|
||||
### Type Scale
|
||||
|
||||
| Size | Name | Usage |
|
||||
|------|------|-------|
|
||||
| 48px | Display | Hero headlines |
|
||||
| 36px | H1 | Page titles |
|
||||
| 30px | H2 | Section headers |
|
||||
| 24px | H3 | Card titles |
|
||||
| 20px | H4 | Subheadings |
|
||||
| 16px | Body | Default text |
|
||||
| 14px | Small | Secondary text |
|
||||
| 12px | Caption | Labels, hints |
|
||||
|
||||
### Text Styles
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ HEADING STYLES │
|
||||
├────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Page Title │
|
||||
│ ══════════════════════ │
|
||||
│ 36px · Bold · Foreground │
|
||||
│ │
|
||||
│ Section Header │
|
||||
│ ──────────────── │
|
||||
│ 24px · Semibold · Foreground │
|
||||
│ │
|
||||
│ Card Title │
|
||||
│ 18px · Medium · Foreground │
|
||||
│ │
|
||||
│ Body Text │
|
||||
│ 16px · Regular · Muted Foreground │
|
||||
│ │
|
||||
│ Caption │
|
||||
│ 12px · Regular · Muted │
|
||||
│ │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spacing System
|
||||
|
||||
### Base Unit
|
||||
- 4px base unit
|
||||
- All spacing is multiples of 4
|
||||
|
||||
### Spacing Scale
|
||||
|
||||
| Token | Size | Common Usage |
|
||||
|-------|------|--------------|
|
||||
| `space-1` | 4px | Tight gaps |
|
||||
| `space-2` | 8px | Icon gaps |
|
||||
| `space-3` | 12px | Small padding |
|
||||
| `space-4` | 16px | Default padding |
|
||||
| `space-6` | 24px | Section gaps |
|
||||
| `space-8` | 32px | Large gaps |
|
||||
| `space-12` | 48px | Section margins |
|
||||
| `space-16` | 64px | Page sections |
|
||||
|
||||
---
|
||||
|
||||
## Border Radius
|
||||
|
||||
| Token | Size | Usage |
|
||||
|-------|------|-------|
|
||||
| `rounded-sm` | 4px | Small elements |
|
||||
| `rounded` | 8px | Buttons, inputs |
|
||||
| `rounded-lg` | 12px | Cards |
|
||||
| `rounded-xl` | 16px | Large cards |
|
||||
| `rounded-full` | 9999px | Pills, avatars |
|
||||
|
||||
---
|
||||
|
||||
## Shadows
|
||||
|
||||
### Light Mode Shadows
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ SHADOW LEVELS │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────┐ Shadow-sm │
|
||||
│ │ │ Subtle, close │
|
||||
│ │ Card │ │
|
||||
│ │ │ │
|
||||
│ └───────────────┘ │
|
||||
│ ░░░░░░░░░░░░░░░ │
|
||||
│ │
|
||||
│ ┌───────────────┐ Shadow-md │
|
||||
│ │ │ Default cards │
|
||||
│ │ Card │ │
|
||||
│ │ │ │
|
||||
│ └───────────────┘ │
|
||||
│ ░░░░░░░░░░░░░░░░░ │
|
||||
│ │
|
||||
│ ┌───────────────┐ Shadow-lg │
|
||||
│ │ │ Elevated, modals │
|
||||
│ │ Card │ │
|
||||
│ │ │ │
|
||||
│ └───────────────┘ │
|
||||
│ ░░░░░░░░░░░░░░░░░░░ │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Glow Effects (Dark Mode)
|
||||
|
||||
| Effect | Usage |
|
||||
|--------|-------|
|
||||
| Primary Glow | Focused inputs, active buttons |
|
||||
| Accent Glow | Hover states on cards |
|
||||
| Subtle Glow | Background depth |
|
||||
|
||||
---
|
||||
|
||||
## Animation
|
||||
|
||||
### Timing Functions
|
||||
|
||||
| Name | Curve | Usage |
|
||||
|------|-------|-------|
|
||||
| `ease-smooth` | cubic-bezier(0.4, 0, 0.2, 1) | Most transitions |
|
||||
| `ease-bounce` | cubic-bezier(0.68, -0.55, 0.265, 1.55) | Playful elements |
|
||||
| `ease-out` | cubic-bezier(0, 0, 0.2, 1) | Exits |
|
||||
|
||||
### Duration
|
||||
|
||||
| Speed | Duration | Usage |
|
||||
|-------|----------|-------|
|
||||
| Fast | 150ms | Hover states |
|
||||
| Normal | 200ms | Default transitions |
|
||||
| Slow | 300ms | Page transitions |
|
||||
| Slower | 500ms | Complex animations |
|
||||
|
||||
### Common Animations
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ ANIMATION PATTERNS │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Fade In │
|
||||
│ ┌───┐ → ┌───┐ → ┌───┐ │
|
||||
│ │ ░ │ │ ▒ │ │ █ │ │
|
||||
│ └───┘ └───┘ └───┘ │
|
||||
│ 0% 50% 100% │
|
||||
│ │
|
||||
│ Slide Up │
|
||||
│ ┌───┐ │
|
||||
│ │ │ ↑ │
|
||||
│ └───┘ │
|
||||
│ ↑ │
|
||||
│ ┌───┐ │
|
||||
│ │ █ │ │
|
||||
│ └───┘ │
|
||||
│ │
|
||||
│ Scale │
|
||||
│ ┌─┐ → ┌───┐ → ┌─────┐ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ └─┘ └───┘ └─────┘ │
|
||||
│ 95% 100% 100% │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Components Overview
|
||||
|
||||
### Button Variants
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ BUTTON STYLES │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌────────────┐ Primary (Default) │
|
||||
│ │ Button │ Blue background, white text │
|
||||
│ └────────────┘ │
|
||||
│ │
|
||||
│ ┌────────────┐ Secondary │
|
||||
│ │ Button │ Gray background, dark text │
|
||||
│ └────────────┘ │
|
||||
│ │
|
||||
│ ┌────────────┐ Outline │
|
||||
│ │ Button │ Border only, transparent background │
|
||||
│ └────────────┘ │
|
||||
│ │
|
||||
│ ┌────────────┐ Ghost │
|
||||
│ │ Button │ No border, transparent background │
|
||||
│ └────────────┘ │
|
||||
│ │
|
||||
│ ┌────────────┐ Destructive │
|
||||
│ │ Delete │ Red background, for dangerous actions │
|
||||
│ └────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Card Styles
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ CARD VARIANTS │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────┐ Default Card │
|
||||
│ │ │ White/dark background │
|
||||
│ │ Content goes here │ Subtle border │
|
||||
│ │ │ Rounded corners │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────┐ Interactive Card │
|
||||
│ │ ┌─────────────────────┐ │ Hover effect │
|
||||
│ │ │ Image │ │ Cursor pointer │
|
||||
│ │ └─────────────────────┘ │ Scale on hover │
|
||||
│ │ Title │ │
|
||||
│ │ Description │ │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────┐ Glass Card (Dark Mode) │
|
||||
│ │░░░░░░░░░░░░░░░░░░░░░░░░░│ Semi-transparent │
|
||||
│ │░ Frosted glass effect ░░│ Backdrop blur │
|
||||
│ │░░░░░░░░░░░░░░░░░░░░░░░░░│ Subtle glow │
|
||||
│ └─────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Input States
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ INPUT STATES │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Default │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Placeholder text... │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Focused │
|
||||
│ ╔═════════════════════════════════════╗ ← Primary ring │
|
||||
│ ║ Input text ║ │
|
||||
│ ╚═════════════════════════════════════╝ │
|
||||
│ │
|
||||
│ Error │
|
||||
│ ┌─────────────────────────────────────┐ ← Red border │
|
||||
│ │ Invalid input │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ ⚠ Error message appears here │
|
||||
│ │
|
||||
│ Disabled │
|
||||
│ ┌─────────────────────────────────────┐ ← Muted colors │
|
||||
│ │ Cannot edit │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Layout Patterns
|
||||
|
||||
### Page Layout
|
||||
|
||||
```
|
||||
┌───────────────────────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
│ Logo Navigation Search User Menu │
|
||||
├───────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ MAIN CONTENT │ │
|
||||
│ │ │ │
|
||||
│ │ Max Width: 1280px │ │
|
||||
│ │ Padding: 16-24px (responsive) │ │
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
├───────────────────────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
│ Links Social Copyright │
|
||||
└───────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Grid System
|
||||
|
||||
```
|
||||
Desktop (1024px+) Tablet (768px+) Mobile (<768px)
|
||||
┌───┬───┬───┬───┐ ┌────┬────┐ ┌────────┐
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ 1 │ 2 │ 3 │ 4 │ │ 1 │ 2 │ │ 1 │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
├───┼───┼───┼───┤ ├────┼────┤ ├────────┤
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ 5 │ 6 │ 7 │ 8 │ │ 3 │ 4 │ │ 2 │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
└───┴───┴───┴───┘ └────┴────┘ └────────┘
|
||||
4 columns 2 columns 1 column
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Icons
|
||||
|
||||
### Icon Library
|
||||
- **Lucide React** - Primary icon set
|
||||
- Consistent 24px default size
|
||||
- 1.5px stroke width
|
||||
- Matches text color by default
|
||||
|
||||
### Common Icons
|
||||
|
||||
| Icon | Usage |
|
||||
|------|-------|
|
||||
| Search | Search functionality |
|
||||
| Menu | Mobile navigation |
|
||||
| User | Profile, account |
|
||||
| Heart | Favorites, likes |
|
||||
| Star | Ratings, reviews |
|
||||
| Map Pin | Location features |
|
||||
| Calendar | Dates, schedules |
|
||||
| Camera | Photo uploads |
|
||||
| Edit | Edit actions |
|
||||
| Trash | Delete actions |
|
||||
| Check | Success, completion |
|
||||
| X | Close, cancel |
|
||||
| ChevronRight | Navigation, expand |
|
||||
| ExternalLink | External links |
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
| Breakpoint | Width | Target |
|
||||
|------------|-------|--------|
|
||||
| `sm` | 640px | Large phones |
|
||||
| `md` | 768px | Tablets |
|
||||
| `lg` | 1024px | Small laptops |
|
||||
| `xl` | 1280px | Desktops |
|
||||
| `2xl` | 1536px | Large screens |
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Guidelines
|
||||
|
||||
### Color Contrast
|
||||
- Normal text: 4.5:1 minimum
|
||||
- Large text: 3:1 minimum
|
||||
- Interactive elements: 3:1 minimum
|
||||
|
||||
### Focus States
|
||||
- Visible focus ring on all interactive elements
|
||||
- Primary color ring (2px offset)
|
||||
- Never remove focus outlines
|
||||
|
||||
### Motion
|
||||
- Respect `prefers-reduced-motion`
|
||||
- Provide alternatives for animations
|
||||
- No auto-playing videos
|
||||
|
||||
---
|
||||
|
||||
## Dark Mode Considerations
|
||||
|
||||
1. **Reduce contrast** - Pure white (#FFF) is too harsh; use off-white
|
||||
2. **Elevate with lightness** - Higher elements are slightly lighter
|
||||
3. **Subtle borders** - Use semi-transparent borders
|
||||
4. **Glow effects** - Replace shadows with subtle glows
|
||||
5. **Image dimming** - Slightly reduce image brightness
|
||||
|
||||
---
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- [Site Overview](./SITE_OVERVIEW.md)
|
||||
- [Pages Guide](./PAGES.md)
|
||||
- [Components](./COMPONENTS.md)
|
||||
- [User Flows](./USER_FLOWS.md)
|
||||
Reference in New Issue
Block a user