csgowtf/docs/DESIGN.md

# CS2.WTF Design System

A modern, tactical design language inspired by Counter-Strike 2's in-game aesthetics.

---

## 🎨 Design Philosophy

### Core Principles

1. **Tactical & Data-Dense**: Inspired by CS2's HUD - information at a glance
2. **Dark-First**: Gaming-optimized dark theme as default
3. **Team Identity**: Leverage T-side (orange) and CT-side (blue) throughout
4. **Performance**: Smooth animations, no bloat
5. **Accessible**: WCAG 2.1 AA compliant

### Visual Language

- **Sharp Corners**: Minimal border radius (2-4px) for tactical feel
- **Neon Accents**: Subtle glows on interactive elements
- **Grid-Based**: 8px base unit for consistent spacing
- **Monospace Numbers**: Stats feel more tactical
- **Depth Through Layers**: Elevated cards with subtle shadows

---

## 🎨 Color Palette

### Brand Colors

```css
/* Primary (CT Blue) */
--ct-blue: #5e98d9;
--ct-blue-light: #7eaee5;
--ct-blue-dark: #4a7ab3;

/* Secondary (T Orange) */
--t-orange: #d4a74a;
--t-orange-light: #e5c674;
--t-orange-dark: #b38a3a;

/* Accent (Success Green) */
--accent-green: #36d399;
```

### Base Colors (Dark Theme)

```css
/* Backgrounds */
--bg-primary: #0f172a; /* Slate 900 - Main background */
--bg-secondary: #1e293b; /* Slate 800 - Card background */
--bg-tertiary: #334155; /* Slate 700 - Hover states */

/* Text */
--text-primary: #e2e8f0; /* Slate 200 - Main text */
--text-secondary: #94a3b8; /* Slate 400 - Muted text */
--text-tertiary: #64748b; /* Slate 500 - Disabled text */

/* Borders */
--border-default: #334155; /* Slate 700 */
--border-accent: #475569; /* Slate 600 - Hover */
```

### Semantic Colors

```css
/* Status */
--success: #36d399; /* Win, positive stats */
--warning: #fbbd23; /* Neutral, info */
--error: #f87272; /* Loss, negative stats */
--info: #3abff8; /* Information, CT-related */
```

---

## 📐 Typography

### Font Families

**Primary (UI Text):**

```css
font-family:
	'Inter',
	system-ui,
	-apple-system,
	sans-serif;
```

**Monospace (Stats & Numbers):**

```css
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
```

### Type Scale

```css
/* Display */
--text-6xl: 3.75rem; /* 60px - Hero headings */
--text-5xl: 3rem; /* 48px - Page titles */
--text-4xl: 2.25rem; /* 36px - Section headers */

/* Headings */
--text-3xl: 1.875rem; /* 30px - Card titles */
--text-2xl: 1.5rem; /* 24px - Subsection headers */
--text-xl: 1.25rem; /* 20px - Large body */

/* Body */
--text-lg: 1.125rem; /* 18px - Prominent text */
--text-base: 1rem; /* 16px - Default body */
--text-sm: 0.875rem; /* 14px - Small text */
--text-xs: 0.75rem; /* 12px - Captions */
```

### Font Weights

```css
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

---

## 🏗️ Layout

### Spacing System (8px Grid)

```css
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
```

### Container Widths

```css
--container-sm: 640px; /* Mobile landscape */
--container-md: 768px; /* Tablet */
--container-lg: 1024px; /* Desktop */
--container-xl: 1280px; /* Large desktop */
--container-2xl: 1536px; /* Extra large */
```

### Breakpoints

```css
/* Mobile first approach */
sm: 640px   /* Tablet */
md: 768px   /* Small desktop */
lg: 1024px  /* Desktop */
xl: 1280px  /* Large desktop */
2xl: 1536px /* Extra large */
```

---

## 🎭 Components

### Cards

**Default Card:**

```css
background: var(--bg-secondary);
border: 1px solid var(--border-default);
border-radius: 4px;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
```

**Elevated Card:**

```css
box-shadow:
	0 10px 15px -3px rgb(0 0 0 / 0.2),
	0 4px 6px -4px rgb(0 0 0 / 0.1);
```

**Interactive Card (Hover):**

```css
transition: all 0.2s ease;

&:hover {
	border-color: var(--ct-blue);
	box-shadow: 0 0 0 2px rgb(94 152 217 / 0.2);
	transform: translateY(-2px);
}
```

### Buttons

**Primary (CT Blue):**

```css
background: var(--ct-blue);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: 600;
transition: all 0.2s;

&:hover {
	background: var(--ct-blue-dark);
	box-shadow: 0 0 20px rgb(94 152 217 / 0.3);
}
```

**Secondary (T Orange):**

```css
background: var(--t-orange);
color: white;
/* Similar styling */
```

**Ghost:**

```css
background: transparent;
border: 1px solid var(--border-default);
color: var(--text-primary);

&:hover {
	background: var(--bg-tertiary);
	border-color: var(--ct-blue);
}
```

### Badges

**Team Badge:**

```css
/* T-Side */
background: rgb(212 167 74 / 0.1);
color: var(--t-orange-light);
border: 1px solid var(--t-orange-dark);

/* CT-Side */
background: rgb(94 152 217 / 0.1);
color: var(--ct-blue-light);
border: 1px solid var(--ct-blue-dark);
```

**Status Badge:**

```css
/* Win */
background: rgb(54 211 153 / 0.1);
color: var(--success);

/* Loss */
background: rgb(248 114 114 / 0.1);
color: var(--error);
```

---

## 🌊 Animations

### Transitions

```css
/* Standard */
transition: all 0.2s ease;

/* Slow */
transition: all 0.3s ease;

/* Fast */
transition: all 0.15s ease;
```

### Keyframes

**Fade In:**

```css
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
```

**Pulse (Live Indicator):**

```css
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
```

**Glow:**

```css
@keyframes glow {
	0%,
	100% {
		box-shadow: 0 0 10px rgb(94 152 217 / 0.3);
	}
	50% {
		box-shadow: 0 0 20px rgb(94 152 217 / 0.5);
	}
}
```

---

## 🎯 Iconography

**Icon Library:** Lucide Icons (clean, modern, consistent)

**Icon Sizes:**

```css
--icon-xs: 16px;
--icon-sm: 20px;
--icon-md: 24px;
--icon-lg: 32px;
--icon-xl: 48px;
```

**Icon Colors:**

- Default: `text-slate-400`
- Active: `text-primary` or `text-secondary`
- Success: `text-success`
- Error: `text-error`

---

## 📊 Data Visualization

### Chart Colors

**Team Performance:**

- T-Side: `#d4a74a`
- CT-Side: `#5e98d9`

**Heatmaps:**

- Low: `#334155` (Slate 700)
- Medium: `#f59e0b` (Amber 500)
- High: `#ef4444` (Red 500)

**Line Charts:**

- Primary line: `#5e98d9`
- Secondary line: `#d4a74a`
- Grid: `rgb(51 65 85 / 0.3)`

### Tables

**Header:**

```css
background: var(--bg-primary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--text-secondary);
```

**Row:**

```css
border-bottom: 1px solid var(--border-default);

&:hover {
	background: var(--bg-tertiary);
}
```

**Stats (Numbers):**

```css
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
```

---

## ♿ Accessibility

### Focus States

```css
&:focus-visible {
	outline: 2px solid var(--ct-blue);
	outline-offset: 2px;
}
```

### Color Contrast

- Text on dark bg: Minimum 4.5:1 (WCAG AA)
- Large text: Minimum 3:1
- UI components: Minimum 3:1

### Motion

```css
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}
```

---

## 🎮 CS2-Specific Elements

### Rank Display

- Show Premier rating (0-30,000) with color coding
- Bronze: `#cd7f32`
- Silver: `#c0c0c0`
- Gold: `#ffd700`
- Legend: `#9b59b6`

### Map Thumbnails

- 16:9 aspect ratio
- Slight overlay gradient (bottom to top)
- Map name in bottom-left corner

### Weapon Icons

- Monochrome with subtle glow
- Size: 32x32px default
- Color: Match rarity (Consumer White, Mil-Spec Blue, etc.)

### Kill Feed

```css
.kill-feed-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	background: rgb(15 23 42 / 0.9);
	border-left: 2px solid var(--t-orange);
}
```

---

## 📱 Responsive Design

### Mobile (< 768px)

- Stack layouts vertically
- Reduce padding/spacing by 25%
- Hide secondary information
- Larger tap targets (min 44x44px)
- Bottom navigation for main actions

### Tablet (768px - 1024px)

- Two-column layouts
- Collapsible sidebar
- Touch-optimized interactions

### Desktop (> 1024px)

- Three-column layouts where appropriate
- Hover states and tooltips
- Keyboard shortcuts
- Dense data tables

---

## 🎨 Example Compositions

### Hero Section (Homepage)

```
┌─────────────────────────────────────────┐
│                                         │
│         CS2.WTF (Large Logo)            │
│    Statistics for CS2 Matches           │
│                                         │
│  [Search Match]  [Browse Players]       │
│                                         │
│  Featured Matches (Carousel) ────>      │
│                                         │
└─────────────────────────────────────────┘
```

### Match Card

```
┌─────────────────────────────────────┐
│ de_inferno          13 - 10  LIVE  │
│ ─────────────────────────────────── │
│ 👤 Player1  24K 18D     ⭐⭐⭐      │
│ 👤 Player2  21K 20D     ⭐⭐        │
│ ...                                 │
│ ─────────────────────────────────── │
│ 📅 2 hours ago   ⏱️ 42:33          │
└─────────────────────────────────────┘
```

### Stats Table

```
┌──────────────────────────────────────────────┐
│ PLAYER      K   D   A   HS%  ADR   RATING   │
├──────────────────────────────────────────────┤
│ 👤 Player1  24  18  6   50%  98   1.32  🥇  │
│ 👤 Player2  21  20  8   48%  87   1.12      │
│ 👤 Player3  19  22  5   44%  82   0.98      │
└──────────────────────────────────────────────┘
```

---

## 🚀 Performance Guidelines

- Lazy load images and charts
- Use CSS transforms for animations (GPU-accelerated)
- Debounce search inputs (300ms)
- Virtual scrolling for large tables (> 100 rows)
- Optimize bundle size (< 200KB initial)

---

## 📝 Naming Conventions

### CSS Classes

```css
/* Component */
.match-card {
}

/* Element */
.match-card__header {
}

/* Modifier */
.match-card--featured {
}

/* State */
.match-card.is-active {
}
```

### Tailwind Utilities

Prefer utility classes for spacing, colors, and common patterns:

```html
<div class="rounded-lg bg-base-200 p-6 shadow-lg"></div>
```

---

**Last Updated**: 2025-11-04
**Status**: Active Development