mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-27 17:27:01 -05:00
25 KiB
25 KiB
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
- Reduce contrast - Pure white (#FFF) is too harsh; use off-white
- Elevate with lightness - Higher elements are slightly lighter
- Subtle borders - Use semi-transparent borders
- Glow effects - Replace shadows with subtle glows
- Image dimming - Slightly reduce image brightness