casino/frontend/styleguide.md

Casino Gaming Platform Style Guide

Color Palette

Primary Colors

• Deep Blue: #0a1219 (background)
• Deep Blue Light: #121e27 (secondary background)
• Deep Blue Contrast: #1a2835 (cards, elements)

Accent Colors

• Emerald: #10b981 (primary buttons)
• Emerald Dark: #059669 (button hover)
• Emerald Light: #34d399 (highlights)

Text Colors

• Primary Text: #ffffff (white)
• Secondary Text: #94a3b8 (light gray)
• Tertiary Text: #64748b (darker gray)

Additional Accents

• Yellow: #fbbf24
• Red: #ef4444
• Purple: #8b5cf6

Typography

Font Sizes

• Extra Small: Text-xs (footer disclaimers)
• Small: Text-sm (navigation links, footer links)
• Base: Text-base (general text)
• Large: Text-lg (section headings)
• Extra Large: Text-xl (stat numbers, game headings)
• Display: Text-4xl/5xl/7xl (welcome bonus text)

Font Weights

• Normal: General text
• Medium: Labels
• Semibold: Navigation brand
• Bold: Headings, stats
• Extrabold: Welcome bonus text

Components

Buttons

• Primary: Emerald background with hover state
• Secondary: Deep blue light background with hover state
• All buttons have active scale effect (95%)
• Transition duration: 200-300ms

Cards

• Background: Deep blue contrast
• Rounded corners (lg)
• Shadow effects with hover transition
• Consistent padding (p-4)

Navigation

• Desktop: Horizontal links with hover effects
• Mobile: Collapsible menu with toggle
• Links have color and background transitions

Modals

• Backdrop blur with dark overlay
• Card-style container with emerald focus rings
• Consistent form styling with transitions

Forms

Inputs

• Dark background with border
• Focus states with emerald accent
• Consistent padding and rounded corners
• Clear label positioning

Layout

Grid System

• Mobile-first responsive grid
• Breakpoints: sm, md, lg
• Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
• Consistent gap spacing (gap-4)

Spacing

• Consistent margin/padding scale
• Mobile-responsive spacing adjustments

Animation

• Transitions: 200-500ms duration
• Hover/active state animations
• Scale transformations (95-110%)
• Opacity transitions for navigation elements

Components & Classes

Common UI Elements

• .card - Base card container
• .button-primary - Main CTA buttons
• .button-secondary - Alternative action buttons
• .section-heading - Section titles
• .nav-link - Navigation links
• .modal-card - Modal container

Game Elements

• .game-card-content - Game information container
• .game-heading-sm - Small game titles
• .game-heading-xl - Large game titles
• .game-text - Game descriptions
• .slider-container - Game carousel container

Responsive Design

• Mobile-first approach
• Tailwind breakpoints (sm, md, lg)
• Different layouts based on screen size
• Responsive text sizing and spacing
• Hidden/visible elements using responsive classes

CSS Framework

• Tailwind CSS for utility classes
• Custom utility classes with @apply directive
• CSS variables for theming
• Component-based styling approach