Industrial Grid Mono-Red DESIGN.md

---
version: 1
name: Industrial Grid Mono-Red Mobile
colors:
  background: "#F5F5F5"
  surface: "#FFFFFF"
  surface-alt: "#E5E5E5"
  on-surface: "#111111"
  on-surface-variant: "#737373"
  on-surface-muted: "#A3A3A3"
  border: "#D4D4D4"
  primary: "#111111"
  on-primary: "#FFFFFF"
  accent: "#FF0000"
  on-accent: "#FFFFFF"
typography:
  display-lg:
    fontFamily: "Instrument Sans"
    fontSize: 13vw
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  display-md:
    fontFamily: "Instrument Sans"
    fontSize: 11vw
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  numeral-lg:
    fontFamily: "Instrument Sans"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0em
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0em
  body-sm:
    fontFamily: "Instrument Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0em
  label-md:
    fontFamily: "Instrument Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.05em
  label-uppercase-sm:
    fontFamily: "Instrument Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
  label-uppercase-xs:
    fontFamily: "Instrument Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.15em
  cta-label:
    fontFamily: "Instrument Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
rounded:
  none: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 20px
  section-padding-x: 32px
  section-padding-y: 20px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 20px
components:
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.cta-label}"
    rounded: "{rounded.none}"
    height: 96px
    paddingX: 24px
    paddingY: 0px
    border: none
    boxShadow: none
  button-secondary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.cta-label}"
    rounded: "{rounded.none}"
    height: 96px
    paddingX: 24px
    paddingY: 0px
    border: none
    boxShadow: none
  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.none}"
    paddingX: 24px
    paddingY: 8px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    size: 56px
    borderColor: "{colors.on-surface}"
    borderWidth: 2px
    boxShadow: none
    iconSize: 24px
  input-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    paddingX: 0px
    paddingY: 12px
    border: none
    boxShadow: none
    focusRingColor: "{colors.accent}"
  chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.none}"
    paddingX: 24px
    paddingY: 8px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.none}"
    paddingX: 24px
    paddingY: 8px
    borderColor: "{colors.on-surface}"
    borderWidth: 1px
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.none}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    paddingX: 32px
    paddingY: 16px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  progress-ring:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    rounded: "{rounded.full}"
    size: 288px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    height: 64px
    paddingX: 24px
    paddingY: 16px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    height: 64px
    paddingX: 24px
    paddingY: 0px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  tab-item-active:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    paddingX: 0px
    paddingY: 0px
    border: none
    boxShadow: none
  tab-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    paddingX: 0px
    paddingY: 0px
    border: none
    boxShadow: none
  toggle-switch:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    width: 56px
    height: 32px
    border: none
    boxShadow: none
---

# Industrial Grid Mono-Red Mobile

## Overview

**Brutalist instrument-panel utilitarianism.** This aesthetic reads like the control surface of a piece of analog studio equipment or a late-modernist editorial spread: hard right angles, hairline rules, all-caps tracked-out labels, oversized tabular numerals, and a single shocking signal-red accent that cuts through an otherwise neutral palette of paper-grey and ink-black.

The personality is technical, deliberate, slightly austere — closer to a darkroom timer or a mixing console than a consumer app. Whitespace exists, but it's structured by visible grid lines and divider rules, not by air. Every element sits in a frame. Every frame is sharp-cornered. Nothing floats.

The result feels honest and information-dense without being cluttered, because the system gives every piece of data a slot in a visible grid and weights only the things that matter.

## Colors

The system runs on a tight neutral stack plus a single vivid accent.

- **`{colors.background}`** (`#F5F5F5`) — the dominant page surface, a warm paper-grey that softens what would otherwise be a clinical white. Used for nearly every screen body and most chrome.
- **`{colors.surface}`** (`#FFFFFF`) — pure white, reserved for component-level surfaces that need to read as a distinct layer. Use sparingly; the design prefers tonal flatness on `{colors.background}`.
- **`{colors.surface-alt}`** (`#E5E5E5`) — a one-step-deeper neutral for hover/active backgrounds and inactive toggle tracks.
- **`{colors.on-surface}`** (`#111111`) — near-black ink for all primary text, primary CTAs, and structural strokes that need to dominate.
- **`{colors.on-surface-variant}`** (`#737373`) — secondary mid-grey for metadata, kicker labels, and de-emphasised numerals.
- **`{colors.on-surface-muted}`** (`#A3A3A3`) — tertiary grey, for the rare third tier.
- **`{colors.border}`** (`#D4D4D4`) — the structural hairline. This color does an enormous amount of work: every divider, every cell rule, every grid line, every input baseline. Treat it as a fourth typographic weight.
- **`{colors.accent}`** (`#FF0000`) — pure signal red. This is the single non-neutral in the system and it must stay rare. Reserve it for: the active state of a primary tab indicator (a 3px underline), one destructive/dangerous CTA in a paired action bar, the "active" position of a toggle, and small inline accent glyphs (e.g. a decimal fragment of a numeral, a small marker square). It must NEVER be used as a card background, a body text color, or a default button fill.

**Palette boundary rule:** the accent red and the ink black are paired but exclusive — a `{colors.primary}` action and a `{colors.accent}` action sit side-by-side as siblings, never stacked. The neutral stack carries everything else.

## Typography

Two typefaces. **Instrument Sans** is the workhorse — a slightly humanist geometric sans that handles every UI role from oversized display numerals to tiny tracked-out kicker labels. **JetBrains Mono** and **Playfair Display** are loaded but reserved as latent options; in practice this aesthetic uses Instrument Sans for everything, leaning on weight 700 throughout and using letter-spacing as the primary differentiator between roles.

Weight strategy: **bold (700) is the workhorse, and there is essentially no other weight.** Hierarchy comes from size, color, letter-spacing, and uppercase — not weight contrast. This is intentional and load-bearing; soft weights would dissolve the grid feel.

Tracking is the most opinionated lever in the system:
- Display numerals (`{typography.display-lg}`, `{typography.display-md}`) are tightly tracked (`-0.02em`) and use `tabular-nums`. They fill the screen width as viewport-relative units.
- All-caps UI labels are aggressively tracked OUT — `0.1em` for kicker captions (`{typography.label-uppercase-sm}`), `0.15em` for the smallest kicker (`{typography.label-uppercase-xs}`), and `0.2em` for primary CTA labels (`{typography.cta-label}`). The wide tracking is the signature "instrument panel" feel.
- Body and label sizes are bold but normally tracked.

Role usage:
- `{typography.display-lg}` and `{typography.display-md}` — hero numerals (counters, timers, oversized stats). Always `tabular-nums`.
- `{typography.numeral-lg}` — secondary stats and metric values inside data rows.
- `{typography.headline-md}` — section anchors when needed (rare; most sections use a kicker instead of a heading).
- `{typography.body-md}` / `{typography.body-sm}` — list-row content, settings labels, dense data values.
- `{typography.label-md}` — top-bar nav labels (uppercase, moderate tracking).
- `{typography.label-uppercase-sm}` / `{typography.label-uppercase-xs}` — kickers, column headers, metadata captions. Always rendered in `{colors.on-surface-variant}`.
- `{typography.cta-label}` — full-width primary CTAs, maximally tracked.

## Spacing & Layout

Density: **medium-dense, grid-anchored.** Sections are bounded by visible hairlines rather than by generous whitespace, so content can sit closer than a typical iOS-style app while still reading as orderly.

- `{spacing.gutter}` (24px) — the standard horizontal screen inset.
- `{spacing.section-padding-x}` (32px) — wider horizontal padding inside grouped settings/data sections, so column-rules and cell-rules have breathing room.
- `{spacing.section-padding-y}` (20px) — vertical padding above/below sectioned content blocks.
- `{spacing.card-padding}` (20px) — internal padding for any contained card-like region.

Vertical rhythm is enforced by hairline dividers (`{colors.border}` at 1px) between every list row, every settings row, every section. There are no rounded "card islands" floating in space — content is structured by visible rules, not by elevation.

A signature layout move: **faint vertical gridlines** at 1/3 and 2/3 of the screen width (`{colors.border}/30`, 1px) run the full height beneath all content, giving every screen the underlying feel of a printed grid even when content doesn't strictly snap to it.

## Elevation & Depth

**Flat. Zero shadows. Zero blur.** All hierarchy is conveyed by:

1. **Hairline strokes** in `{colors.border}` — the workhorse of separation.
2. **Tonal contrast** between `{colors.background}` and `{colors.surface-alt}` for hover/active states.
3. **Color contrast** — the red accent and the ink-black primary do all the "lifting."
4. **Border weight upgrades** — the rare 2px black border on icon buttons makes them feel pressed-out from the page without using a shadow.

If you find yourself reaching for `box-shadow`, you're outside the aesthetic. Use a thicker border or a tonal background swap instead.

## Shapes

**Sharp corners everywhere.** The radius scale has effectively two values: `{rounded.none}` (0px, the default for nearly everything) and `{rounded.full}` (only for circular elements like the timer ring and small marker dots).

- Cards, buttons, inputs, chips, badges, toggles, sections — all 0px radius.
- Decorative circles (progress rings, tick marks on the ring's compass points) — full round.

There is no `sm`/`md`/`lg` radius progression because the system does not soften corners as a visual lever at all. The right angle is an aesthetic commitment: it's what makes the design feel like an instrument and not an app.

## Components

### card

Cards in this system are NOT floating, rounded, padded islands. They are bounded regions defined by hairline rules above and below, sitting on the page background.

```html
<section class="bg-[#F5F5F5] border-b border-[#D4D4D4]">
  <div class="px-8 py-5">
    <h2 class="text-[10px] font-bold uppercase tracking-[0.15em] text-[#737373] mb-6">[SECTION KICKER]</h2>
    <!-- content -->
  </div>
</section>
```

### button-primary

Full-width, 96px tall, ink-black, all-caps maximally-tracked label with a leading or trailing icon. Used as the primary slot in a paired bottom action bar.

```html
<button class="flex items-center justify-center h-24 bg-[#111111] text-white hover:bg-[#000000] active:bg-[#333333] transition-colors focus:outline-none">
  <div class="flex flex-col items-center gap-1">
    <span class="text-sm font-bold uppercase tracking-[0.2em]">[ACTION]</span>
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  </div>
</button>
```

### button-secondary (paired-accent variant)

Same dimensions and treatment as `button-primary`, but filled in `{colors.accent}` red. Used ONLY as the partner to `button-primary` in a 2-column action bar — never alone, never on a neutral content surface as a single CTA.

```html
<button class="flex items-center justify-center h-24 bg-[#FF0000] text-white hover:bg-[#CC0000] active:bg-[#990000] transition-colors focus:outline-none border-l border-white/10">
  <div class="flex flex-col items-center gap-1">
    <span class="text-sm font-bold uppercase tracking-[0.2em]">[ACTION]</span>
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  </div>
</button>
```

### button-text (chip-style preset)

A bordered, tracked-uppercase label for low-attention quick actions (e.g. presets, filter values).

```html
<button class="px-6 py-2 border border-[#D4D4D4] bg-[#F5F5F5] hover:bg-[#E5E5E5] active:bg-[#D4D4D4] transition-colors">
  <span class="text-xs font-bold tracking-[0.1em] uppercase">[LABEL]</span>
</button>
```

### button-icon

A 56px square, 2px black-bordered, page-background-filled icon button. The thick black stroke is a signature — it's what makes the button feel die-cut from the page. Reserve for FAB-style secondary affordances.

```html
<button class="size-14 bg-[#F5F5F5] border-2 border-[#111111] flex items-center justify-center hover:bg-[#E5E5E5] active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#111111] size-6"></iconify-icon>
</button>
```

### input-text

Borderless, baseline-aligned, sharing the page background. Inputs do not look like input chrome — they look like editable text with an underline rule below if separation is needed.

```html
<input type="text" class="w-full bg-transparent border-none focus:outline-none text-base font-bold text-[#111111] tabular-nums py-3" placeholder="[PLACEHOLDER]" />
```

For oversized centered numeric inputs (e.g. timer-style entry), scale the same approach to display-lg sizing and `text-center`.

### chip / chip-active

Sharp-cornered, hairline-bordered, all-caps tracked label. The active state uses a deeper stroke (the black `on-surface` color) and the surface-alt fill.

```html
<button class="px-6 py-2 border border-[#D4D4D4] bg-[#F5F5F5] text-[#111111]">
  <span class="text-xs font-bold tracking-[0.1em] uppercase">[CHIP]</span>
</button>
<button class="px-6 py-2 border border-[#111111] bg-[#E5E5E5] text-[#111111]">
  <span class="text-xs font-bold tracking-[0.1em] uppercase">[CHIP]</span>
</button>
```

### badge-pill

A minimal sharp-cornered tag in the accent red — used for status flags or count callouts where a vivid signal is appropriate.

```html
<span class="bg-[#FF0000] text-white text-[10px] font-bold uppercase tracking-[0.15em] px-2 py-1">[STATUS]</span>
```

### list-row

A row in a data table or settings list. Hairline divider below, generous horizontal padding, content typically aligned in a 2- or 3-column flex with the leftmost item de-emphasised in `{colors.on-surface-variant}` and the data values in `{colors.on-surface}` with `tabular-nums`.

```html
<div class="flex justify-between items-center px-8 py-4 border-b border-[#D4D4D4] hover:bg-[#E5E5E5] transition-colors">
  <span class="text-sm font-bold tabular-nums text-[#737373]">[INDEX]</span>
  <span class="text-base font-bold tabular-nums text-[#111111] pl-12">[VALUE]</span>
  <span class="text-base font-bold tabular-nums text-[#111111]">[VALUE]</span>
</div>
```

For column headers above a list, prefix with a sticky kicker row using `{typography.label-uppercase-xs}` in `{colors.on-surface-variant}` against the page background.

### progress-ring

A circular progress indicator built from concentric thin rings plus a `conic-gradient` fill. The ring uses the accent red and sits inside one or two outer hairline guide circles. Compass tick marks (1px × 12px black ticks at N/E/S/W) reinforce the instrument feel.

```html
<div class="relative flex items-center justify-center">
  <div class="absolute size-80 rounded-full border-2 border-[#D4D4D4]"></div>
  <div class="absolute size-72 rounded-full border border-[#D4D4D4]/60"></div>
  <div class="absolute size-72 rounded-full" style="background: conic-gradient(from 270deg, #FF0000 0deg [PROGRESS]deg, transparent [PROGRESS]deg 360deg);"></div>
  <div class="absolute size-64 rounded-full bg-[#F5F5F5]"></div>
  <div class="relative z-10 flex flex-col items-center justify-center">
    <span class="text-[11vw] leading-none font-bold tracking-tight text-[#111111] text-center tabular-nums">[VALUE]</span>
    <span class="text-[10px] font-bold uppercase tracking-[0.15em] text-[#737373] mt-3">[CAPTION]</span>
  </div>
  <div class="absolute size-80">
    <div class="absolute top-0 left-1/2 w-px h-3 bg-[#111111] -translate-x-1/2"></div>
    <div class="absolute bottom-0 left-1/2 w-px h-3 bg-[#111111] -translate-x-1/2"></div>
    <div class="absolute top-1/2 left-0 h-px w-3 bg-[#111111] -translate-y-1/2"></div>
    <div class="absolute top-1/2 right-0 h-px w-3 bg-[#111111] -translate-y-1/2"></div>
  </div>
</div>
```

### top-app-bar / tab-bar (top-mounted)

A 64px-tall horizontal bar with a hairline bottom border. Holds 2–4 inline uppercase nav labels with generous horizontal gap, plus an optional trailing utility icon at low opacity. The active tab is marked by a 3px solid `{colors.accent}` underline that hangs 16px below the label baseline (so it visually bisects the bar's bottom border).

```html
<header class="relative flex items-end justify-between px-6 h-16 pt-6 pb-4 bg-[#F5F5F5] border-b border-[#D4D4D4]">
  <div class="flex space-x-8">
    <div class="relative cursor-pointer">
      <span class="text-sm font-bold tracking-[0.05em] uppercase text-[#111111]">[ACTIVE]</span>
      <div class="absolute -bottom-4 left-0 right-0 h-[3px] bg-[#FF0000]"></div>
    </div>
    <div class="cursor-pointer opacity-40">
      <span class="text-sm font-bold tracking-[0.05em] uppercase text-[#111111]">[INACTIVE]</span>
    </div>
  </div>
  <div class="opacity-40">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  </div>
</header>
```

### Composition recipes (Tier 3 — prose only, not in YAML)

- **Sectioned settings group** = a kicker (`{typography.label-uppercase-xs}` in `{colors.on-surface-variant}`) followed by a stack of label-toggle rows separated by hairlines, all wrapped in a `border-b border-[colors.border]` block.
- **Toggle row** = `flex justify-between items-center py-4` with `{typography.body-md}` label on the left and a hard-cornered toggle on the right. The toggle is a 56×32 rectangle filled `{colors.accent}` (on) or `{colors.surface-alt}` (off), with a 32×32 black square handle pinned to the right (on) or left (off) — no rounding.
- **Numeric stat block** = a kicker label (`{typography.label-uppercase-xs}`) above a `tabular-nums` value at `{typography.numeral-lg}`, no border, no card — just two stacked text elements aligned to the row.
- **Decimal accent split** = oversized display numerals where a fractional/decimal portion is colored `{colors.accent}` while the integer portion stays `{colors.on-surface}` (e.g. `00:45<span class="text-[#FF0000]">.32</span>`). This is a signature decoration move and should be used sparingly — once per screen.
- **Tonal action variant** for low-emphasis CTAs: render `button-primary` with `bg-transparent` + `border border-[colors.border]` and `text-[colors.on-surface]` instead of black-on-white.

## Iconography

- **Set:** `solar`, `bold` variant exclusively. The chunky, slightly geometric solar-bold icons echo the bold-only typographic strategy — lighter line variants would feel inconsistent.
- **Variant convention:** always `solar:[icon-name]-bold`. There is no active/inactive variant switch (that role is played by the red accent underline on the parent label, not by swapping icons).
- **Default size:** 20px in chrome contexts (top bar, CTAs); 24px in floating icon buttons; can scale up to 28–32px when an icon is the primary affordance of a card.
- **Color:** icons inherit the surrounding text color. On accent-red surfaces they are `{colors.on-accent}`; on primary-black surfaces `{colors.on-primary}`; on neutral page surfaces `{colors.on-surface}`. Inactive top-bar utility icons sit at `opacity-40`.
- **Density:** sparse. One trailing icon in the top bar, one icon per CTA, one icon per FAB-style affordance. Don't decorate list rows with leading icons — use kicker labels instead.

## Illustration & Imagery

**This aesthetic does not use imagery.** Adding photos or illustrations would clash with the instrument-panel typographic-and-grid system — the visual language is built entirely from rules, ink, and tracked-out type. Implement image-shaped requirements with these typographic & geometric fallbacks instead:

- **Avatars** → render as a hard-cornered (`{rounded.none}`) square in `{colors.surface-alt}` containing a single uppercase initial set in `{typography.label-md}`, color `{colors.on-surface}`. Size matches the surrounding row height. NEVER round the avatar — it must be a square.
- **Hero illustrations** → render as an oversized typographic block (one or two words in `{typography.display-lg}` with the decimal-accent split treatment), or a bold geometric arrangement of concentric rings with compass tick marks (the `progress-ring` motif scaled up), or a grid of monospace-numeric data cells. Never insert a photographic or illustrative `<img>`.
- **Product / item thumbnails** → render as a hard-cornered tile in `{colors.surface-alt}` or `{colors.background}` with a 1px `{colors.border}` rule, containing a single large `solar:[icon-name]-bold` icon centered in `{colors.on-surface}`. Differentiate items by icon, not by tile color (the palette stays neutral).
- **Background imagery / atmospherics** → none. The page surface remains flat `{colors.background}`. The faint 1/3 and 2/3 vertical gridlines are the only "atmosphere" allowed.
- **Decorative graphics** → confined to: hairline rules, the concentric-ring progress motif, compass tick marks (1px × 12px black), small marker squares (12×12 solid black or solid red dots in screen corners as fixed structural anchors), and the decimal-accent split treatment on numerals. Nothing else.

If a future brief absolutely requires a photograph (e.g. user-uploaded content, product photography), present it inside a hard-cornered (`{rounded.none}`) frame with a 1px `{colors.border}` hairline, no shadow, no filter, `object-cover`, and contain it strictly to the data slot — never use it as decoration. Consider rendering the photo with `grayscale` and `mix-blend-mode: multiply` against the page background to keep it consistent with the monochrome system; a single accent-red overlay bar or label can then re-anchor the brand voice.

## Do's and Don'ts

### Do

- Use bold (700) as the only weight. Build hierarchy with size, color, tracking, and case.
- Track all-caps labels generously: `0.1em`–`0.2em` depending on size.
- Use `tabular-nums` on every numeral, full stop. The grid relies on it.
- Separate sections and rows with hairline `{colors.border}` rules at 1px.
- Keep the accent red rare and intentional — one or two surfaces per screen, never as ambient color.
- Pair a black `{button-primary}` and a red `{button-secondary}` as siblings in a 2-column action bar at the bottom of action-oriented screens.
- Use sharp `{rounded.none}` corners on every chrome surface; reserve `{rounded.full}` for genuine circles only.
- Anchor the page with the faint 1/3 and 2/3 vertical gridlines for that printed-grid feel.

### Don't

- Don't add `box-shadow` anywhere. The aesthetic is uncompromisingly flat.
- Don't soften corners "for friendliness." Sharp corners are load-bearing.
- Don't use the accent red as a background fill behind body content, as a card surface, or as a default button color.
- Don't introduce mid-weight type (regular/medium) — it dissolves the structural feel.
- Don't insert illustrations, photographs, or 3D/clay assets. The system is image-free by design.
- Don't replace hairline dividers with whitespace gaps; the visible rule IS the rhythm.
- Don't decorate list rows with leading category icons; lead with a kicker label or a tabular index instead.
- Don't pluralize accent colors — there is one signal red and no second accent.
- Don't bias toward the loaded `Playfair Display` or `JetBrains Mono` faces; Instrument Sans handles every role and the alternate faces are latent options, not defaults.