74 lines
3.0 KiB
Markdown
74 lines
3.0 KiB
Markdown
# 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." |