--- 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 KICKER]

``` ### 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-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-text (chip-style preset) A bordered, tracked-uppercase label for low-attention quick actions (e.g. presets, filter values). ```html ``` ### 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 ``` ### 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 ``` 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 ``` ### 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 [STATUS] ``` ### 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
[INDEX] [VALUE] [VALUE]
``` 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
[VALUE] [CAPTION]
``` ### 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
[ACTIVE]
[INACTIVE]
``` ### 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.32`). 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 ``. - **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.