# 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)