# Move. Compete. Play. — Design System

**Version:** 1.0 (MVP)
**Theme:** Warm Futurism / The Developer Gym
**Vibe:** Dark, focused, high-performance, but welcoming. Think "Nike Pro meets VS Code."

---

## 1. Color Palette

### **Primary (The Gym Floor)**
* **Slate 950 (`#020617`):** The main background. Deep, infinite, focused.
* **Slate 900 (`#0f172a`):** Surface / Cards. Slightly elevated to create depth.
* **Slate 50 (`#f8fafc`):** Primary Text. High contrast but not harsh white.

### **Accent (The Energy)**
* **Amber 500 (`#f59e0b`):** "The Spark." Used for primary buttons, active states, and key highlights.
* **Amber 400 (`#fbbf24`):** Hover states and glowing text effects.
* **Emerald 500 (`#10b981`):** "Success." Used for passing tests, deployed status, and growth metrics.

### **Gradients (The Atmosphere)**
* **The Warm Glow:** `bg-gradient-to-r from-amber-500/20 to-transparent` (Used for background blobs).
* **The Glass Surface:** `bg-slate-900/50 backdrop-blur-md border border-slate-800` (Used for HUDs and floating navs).

---

## 2. Typography

**Font Family:** `Inter` (Sans-serif) for UI / `Calistoga` (Serif) for Headlines (Optional).

* **H1 (Hero):** Text-5xl / Bold / Tight Tracking.
    * *Usage:* Landing page main statement.
* **H2 (Section):** Text-3xl / Semibold.
    * *Usage:* "Build Seasons," "Leaderboard."
* **Body:** Text-base / Text-slate-400.
    * *Usage:* Paragraphs. Easy to read, low eye strain.
* **Mono:** `JetBrains Mono` or `Fira Code`.
    * *Usage:* Code snippets, terminal outputs, and data values.

---

## 3. Core Components

### **Buttons**
* **Primary (Action):**
    * `bg-amber-500 text-slate-950 font-bold px-6 py-3 rounded-lg hover:bg-amber-400 transition-all`
    * *Effect:* Subtle shadow glow on hover.
* **Secondary (Ghost):**
    * `border border-slate-700 text-slate-300 px-6 py-3 rounded-lg hover:border-slate-500 hover:text-white transition-all`

### **Cards (Bento Grid Style)**
* **Container:** `bg-slate-900 border border-slate-800 rounded-xl p-6`
* **Hover Effect:** Border color shifts to `slate-600` or subtle `amber-500/20` glow.
* **Content:** Icon top-left, heavy bold title, muted description.

### **Badges / Tags**
* **Status (Live):** `bg-green-500/10 text-green-400 border border-green-500/20 rounded-full px-3 py-1 text-xs uppercase tracking-wider`
* **Tag (Tech):** `bg-slate-800 text-slate-400 border border-slate-700 rounded-md px-2 py-1 text-xs font-mono`

---

## 4. Imagery & Effects

* **Noise Texture:** A subtle grain overlay (5% opacity) to prevent the dark background from looking "flat."
* **Glow Orbs:** Blurred circles of Amber or Indigo positioned behind text to separate it from the background.
* **Grid Lines:** Very faint (`slate-800/50`) background grid patterns to reinforce the "engineering" aesthetic.

---

## 5. Tone of Voice

* **Direct & Action-Oriented:** "Ship Code," "Deploy Now," "Join the League."
* **No Fluff:** Avoid corporate jargon like "synergy" or "innovative solutions."
* **Encouraging but Tough:** "The code won't write itself." / "Respect the grind."