website/syleguide.md

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