# Fieldhouse OS — Design System

**Fieldhouse OS: run the program.** A fictional desktop operating system for a college-football head-coach game. The player lives inside a Windows-esque OS — desktop, taskbar, start menu, notifications — and runs their program through satirical "apps": **The Podium** (press conferences), **Depth Chart Pro** (team management), **Gridiron Navigator** (web browser for the *Saturday Circuit* news site), and **MailBag** (email from the AD, compliance, reporters). Tone is tongue-in-cheek: fake apps that rhyme with real ones, deadpan chrome, comedy in the content.

**Sources provided:** brand logo upload (`assets/logo.png`); direction chosen from explorations (`OS Explorations.html`) — winner: **1c "Film Room"** (Win11-esque flat dark, acrylic, centered dock, gold accent). No codebase or Figma; components here are the origin set, not recreations.

## Content fundamentals
- **The OS plays it straight; the content is funny.** Chrome copy is terse, sentence case, Windows-flavored ("Sign in", "Mark as read"). The jokes live in email subjects, news headlines, dialog stakes, and system metrics (Hot Seat Index: 74°).
- Voice is second person to the coach ("Your buyout is now a trending search term").
- Parenthetical stingers are the house move: "Inbox (47 unread, 46 problems)", "Nothing bad. (Bring your playbook.)"
- Numbers are weaponized for comedy but formatted seriously: "2,318 comments (all bad)".
- Never break the fiction — no "this is a game", no fourth-wall winks in chrome.
- No emoji in body copy; emoji exist only as the icon system (below).
- News content (Saturday Circuit) uses breathless sports-media clichés: HOT SEAT WATCH kickers, "Sources:", anonymous boosters.

## Visual foundations
- **Palette:** two layers. Fixed **OS neutrals** — deep violet-blacks (`--os-bg-0` #0f0c18 → `--os-surface-3`), light text ladder, white-alpha strokes. Swappable **school theme** — `--school-primary/-bright/-deep`, `--school-accent/-deep` + on-colors. Default skin "bayou" (purple #461D7C / gold #FDD023); alternates via `[data-school="crimson"|"citrus"|"evergreen"]` on any scope. `--accent` aliases the school accent.
- **Backgrounds:** `--wallpaper` = school-primary radial glow over a dark linear gradient; recomputes per skin via color-mix. No imagery, no patterns.
- **Type:** `--font-ui` Segoe UI system stack (Windows-native on purpose; **no webfont files shipped** — see caveat). `--font-editorial` Georgia, only for Saturday Circuit article content. `--font-mono` Consolas for token/technical text. Scale 11–32px; kickers are 11px bold, uppercase, +2px tracking, accent color.
- **Spacing/radii:** 4px grid (`--space-1..8`). Radii: 6 controls / 8 buttons+inputs / 12 windows+tiles / pill badges.
- **Elevation:** dark, soft, large shadows (`--shadow-window/-toast/-menu/-subtle`) + 1px white-alpha border on every raised surface. Acrylic (`--os-acrylic` + `--blur-acrylic`) is for *transient* chrome only: taskbar, start menu, toasts, dialogs. Windows are opaque.
- **States:** hover = white-alpha fill (`--surface-hover`); press = scale(.97); focus = gold double ring (`--focus-ring`); unfocused windows dim to 92% with weaker border. Close buttons turn `--danger` red on hover.
- **Motion:** one curve `--ease-os` cubic-bezier(.2,.8,.2,1); 120/200/320ms. No bounces, no fades longer than 320ms.
- **Transparency/blur:** only acrylic surfaces; never on window bodies or text containers.
- **Layout:** taskbar fixed bottom (52px, centered dock, tray+clock right); desktop icons in a left-edge column; windows absolutely positioned, layered by shadow.

## Iconography
- **App icons are single emoji glyphs on a frosted tile** (white-alpha 6% bg, 1px stroke, 12px radius) — a deliberate tongue-in-cheek stand-in for OS app icons: 🎙 The Podium, 📋 Depth Chart Pro, 🌐 Gridiron Navigator, ✉ MailBag, ⚙ Settings.
- Window/chrome glyphs are unicode text: — ▢ ✕ ▼ ⏻ ←→⟳.
- The start button is typographic: "FH" black-weight on a gold rounded square.
- No icon font, no SVG icon set. If a richer set is ever needed, use Lucide from CDN (matches the 1px-stroke feel) and flag it.
- **Logo:** provided mark in `assets/logo.png` (transparent PNG, dark wordmark — needs light or gold backgrounds; don't recolor).

## Components
`components/core/`: **Button**, **Input**, **Select**, **Badge** (+ **CountBadge**), **Toggle**
`components/os/`: **Window**, **Taskbar**, **DesktopIcon**, **StartMenu**, **Toast**, **Dialog**
Intentional additions: none beyond this origin set (no source inventory existed).

## Index
- `styles.css` → `tokens/` (colors, typography, layout, effects, base)
- `components/core/`, `components/os/` — JSX + `.d.ts` + `.prompt.md` + card HTML per directory
- `ui_kits/fieldhouse-os/` — interactive login → desktop shell recreation
- `guidelines/cards/` — foundation specimen cards (Design System tab)
- `assets/logo.png` — brand mark
- `OS Explorations.html` — the three original shell directions (1c chosen)
- `SKILL.md` — agent skill entry point

## Caveats
- No webfonts: Segoe UI/Georgia/Consolas system stacks by design (authentic Windows pastiche). If pixel-identical cross-platform type is required, supply font files.
- School skins beyond "bayou" use generic fictional palettes (crimson/citrus/evergreen), not real schools' official colors.