# Dark Crime Theme — Design Spec
**Date:** 2026-06-28  
**Project:** The Crime Syndicate  
**Scope:** Full game UI — auth pages, game layout, all game pages

---

## 1. Color System

Defined as custom Tailwind tokens in `tailwind.config.js` under `theme.extend.colors`:

### Background scale (`syndicate`)
| Token | Hex | Usage |
|---|---|---|
| `syndicate-950` | `#0a0a0c` | Page/body background |
| `syndicate-900` | `#111114` | Sidebar background |
| `syndicate-800` | `#1a1a1f` | Card / panel backgrounds |
| `syndicate-700` | `#242429` | Card borders, dividers |
| `syndicate-600` | `#2e2e35` | Hover states, subtle borders |

### Accent (`crime` — blood red)
| Token | Hex | Usage |
|---|---|---|
| `crime-600` | `#dc2626` | Primary buttons, active nav indicator |
| `crime-500` | `#ef4444` | Button hover states |
| `crime-400` | `#f87171` | Accent text, icon tints |

### Money (`gold`)
| Token | Hex | Usage |
|---|---|---|
| `gold-500` | `#d97706` | Cash / money values |
| `gold-400` | `#fbbf24` | Money highlights |

### Text
- Primary text: `text-gray-100`
- Secondary / muted: `text-gray-400`
- Disabled / placeholder: `text-gray-600`

---

## 2. Typography

Replace the existing `Figtree` font with two faces from Bunny Fonts:

| Face | Usage | Tailwind class |
|---|---|---|
| **Inter** (400, 500, 600) | Body text, labels, data | `font-sans` |
| **Rajdhani** (600, 700) | Headings, game title, card titles | `font-display` |

`font-display` added to `tailwind.config.js` as a custom font family.

---

## 3. Layout Structure

### 3.1 Base layout (`resources/views/layouts/app.blade.php`)
- `<body>` class: `font-sans antialiased bg-syndicate-950 text-gray-100 min-h-screen`
- Remove `bg-gray-100` wrapper div
- Load the two new font faces via Bunny Fonts link tag

### 3.2 Game layout (`resources/views/layouts/game.blade.php`)
Replaces the current single-top-bar layout with a sidebar + top bar shell.

**Structure:**
```
┌─────────────────────────────────────────────────┐
│  TOP BAR (h-14): Logo | Stats bar | User menu   │
├──────────┬──────────────────────────────────────┤
│ SIDEBAR  │  CONTENT AREA                        │
│ (w-56)   │  bg-syndicate-950, p-6               │
│ bg-900   │  @yield('game-content')              │
│          │                                      │
│ Nav      │                                      │
│ links    │                                      │
│          │                                      │
│ Logout   │                                      │
└──────────┴──────────────────────────────────────┘
```

**Top bar:**
- `bg-syndicate-900 border-b border-syndicate-700 h-14`
- Left: game title in `font-display text-crime-400`
- Center: Stats bar (HP, Energy, Cash pills)
- Right: character name + dropdown (logout, profile, settings)

**Sidebar:**
- `bg-syndicate-900 border-r border-syndicate-700 w-56 min-h-screen flex-shrink-0`
- Nav links: icon + label, `text-gray-400 hover:text-gray-100 hover:bg-syndicate-800`
- Active state: `border-l-2 border-crime-500 bg-syndicate-800 text-gray-100`
- Conditional links: Hospital shown only when `$character->status === IN_HOSPITAL`; Jail when `IN_JAIL`

**Nav links (in order):**
1. Dashboard (`/game`)
2. Crimes (`/game/crimes`)
3. Inventory (`/game/inventory`)
4. Profile (`/game/character`)
5. --- divider ---
6. Hospital (conditional)
7. Jail (conditional)

### 3.3 Stats bar partial (`resources/views/game/partials/stats-bar.blade.php`)
Compact inline pills:
- HP: red heart icon + `{hp}/{max_hp}`
- Energy: yellow bolt icon + `{energy}/{max_energy}`
- Cash: gold dollar icon + `${cash}`
- Level badge: `Lv.{level}` in `bg-syndicate-700 text-gray-300 rounded px-2`

---

## 4. Component Styles

### Cards / Panels
```
bg-syndicate-800 border border-syndicate-700 rounded-lg
```
Card header: `border-b border-syndicate-700 px-6 py-4`  
Card body: `px-6 py-4`

### Primary Button
```
bg-crime-600 hover:bg-crime-500 text-white font-medium rounded px-4 py-2 transition
```

### Secondary / Ghost Button
```
bg-syndicate-700 hover:bg-syndicate-600 text-gray-300 rounded px-4 py-2 transition
```

### Disabled Button
```
bg-syndicate-700 text-gray-600 cursor-not-allowed rounded px-4 py-2
```

### Flash Messages
- Success: `bg-green-900/40 border border-green-700 text-green-400`
- Error: `bg-red-900/40 border border-red-800 text-red-400`

### Action grid tiles (Quick Actions, Crime cards)
```
bg-syndicate-800 border border-syndicate-700 hover:border-crime-600 rounded-lg p-4 transition
```
Hover lifts border to `crime-600`.

---

## 5. Page-specific Restyling

### Auth pages (login, register, forgot-password, etc.)
- `layouts/guest.blade.php`: full-page centered layout on `bg-syndicate-950`
- Card: `bg-syndicate-800 border border-syndicate-700 rounded-lg w-full max-w-md p-8`
- Title above card: game name in `font-display text-2xl text-crime-400`
- Blade components (`text-input`, `primary-button`, `input-label`) updated for dark theme

### Game dashboard (`game/dashboard.blade.php`)
- All `bg-white dark:bg-gray-800` → `bg-syndicate-800 border border-syndicate-700`
- EXP progress bar: `bg-crime-600` on `bg-syndicate-700` track
- Money values: `text-gold-400`
- Activity log items: `bg-syndicate-700` background

### Crimes page (`game/crimes/index.blade.php`)
- Crime cards: `bg-syndicate-800 border border-syndicate-700 hover:border-crime-600`
- Success rate badge: keep color logic (green/yellow/red) but darken backgrounds to 900/40 variants
- "Attempt Crime" button: primary button style
- Cooldown button: disabled button style
- Recent attempts row: `bg-syndicate-700` rows

### Inventory, Hospital, Jail pages
- Same card/panel treatment as above
- No structural changes needed beyond color replacement

---

## 6. Files Changed

| File | Change |
|---|---|
| `tailwind.config.js` | Add `syndicate`, `crime`, `gold` color scales; add `font-display` |
| `resources/views/layouts/app.blade.php` | Dark body, new fonts |
| `resources/views/layouts/guest.blade.php` | Dark centered auth layout |
| `resources/views/layouts/game.blade.php` | Full sidebar + top bar rewrite |
| `resources/views/game/partials/stats-bar.blade.php` | Compact pill redesign |
| `resources/views/layouts/navigation.blade.php` | Sidebar nav links (replaces old top nav) |
| `resources/views/components/primary-button.blade.php` | Crime red style |
| `resources/views/components/secondary-button.blade.php` | Syndicate dark style |
| `resources/views/components/text-input.blade.php` | Dark input style |
| `resources/views/components/input-label.blade.php` | Light label text |
| `resources/views/game/dashboard.blade.php` | Dark card classes throughout |
| `resources/views/game/crimes/index.blade.php` | Dark card/button classes |
| `resources/views/game/inventory/index.blade.php` | Dark card classes |
| `resources/views/game/hospital.blade.php` | Dark card classes |
| `resources/views/game/jail.blade.php` | Dark card classes |
| `resources/views/auth/login.blade.php` | (no change — uses components) |
| `resources/views/auth/register.blade.php` | (no change — uses components) |

---

## 7. Out of Scope

- Mobile responsiveness (sidebar collapse on small screens) — future iteration
- Animations / transitions beyond simple CSS `transition`
- Custom icons (emoji kept as-is)
- JS interactivity