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

/* 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)

/* 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

/* 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):

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

Monospace (Stats & Numbers):

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

Type Scale

/* 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

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

---

🏗️ Layout

Spacing System (8px Grid)

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

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

Breakpoints

/* 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:

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:

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

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

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

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

Ghost:

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:

/* 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:

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

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

---

🌊 Animations

Transitions

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

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

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

Keyframes

Fade In:

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

Pulse (Live Indicator):

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

Glow:

@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:

--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:

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

Row:

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

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

Stats (Numbers):

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

---

♿ Accessibility

Focus States

&: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

@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

.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

/* 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:

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

---

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