generated from Nicholai/astro-template
238 lines
8.6 KiB
Markdown
238 lines
8.6 KiB
Markdown
|
|
## Color Palette
|
|
|
|
## Typography
|
|
|
|
### Font Families
|
|
|
|
#### Primary Fonts
|
|
- **Inter** - Body text, primary sans-serif (weights: 300, 400, 500, 600)
|
|
- **Oswald** - Headlines, brand font, uppercase display text (weights: 400, 500, 600)
|
|
|
|
#### Extended Font Library (Available but not actively used)
|
|
The page loads 20+ Google Fonts for maximum flexibility:
|
|
- Sans-serif: Geist, Roboto, Montserrat, Poppins, Bricolage Grotesque, Plus Jakarta Sans, Manrope, Space Grotesk, Work Sans, DM Sans, Quicksand, Nunito, Google Sans Flex
|
|
- Serif: Playfair Display, Instrument Serif, Merriweather, PT Serif, Newsreader
|
|
- Monospace: Geist Mono, Space Mono
|
|
|
|
### Type Scale
|
|
- **7xl-8xl** (`4.5rem` - `6rem`) - Hero headlines ("PLAY WONDER")
|
|
- **4xl-5xl** (`2.25rem` - `3rem`) - Section headings
|
|
- **3xl-4xl** (`1.875rem` - `2.25rem`) - Card titles, subsection headings
|
|
- **2xl** (`1.5rem`) - Secondary headings
|
|
- **xl** (`1.25rem`) - Large body text
|
|
- **lg** (`1.125rem`) - Emphasized body text
|
|
- **base** (`1rem`) - Standard body text
|
|
- **sm** (`0.875rem`) - Small text, labels
|
|
- **xs** (`0.75rem`) - Micro copy, metadata
|
|
|
|
### Font Weights
|
|
- **Light (300)** - Subtle descriptive text
|
|
- **Regular (400)** - Body text
|
|
- **Medium (500)** - Emphasized text
|
|
- **Semibold (600)** - Strong emphasis
|
|
- **Bold (700)** - Headlines, CTAs
|
|
|
|
### Typography Utilities
|
|
- **Tracking**: `tracking-tighter` (-0.05em), `tracking-tight` (-0.025em), `tracking-wide` (0.025em), `tracking-wider` (0.05em), `tracking-widest` (0.1em)
|
|
- **Leading**: `leading-tight` (1.25), `leading-[1.1]`, `leading-[0.85]`, `leading-none` (1), `leading-relaxed` (1.625)
|
|
- **Transform**: `uppercase` for labels and category tags
|
|
|
|
## Layout System
|
|
|
|
### Grid Structure
|
|
The page uses a 12-column responsive grid:
|
|
- **Hero Section**: `lg:grid-cols-12` split into 4-8 columns (sidebar + main visual)
|
|
- **Content Sections**: `md:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4`
|
|
- **Bento Grid**: Asymmetric layout with `col-span-1`, `col-span-2`, `row-span-2` variations
|
|
|
|
### Spacing Scale (Tailwind)
|
|
- **Small**: `gap-1` (0.25rem), `gap-2` (0.5rem), `gap-3` (0.75rem)
|
|
- **Medium**: `gap-4` (1rem), `gap-6` (1.5rem), `gap-8` (2rem)
|
|
- **Large**: `gap-12` (3rem), `gap-16` (4rem)
|
|
- **Padding**: Consistent use of `p-8`, `p-12`, `px-6`, `py-24` for sections
|
|
|
|
### Container
|
|
- **Max Width**: `max-w-7xl` (80rem) centered with `mx-auto`
|
|
- **Horizontal Padding**: `px-6` mobile, `lg:px-12` desktop
|
|
|
|
## Design Patterns
|
|
|
|
### Navigation
|
|
- **Hamburger Menu**: Minimalist top-left icon with dropdown
|
|
- **Dropdown Menu**: Rounded corners (`rounded-2xl`), shadow (`shadow-[0_8px_30px_rgb(0,0,0,0.12)]`), clean white card
|
|
- **Menu Items**: Hover states with `hover:bg-blue-50/50`, icon + text layout
|
|
|
|
### Cards & Components
|
|
|
|
### Buttons
|
|
|
|
#### Primary CTA
|
|
- Background: `bg-blue-700/50`, `hover:bg-blue-700`
|
|
- Shape: `rounded-full`, `px-6 py-3`
|
|
- Text: Uppercase, `tracking-wide`, white with arrow icon
|
|
|
|
#### Icon Buttons
|
|
- Shape: `rounded-full`, `w-10 h-10`
|
|
- Border: `border border-blue-400`
|
|
- Hover: `hover:bg-blue-500`
|
|
|
|
#### Secondary Links
|
|
- Style: Underlined text with `border-b`
|
|
- Hover: `hover:border-white`, `hover:opacity-75`
|
|
|
|
### Decorative Elements
|
|
|
|
#### Abstract Shapes
|
|
- **Blurred Blobs**: `blur-3xl`, `opacity-20`, `mix-blend-multiply`, animated
|
|
- **Background Patterns**: Radial gradient dots (`bg-[radial-gradient(circle,transparent_20%,#eff6ff_20%)]`)
|
|
- **Typography Overlay**: Giant "GAME" text with `mix-blend-multiply`, `opacity-10`
|
|
|
|
#### Borders & Dividers
|
|
- **Subtle Lines**: `h-0.5 w-12`, `h-px`, `w-px` for accent lines
|
|
- **Border Colors**: `border-gray-100`, `border-blue-500/20`, `border-white/30` (with transparency)
|
|
|
|
## Animations
|
|
|
|
### Keyframe Animations
|
|
```css
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
|
|
```
|
|
|
|
### Animation Classes
|
|
- **Fade In**: `animate-fade-in` - 0.8s ease-out
|
|
- **Slide In**: `animate-slide-in` - 0.8s cubic-bezier(0.16, 1, 0.3, 1)
|
|
- **Blur In**: `animate-blur-in` - 1s ease-out
|
|
|
|
### Delay Classes
|
|
- `delay-75` (75ms), `delay-100` (100ms), `delay-150` (150ms)
|
|
- `delay-200` (200ms), `delay-300` (300ms), `delay-500` (500ms), `delay-700` (700ms)
|
|
|
|
### Transition Effects
|
|
- **All Properties**: `transition-all duration-500 ease-out`
|
|
- **Colors**: `transition-colors`
|
|
- **Transform**: `transition-transform`
|
|
- **Opacity**: `transition-opacity`
|
|
|
|
### Hover Animations
|
|
- **Scale**: `hover:scale-110`, `group-hover:scale-105`
|
|
- **Translate**: `group-hover:translate-x-1`
|
|
- **Color Shift**: Text and background color changes on hover
|
|
|
|
## Visual Effects
|
|
|
|
### Shadows
|
|
- **Card Shadows**: `shadow-xl`, `shadow-2xl`
|
|
- **Custom Shadow**: `shadow-[0_8px_30px_rgb(0,0,0,0.12)]`
|
|
- **Inner Shadow**: `shadow-inner` for recessed elements
|
|
|
|
### Backdrop Effects
|
|
- **Blur**: `backdrop-blur-sm`, `backdrop-blur-md` for glass morphism
|
|
- **Background Opacity**: `bg-white/40`, `bg-white/50`, `bg-gray-200/30`
|
|
|
|
### Blend Modes
|
|
- **Multiply**: `mix-blend-multiply` for layered effects
|
|
- **Opacity Variations**: `opacity-10`, `opacity-20`, `opacity-50`, `opacity-80`
|
|
|
|
### Border Radius
|
|
- **Small**: `rounded-md` (0.375rem), `rounded-lg` (0.5rem), `rounded-xl` (0.75rem)
|
|
- **Large**: `rounded-2xl` (1rem), `rounded-3xl` (1.5rem)
|
|
- **Custom**: `rounded-[2.5rem]`, `rounded-[3rem]`
|
|
- **Full**: `rounded-full` for circles and pills
|
|
|
|
## Iconography
|
|
|
|
### Icon Library
|
|
**Lucide Icons** - Consistent stroke-based icon system
|
|
- Stroke width: `1.5`
|
|
- Common sizes: `w-4 h-4` (small), `w-5 h-5` (medium), `w-6 h-6` (large), `w-8 h-8` (XL)
|
|
|
|
### Icon Categories
|
|
- **Navigation**: menu, arrow-left, arrow-right, home
|
|
- **Gaming**: gamepad-2, zap, shapes, rocket, sword, shield
|
|
- **Shopping**: shopping-bag
|
|
- **UI**: settings, trophy, crown, layers
|
|
|
|
## Section Breakdowns
|
|
|
|
### 1. Hero Section
|
|
- **Layout**: Split-screen (4-8 column grid)
|
|
- **Left**: White sidebar with navigation, headline, category selector
|
|
- **Right**: Slate-50 background with abstract shapes and background image
|
|
- **Typography Overlay**: Massive "GAME" text at `text-[40rem]`
|
|
- **Animation**: Staggered fade-in and slide-in effects
|
|
|
|
### 2. Section 2
|
|
- **Background**: `bg-blue-600`
|
|
- **Container**: `bg-blue-700`, rounded top corners
|
|
- **Layout**: Asymmetric grid - 1 large (2x2), 4 medium (1x1)
|
|
- **Featured Card**: gradient background, icon, title, CTA
|
|
- **Image Cards**: Full-bleed background images with text overlay
|
|
|
|
### 3. Featured Categories
|
|
- **Background**: `bg-gray-700` with animated gradient blobs
|
|
- **Cards**: Icon + text, hover scale effect
|
|
- **Decorative**: Purple and blue blurred circles with `mix-blend-multiply`
|
|
|
|
### 4. Section 4
|
|
- **Layout**: 1-3 column split (text + logo grid)
|
|
- **Logo Grid**: 4x2 grid with borders, hover states
|
|
- **Style**: Icons as placeholder logos, consistent spacing with gaps
|
|
|
|
### 5. Section 5
|
|
- **Layout**: 2-column (image + text)
|
|
- **Left**: Postage stamp effect with radial gradient pattern
|
|
- **Right**: `bg-blue-700` with metadata, title, navigation dots
|
|
|
|
## Responsive Behavior
|
|
|
|
### Breakpoints
|
|
- **Mobile**: Default styles (< 768px)
|
|
- **Tablet**: `md:` prefix (≥ 768px)
|
|
- **Desktop**: `lg:` prefix (≥ 1024px)
|
|
|
|
### Mobile Adaptations
|
|
- Single column layouts (`grid-cols-1`)
|
|
- Smaller padding (`p-8` → `lg:p-12`)
|
|
- Reduced text sizes (`text-7xl` → `lg:text-8xl`)
|
|
- Stacked flex layouts (`flex-col` → `md:flex-row`)
|
|
|
|
## Accessibility Features
|
|
|
|
### Text Contrast
|
|
- White text on blue 600+ backgrounds
|
|
- Dark slate text on white/light backgrounds
|
|
- Semi-transparent overlays on images ensure readability
|
|
|
|
### Interactive Elements
|
|
- Focus states: `focus:outline-none focus:ring-2 focus:ring-blue-100`
|
|
- Cursor indicators: `cursor-pointer` on interactive elements
|
|
- Clear hover states with color/opacity changes
|
|
|
|
### Selection Styling
|
|
```css
|
|
selection:bg-pink-500 selection:text-white
|
|
```
|
|
|
|
## Design Philosophy
|
|
|
|
The design follows modern web trends:
|
|
1. **Bold Typography**: Large, tight headlines with uppercase treatments
|
|
2. **Vibrant Colors**: Saturated blues and oranges with high contrast
|
|
3. **Smooth Animations**: Subtle entrance effects and hover states
|
|
4. **Card-Based Layout**: Bento grid asymmetry creates visual interest
|
|
5. **Glass Morphism**: Backdrop blur and transparency effects
|
|
6. **3D Touches**: Phone mockup rotation, layered shadows
|
|
7. **Minimalist UI**: Clean icons, simple buttons, generous whitespace
|
|
|
|
## Technical Implementation
|
|
|
|
- **Framework**: Astro with Tailwind CSS
|
|
- **CDN Resources**: Tailwind CDN, Google Fonts CDN, Lucide icons CDN
|
|
- **Image Hosting**: Supabase storage for background images
|
|
- **Optimization**: AVIF/WebP images, lazy loading implied
|
|
- **Responsive Images**: Multiple resolutions (800w, 1600w)
|
|
|