thecrimesynticate/docs/superpowers/specs/2026-06-28-dark-crime-theme-design.md

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