## Overview
Brutalist and systems-obsessed. Treats a food page like a military command console — a warm dusty off-white canvas carved into rigid zones by thick slabs of jet black, with a single alarm-red accent that punctuates the composition like a warning signal. Everything is uppercase, bold, compressed, and meant to be scanned on a monitor rather than read on a page. A persistent grid overlay turns the viewport into graph paper.
## Colors
- **Warm canvas** (`#E8E4DD`): Page itself. Default surface for all structure.
- **Light alt** (`#F5F3EE`): Sparingly — alternate block background to distinguish adjacent panels.
- **Jet black** (`#111111`): Structural color. Every border, dark panel, primary text. The skeleton of the layout.
- **Alarm red** (`#E63B2E`): The only chromatic accent. Reserved for signal — primary CTA, left-edge flash bars, hero status stripe, "REC" indicator, hover highlights, text selection, errors.
Hover states are full color inversions — panels swap black and off-white. Interaction feels like a switch being thrown.
## Typography
- **Headline Font**: Space Grotesk (workhorse — body, headlines, general content)
- **Display Font**: DM Serif Display (single use only — hero marquee italic at 12vw)
- **Label Font**: Space Mono (system output — nav, status readouts, inventory codes, terminal messages)
Uppercase is the default state for almost everything except info-block paragraphs. Bold or black weights are the baseline — there is no thin or regular weight anywhere prominent. Mono headers use tight letter spacing to compress characters into denser, more aggressive blocks.
## Elevation
No shadows, no rounded corners, no floating panels. Depth comes from border weight, solid color fills, blend modes, and full-inversion hover states. Three deliberate border weights form the hierarchy: **2px** for finest divisions (navbar cells, inventory rows), **4px** for panel separations within a section, **8px** for major section boundaries. The page feels etched into its surface rather than floating above it.
## Components
- **Buttons**: Solid alarm-red blocks with warm-canvas text in bold uppercase Space Mono. Perfectly sharp corners, no shadow, fixed-width cells separated by 2px black dividers. Hover inverts entirely to jet black with the text staying warm off-white.
- **Containers**: No cards — containers are carved from the page by thick solid black borders at 2/4/8px weights. The triptych info blocks are three edge-to-edge panels (light off-white, alarm red, jet black) divided by 4px vertical rules and closed by an 8px black bar.
- **Inputs**: 2px solid black border, perfectly square corners, no interior shadow or glow. Labels in Space Mono bold uppercase, often prefixed with `__` or `[tag]` style punctuation. Focus inverts the field to jet black with warm-canvas text. Errors in alarm red.
- **Marquee**: Italic DM Serif Display at 12vw scrolling full-bleed across the hero, deliberately interfering with the layout beneath it.
## Do's and Don'ts
- Do let borders carry hierarchy — not whitespace, not shadows.
- Do reserve alarm red for signal: action, status, error, urgency.
- Do invert on every interaction — hover, focus, active.
- Do go full-bleed; section content occupies one continuous instrument panel.
- Don't round any corner. Anywhere.
- Don't use shadows or elevation for depth.
- Don't introduce a fourth color — the system is canvas, black, alt off-white, alarm red.
- Don't sentence-case anything except info-block body paragraphs.