Editorial Grid Mono DESIGN.md

---
version: 1
name: "Editorial Grid Mono Mobile"
colors:
  primary: "#E30613"
  on-primary: "#FFFFFF"
  surface: "#F5F5F5"
  surface-alt: "#FFFFFF"
  surface-muted: "#E5E5E5"
  on-surface: "#000000"
  on-surface-variant: "#666666"
  on-surface-muted: "#D4D4D4"
  border: "#000000"
  accent-warm: "#0A0A0A"
typography:
  display-xl:
    fontFamily: "Instrument Sans"
    fontSize: 144px
    fontWeight: 700
    lineHeight: 0.8
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: "Instrument Sans"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  card-title:
    fontFamily: "Instrument Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  label-uppercase:
    fontFamily: "Instrument Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  label-uppercase-sm:
    fontFamily: "Instrument Sans"
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  caption:
    fontFamily: "Instrument Sans"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  mono-data:
    fontFamily: "JetBrains Mono"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  tab-label:
    fontFamily: "Instrument Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.1em
rounded:
  none: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 16px
  card-padding: 16px
  section-gap: 24px
icons:
  set: solar
  default_variant: linear
  active_variant: bold
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
    height: 48px
    paddingX: 24px
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    height: 48px
    paddingX: 24px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
    paddingX: 16px
    paddingY: 8px
  button-icon:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
    size: 40px
    iconSize: 20px
    pressedBackground: "{colors.primary}"
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    height: 44px
    paddingX: 16px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    paddingX: 24px
    paddingY: 12px
  chip-active:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    paddingX: 24px
    paddingY: 12px
  badge-pill:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.mono-data}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    paddingX: 8px
    paddingY: 4px
  avatar:
    backgroundColor: "{colors.surface-muted}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    size: 56px
  list-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
    paddingX: "{spacing.md}"
    paddingY: "{spacing.md}"
    gap: "{spacing.md}"
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
    height: 8px
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    height: 56px
  tab-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.tab-label}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.none}"
    height: 64px
  tab-item-active:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.tab-label}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
  tab-item-inactive:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.tab-label}"
    border: none
    boxShadow: none
    rounded: "{rounded.none}"
---

# Editorial Grid Mono Mobile

## Overview

**Brutalist editorial. Hairline-grid. Hot-red accent on bone white.**

The aesthetic is an architectural print object translated to a phone — every screen is a system of cells separated by 1px black hairlines, with a single saturated red reserved for moments of action. Typography does the heavy lifting: large condensed sans-serif headers that crowd the top of a frame, oversized numerals as visual anchors, and pervasive uppercase tracked-out micro-labels that make even body chrome feel like wayfinding signage.

The mood is exhibition catalog, signage system, ECM record sleeve. Cold and confident, never decorative. White space exists only where the grid demands it. Photography is desaturated to grayscale by default — color enters through chrome (the red), not through content. The result reads as a *publication* the user navigates, not an app they tap through.

## Colors

Light-mode only. The palette is severely restricted by design.

- `{colors.surface}` (#F5F5F5) — the dominant page background. A bone/off-white that reads as printed paper rather than digital white.
- `{colors.surface-alt}` (#FFFFFF) — pure white, used for inputs, cards-on-cards, and image backings to create a one-step elevation against the bone surface.
- `{colors.surface-muted}` (#E5E5E5) — strip backgrounds for section headers and progress-track fills.
- `{colors.on-surface}` (#000000) — body text, all icons in default state, and **the border color of every cell in the layout grid**. Black is structural here, not just typographic.
- `{colors.on-surface-variant}` (#666666) — metadata, secondary text, attribution lines.
- `{colors.border}` (#000000) — explicitly the same as `on-surface`; called out as a separate token because hairlines are load-bearing in this system.
- `{colors.primary}` (#E30613) — the saturated signal red. Reserved exclusively for: primary action surfaces (play button, primary CTA), active map markers, hover/pressed-state inversion, and as a single decorative dot when an illustration calls for it. **Never** use it as a card background, never tint it, never use it for body type.

Palette boundaries:
- Red is for *action* and *location* only. A card is never red. A header is never red. Type is never red except in hover/active inversions.
- Photography lives in grayscale by default (`grayscale` filter on `<img>`). It may transition to color on hover/active to signal interactivity.
- The single red dot/circle motif may appear inside generated illustrations as a pure-color anchor, but no other UI red bleeds into illustration containers.

For a low-attention secondary surface, render `card` with `bg-{surface-muted}` instead of `bg-{surface-alt}` — same border, same zero radius.

## Typography

Three families, each with a strictly defined job:

- **Instrument Sans** (`{typography.headline-*}`, `{typography.body-md}`, all labels and tab text) — the workhorse. Used at extreme sizes (`{typography.display-xl}` at 144px) for hero numerals, and at compressed sizes (10px / 8px) tracked out to +0.1em for chrome. The family's slightly humanist proportions keep the brutalist grid from going cold.
- **JetBrains Mono** (`{typography.mono-data}`) — strictly for numeric data badges, distance/duration readouts, and any tabular figure that wants to feel like a measurement, not a label.
- **Playfair Display** — declared as the serif fallback in the stack and available for editorial moments where a single oversized italic numeral or display word would punctuate a section. Use sparingly; the default voice is sans.

Weight strategy: **700 is the default**. Body copy at 400 is the only common exception. There is no 500/600 middle weight in regular use — the contrast between bold chrome and regular body is deliberate.

Tracking philosophy: chrome labels (`{typography.label-uppercase}`, `{typography.label-uppercase-sm}`, `{typography.tab-label}`) are uppercase with +0.1em letter-spacing. Display sizes (`{typography.display-xl}`, `{typography.headline-lg}`) are tightened (-0.04em / -0.02em) to read as a cohesive shape rather than letters. Body is neutral.

Role guide:
- `{typography.display-xl}` — oversized numeric or short-word anchors at the top of detail screens. Reads as poster typography.
- `{typography.headline-lg}` — primary screen titles in dense headers, and detail-screen subject names.
- `{typography.headline-md}` / `{typography.card-title}` — list-row titles and card titles.
- `{typography.body-md}` — long-form description paragraphs. Always justified with hyphenation enabled to preserve the columnar feel.
- `{typography.label-uppercase}` — section kickers, tab labels, button text, app-bar title.
- `{typography.label-uppercase-sm}` — micro-metadata (e.g. proximity readouts, status captions).
- `{typography.mono-data}` — numeric badges and timecodes.
- `{typography.caption}` — attribution and metadata under titles (artist / year style lines).

## Spacing & Layout

Density: **dense, gridded, edge-to-edge**. Side gutters are tight (`{spacing.gutter}` = 16px) because the grid lines themselves provide the breathing room between cells. Generous internal padding lives only inside cells that house long-form prose or a hero numeral — chrome cells stay compressed.

Vertical rhythm is dictated by hairline dividers, not whitespace. A new section is announced by a 1px black border and possibly a 28–32px tall tinted strip with a tracked-out kicker, never by a 48px gap of empty surface.

Use full-bleed grids: cells touch screen edges, divisions are by hairline. A 2×2 metadata block is rendered as four cells separated by 1px gaps with the border color showing through.

## Elevation & Depth

**Flat. No shadows, ever.** Hierarchy is communicated by:

1. **Hairline borders** — every container has a 1px black border. The presence of a border *is* the elevation.
2. **Tonal layering** — `{colors.surface}` (bone) is the base; `{colors.surface-alt}` (white) sits one step above it; `{colors.surface-muted}` is used for strip headers that recede.
3. **Inversion** — black-on-white flips to white-on-black for active states (active tab, selected floor button, current nav item). This is the strongest hierarchy move in the system.
4. **Color injection** — the red appears only on the highest-priority interactive element on screen.

Never add `shadow-*` Tailwind classes. Never add gradient overlays except inside generated artwork.

## Shapes

**Zero radius across the entire system.** Every container, button, input, badge, avatar, and card uses `{rounded.none}` (0px). The single exception is the `{rounded.full}` token, reserved for genuinely circular elements *inside content* (e.g. a red location-dot inside a map illustration, or a circular progress indicator if needed) — never for chrome.

The shape language is **rectangular and hairline-defined**. Corners are sharp. The grid is rigid. Any softness in the design comes from the bone-white surface tone and the slightly-warm photography, never from geometry.

## Components

### card

```html
<div class="bg-white border border-black p-4">
  <h3 class="text-sm font-bold uppercase tracking-tight">[Card title]</h3>
  <p class="text-[10px] text-neutral-600 uppercase tracking-wider mt-1">[Caption / metadata]</p>
</div>
```

### button-primary

```html
<button class="h-12 px-6 bg-[#E30613] text-white text-[10px] font-bold uppercase tracking-[0.1em] flex items-center justify-center">
  [Action label]
</button>
```

### button-secondary

```html
<button class="h-12 px-6 bg-white border border-black text-black text-[10px] font-bold uppercase tracking-[0.1em] flex items-center justify-center hover:bg-[#E30613] hover:text-white transition-colors duration-0">
  [Action label]
</button>
```

### button-text

```html
<button class="px-4 py-2 text-[10px] font-bold uppercase tracking-[0.1em] text-black hover:text-[#E30613]">
  [Action label]
</button>
```

### button-icon

A square icon button without border, designed to sit inside a header cell (which already has its own divider border) or stacked in a control column where adjacent borders form the cell grid.

```html
<button class="size-10 bg-[#F5F5F5] flex items-center justify-center hover:bg-[#E5E5E5] active:bg-[#E30613] active:text-white transition-none">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-5"></iconify-icon>
</button>
```

### input-text

```html
<div class="relative flex items-center border border-black bg-white">
  <iconify-icon icon="solar:magnifer-linear" class="size-5 absolute left-3 text-neutral-600"></iconify-icon>
  <input type="text" class="w-full h-11 pl-10 pr-4 bg-transparent border-none outline-none text-[10px] font-bold uppercase tracking-[0.1em] placeholder:text-neutral-600" placeholder="[PLACEHOLDER]" />
</div>
```

### chip / chip-active

```html
<div class="flex border border-black">
  <button class="px-6 py-3 bg-black text-[#F5F5F5] text-[10px] font-bold uppercase tracking-[0.1em]">[Active]</button>
  <button class="px-6 py-3 bg-[#F5F5F5] text-black border-l border-black text-[10px] font-bold uppercase tracking-[0.1em] hover:bg-[#E5E5E5]">[Inactive]</button>
</div>
```

Chips are rendered as a *contiguous strip with internal hairlines*, not as separate floating pills. This is the signature of the system.

### badge-pill (numeric / data badge)

```html
<div class="text-[10px] font-mono border border-black px-2 py-1">[VALUE]</div>
```

### avatar / thumbnail

```html
<div class="size-14 bg-[#D4D4D4] border border-black flex-shrink-0 grayscale overflow-hidden">
  <img src="[IMG]" class="w-full h-full object-cover" />
</div>
```

Avatars and content thumbnails share the same recipe: square, hairline border, grayscale by default. There are no circular avatars in this system.

### list-row

```html
<div class="p-4 flex items-center gap-4 border-b border-black hover:bg-[#E5E5E5] transition-colors duration-0 cursor-pointer">
  <div class="size-12 bg-[#D4D4D4] border border-black flex-shrink-0 grayscale overflow-hidden">
    <img src="[IMG]" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1">
    <h3 class="text-sm font-bold uppercase tracking-tight">[Row title]</h3>
    <p class="text-[10px] text-neutral-600 uppercase tracking-wider">[Metadata]</p>
  </div>
  <div class="text-[10px] font-mono border border-black px-2 py-1">[VALUE]</div>
</div>
```

A composition recipe — **alphabetical or categorical group header**: render a 28–32px tall strip with `bg-[#E5E5E5]/30`, top+bottom hairline borders, and a `{typography.mono-data}` letter or category label inside.

### progress-bar

```html
<div class="w-full h-2 bg-[#E5E5E5] relative overflow-hidden">
  <div class="absolute top-0 left-0 h-full bg-black" style="width: [PCT]%"></div>
</div>
```

### top-app-bar

A four-column grid; the title occupies the middle two columns, with hairline-divided icon buttons on either side. The whole bar has a bottom border.

```html
<header class="sticky top-0 z-50 bg-[#F5F5F5] border-b border-black grid grid-cols-4 h-14">
  <button class="col-span-1 border-r border-black flex items-center justify-center hover:bg-[#E5E5E5] active:bg-[#E30613] active:text-white transition-colors duration-0">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  </button>
  <div class="col-span-2 flex items-center justify-center border-r border-black text-sm font-bold uppercase tracking-widest">[Screen title]</div>
  <button class="col-span-1 flex items-center justify-center hover:bg-[#E5E5E5] active:bg-[#E30613] active:text-white transition-colors duration-0">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  </button>
</header>
```

### tab-bar / tab-item-active / tab-item-inactive

```html
<nav class="fixed bottom-0 left-0 right-0 bg-[#F5F5F5] border-t border-black z-50">
  <div class="grid grid-cols-3 h-16 text-xs uppercase font-bold tracking-widest">
    <button class="border-r border-black flex flex-col items-center justify-center gap-1 bg-black text-[#F5F5F5]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-5 mb-0.5"></iconify-icon>
      <span>[Active]</span>
    </button>
    <button class="border-r border-black flex flex-col items-center justify-center gap-1 hover:bg-[#E5E5E5] transition-colors duration-0">
      <iconify-icon icon="solar:[icon-name]-linear" class="size-5 mb-0.5"></iconify-icon>
      <span>[Tab]</span>
    </button>
    <button class="flex flex-col items-center justify-center gap-1 hover:bg-[#E5E5E5] transition-colors duration-0">
      <iconify-icon icon="solar:[icon-name]-linear" class="size-5 mb-0.5"></iconify-icon>
      <span>[Tab]</span>
    </button>
  </div>
  <div class="h-5 bg-[#F5F5F5] border-t border-black"></div>
</nav>
```

### Composition recipes (no separate component entry)

- **Hero numeral block** — a section of `{spacing.xl}+` top padding with a `{typography.display-xl}` numeral or short word at the leading edge, often with faint orthogonal hairlines (`opacity-30`) crossing the cell to suggest a margin grid behind the type.
- **2×N data grid** — a metadata table rendered as N rows of 2 cells separated by 1px gaps, with the parent container's `bg-black` showing through as the gridlines. Each cell gets `{typography.label-uppercase-sm}` for the field name above `{typography.card-title}` for the value.
- **Square category tile** — a `border border-black p-4 h-32 flex flex-col justify-between` cell with a top-aligned linear icon and a bottom-aligned tracked-uppercase label. On hover, inverts to `bg-{primary} text-white`.
- **Floating media controls strip** — a 64px-tall full-width row with a flush-left red play button (size = full row height) and a progress track + timecode pair filling the remainder. Square button, no radius, no padding-around-the-icon-glyph effect.

## Iconography

- **Set: Solar.** The Solar family's slightly geometric proportions match the headline type and feel architectural at small sizes.
- **Default variant: `linear`.** All inactive chrome icons.
- **Active variant: `bold`.** Used for the currently selected tab, and for any icon that sits inside an inverted (black-bg / red-bg) cell.
- **Stroke weight reads as ~1.5px** — do not substitute heavier-stroke families (e.g. Material) which will break the editorial feel.
- **Default size: 24px** in app bars and category tiles, 20px in tab bar and inline contexts, 16–20px inside inputs.
- Color: always `currentColor` (black on chrome surfaces, white when inverted, red is *not* used as an icon-only color — only as the surface that an icon sits on).

## Illustration & Imagery

This aesthetic uses photographic and painterly imagery extensively (every list row has a thumbnail; detail screens lead with a large image). Every `<img>` is filtered into the system's monochrome voice; color enters images only as a hover-revealed Easter-egg or, deliberately, inside a generated artwork that uses the red anchor.

- **Style / Technique**: two coexisting modes. (a) **Painterly fine-art reproductions** — thick-pigment, slightly textured oil/gouache works in early-20th-century constructivist or Bauhaus idiom: hard-edged geometric shapes (circles, triangles, crossed bars), visible canvas grain, shallow depth, no rendering of realistic space. (b) **Architectural / object photography** — single subject (sculpture, gallery interior, doorway) on a neutral wall, soft directional studio light, deep but warm shadows, no environmental clutter. Both modes are presented at low chroma so the red of the chrome can sing.
- **Palette**: inside an artwork, a maximum of 4 colors drawn from black, bone-cream (paper white), the system red `{colors.primary}`, plus one supporting cool (deep navy or slate blue) and one supporting warm (mustard yellow). Photographs are presented `grayscale` by default; a hover state may release color (`hover:grayscale-0 transition-all duration-500`).
- **Edge treatment**: hand-painted hard edges with slight wobble — *not* vector-clean. Black contours are dry-brushed, not crisp. For photographs, no outline; the image meets its 1px black hairline frame with no inner border.
- **Shading & light**: in painted works, flat color fields with subtle pigment texture only — no rendered volume. In photographs, soft single-source studio lighting with broad falloff.
- **Composition & framing**: subject sits centered or slightly off-center within the canvas, with generous bone-white margin if the work is painted. Photographs often place the subject dead-center on a near-monochrome ground.
- **Background within the illustration**: cream/bone canvas for painted works (matches the page surface so the framed work feels embedded into the page); flat warm-gray seamless for photographs.
- **Container styling**: every image is wrapped in a hairline `border border-black` cell with **0px radius** and **no inner padding** — the image fills its cell edge-to-edge. Container background is `bg-[#D4D4D4]` (`{colors.surface-muted}`) so partially loaded images read as a neutral gray placeholder, never white.
- **CSS treatment on the `<img>`**: `class="w-full h-full object-cover grayscale"`. On detail-screen heroes, add `contrast-125 hover:grayscale-0 transition-all duration-500` so the image desaturates by default and reveals color only on user attention. No `mix-blend-mode`, no `opacity` reduction, no `filter: blur`.
- **Box-shadow on the image or its frame**: **none** — the image sits flat inside its hairline cell. The cell border IS the framing device.
- **Aspect ratio rule**: thumbnails in list rows are perfect squares (`size-12` to `size-14`). Detail-screen heroes are `aspect-[4/3]` or `aspect-square`. Floor-plan / wayfinding images fill their cell at whatever ratio the cell dictates and rely on `object-cover`.
- **Anti-references**: NOT 3D-rendered, NOT claymation, NOT cartoon/mascot, NOT pastel, NOT soft-focus dreamy, NOT gradient-meshed digital art, NOT photoreal CGI, NOT isometric vector.
- **Style recipe prompt**: *"[SUBJECT] rendered as an early-20th-century constructivist painting — hard-edged geometric shapes, hand-painted dry-brushed black contours, flat color fields with visible canvas pigment grain. Palette restricted to black, bone-cream paper white, one saturated red (#E30613), one deep navy, one mustard yellow — maximum 4 colors per work. Composition centered on a cream-canvas ground with generous margin. Flat lighting, no rendered volume, no gradients. Slight wobble in painted edges — not vector-clean. Museum-collection presentation, neutral mood. NOT 3D, NOT digital art, NOT cartoon, NOT photoreal."* For architectural photography swap to: *"[SUBJECT] photographed straight-on against a warm gray seamless studio backdrop, soft single-source directional light, low chroma, shallow shadows, no environmental detail. NOT moody, NOT dramatic, NOT cinematic — calm museum-catalog presentation."*

## Hierarchy & Emphasis

The loudest thing on screen is whichever element is currently red — and there should never be more than one or two of them. After that, hierarchy descends: oversized numeral or display word → bold uppercase title → bold small-caps card title → regular body → muted uppercase metadata → mono numeric badge.

Inversion (black background, white text) is the second-loudest move. Use it for the single active tab, the currently-selected segmented control option, and at most one other state per screen.

Body copy *whispers*: regular weight, neutral tracking, justified with hyphenation. The contrast between this hushed body voice and the shouted chrome is the whole game.

## Distinctive Details

1. **The hairline grid is the design.** Every container has a 1px black border. Adjacent components share a single border line via `border-r` / `border-b` / `divide-*` — no double borders, no gaps. The result reads as a printed page broken into cells, not as a stack of floating cards.
2. **Inversion as the only "active" treatment.** No glows, no rings, no shadows, no color tints — just `bg-black text-[#F5F5F5]` flip, or `bg-{primary} text-white` for the single most important action on a screen. Hover/press transitions use `duration-0` (instant) — no ease, no fade. The brutalist feel depends on this snap.
3. **Hero numerals as masthead.** Detail screens often open with a 100–144px numeric or single-word anchor pinned to the top-left of a frame, with faint hairlines crossing the cell behind it. This is the system's signature editorial move — type-as-architecture.

## Do's and Don'ts

### Do

- Use 1px black borders to define every container, divider, and group.
- Reserve `{colors.primary}` for the single highest-priority action or location marker per screen.
- Default photography to `grayscale`; allow color to return only on hover/active.
- Set every uppercase chrome label to +0.1em letter-spacing.
- Use `transition-colors duration-0` for state changes — instant, not eased.
- Compose buttons, chips, and tabs as contiguous strips with internal hairlines, not as floating pills.
- Justify body paragraphs with `text-justify hyphens-auto`.
- Use `{typography.mono-data}` for any numeric measurement (distance, time, count, ID).

### Don't

- Don't add `shadow-*`, `rounded-*` (other than the explicitly square 0px or full-circle exception), or gradients to chrome.
- Don't use the red as a card background, body type color, or border color — it's an *action surface* color only.
- Don't use middle-weight type (400/500/600). The system is built on 400 body vs 700 everything-else.
- Don't insert circular avatars or pill-shaped chips — every shape is a sharp-cornered rectangle.
- Don't tint or saturate photography by default — grayscale is the resting state.
- Don't introduce animation eases or fades on hover; transitions are instant or they're 500ms grayscale-reveals on imagery, nothing in between.
- Don't add a third accent color. Red, black, and the bone/white tonal stack are the entire system.
- Don't render headlines or display numerals at default tracking — they must be tightened (-0.02em to -0.04em) to read as poster shapes.