--- version: 1 name: Brutalist Mono Mobile colors: background: "#FFFFFF" foreground: "#000000" primary: "#01010D" on-primary: "#FFFFFF" surface: "#FFFFFF" surface-alt: "#F4F4F5" surface-secondary: "#E5E5E5" on-surface: "#000000" on-surface-variant: "#737373" border: "#000000" accent: "#0000FF" on-accent: "#FFFFFF" error: "#FF0000" typography: display-xl: fontFamily: "Space Grotesk" fontSize: 160px fontWeight: 900 lineHeight: 0.8 letterSpacing: -0.04em display-lg: fontFamily: "Space Grotesk" fontSize: 60px fontWeight: 900 lineHeight: 1 letterSpacing: -0.02em display-md: fontFamily: "Space Grotesk" fontSize: 48px fontWeight: 900 lineHeight: 1 letterSpacing: -0.04em headline-lg: fontFamily: "Space Grotesk" fontSize: 36px fontWeight: 900 lineHeight: 1 letterSpacing: -0.02em headline-md: fontFamily: "Space Grotesk" fontSize: 30px fontWeight: 900 lineHeight: 1 letterSpacing: -0.02em headline-sm: fontFamily: "Space Grotesk" fontSize: 24px fontWeight: 900 lineHeight: 1 letterSpacing: -0.02em body-lg: fontFamily: "Geist" fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0em body-md: fontFamily: "Geist" fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0em label-md: fontFamily: "Geist" fontSize: 14px fontWeight: 700 lineHeight: 1 letterSpacing: 0em label-sm: fontFamily: "Geist" fontSize: 12px fontWeight: 700 lineHeight: 1 letterSpacing: 0em mono-caption: fontFamily: "JetBrains Mono" fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em mono-micro: fontFamily: "JetBrains Mono" fontSize: 10px fontWeight: 700 lineHeight: 1 letterSpacing: 0.1em rounded: none: 0px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px gutter: 24px card-padding: 24px row-padding: 16px icons: set: solar default_variant: bold active_variant: bold stroke_weight: n/a default_size: 24px components: card: backgroundColor: "{colors.background}" borderColor: "{colors.border}" borderWidth: 3px rounded: "{rounded.none}" padding: "{spacing.card-padding}" boxShadow: none card-elevated: backgroundColor: "{colors.background}" borderColor: "{colors.border}" borderWidth: 3px rounded: "{rounded.none}" padding: "{spacing.card-padding}" boxShadow: "4px 4px 0px 0px rgba(0,0,0,1)" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.border}" borderWidth: 3px typography: "{typography.label-md}" rounded: "{rounded.none}" paddingX: 16px paddingY: 12px boxShadow: none button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" borderColor: "{colors.border}" borderWidth: 3px typography: "{typography.label-md}" rounded: "{rounded.none}" paddingX: 16px paddingY: 8px boxShadow: none button-icon: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" borderColor: "{colors.border}" borderWidth: 3px rounded: "{rounded.none}" size: 48px iconSize: 24px boxShadow: none input-text: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" borderColor: "{colors.border}" borderWidth: 3px typography: "{typography.body-md}" rounded: "{rounded.none}" paddingX: 16px paddingY: 16px boxShadow: none list-row: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" borderColor: "{colors.border}" borderWidth: 3px rounded: "{rounded.none}" paddingX: 16px paddingY: 16px boxShadow: none progress-bar: backgroundColor: "{colors.surface-secondary}" borderColor: "{colors.border}" borderWidth: 3px rounded: "{rounded.none}" height: 16px boxShadow: none top-app-bar: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" borderColor: "{colors.border}" borderWidth: 4px typography: "{typography.headline-lg}" rounded: "{rounded.none}" padding: "{spacing.lg}" boxShadow: none tab-bar: backgroundColor: "{colors.background}" borderColor: "{colors.border}" borderWidth: 4px rounded: "{rounded.none}" height: 60px boxShadow: none tab-item-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.none}" border: none boxShadow: none tab-item-inactive: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" typography: "{typography.label-md}" rounded: "{rounded.none}" border: none boxShadow: none --- # Brutalist Mono Mobile ## Overview **Loud, structural, and unapologetically square.** This is a brutalist editorial aesthetic translated to mobile: pure white surfaces partitioned by thick (3–4px) hard black rules, oversized condensed-feeling display type set in a black weight, and a single saturated electric-blue accent reserved for state and emphasis. Nothing is rounded, nothing is soft, nothing is decorative-for-decoration's-sake. Every line on the screen is doing structural work. The personality is **technical, confident, almost newsprint-grade**. Mono captions evoke coordinates, datasheets, and terminal output. Display type is shouted in uppercase with negative tracking. The interface reads as a printed broadside more than a polished consumer app. The aesthetic earns its loudness by being relentlessly disciplined: only black, white, and one blue. Only one radius (zero). Only one elevation move (offset hard shadows on selected chrome). Strip any of those rules and it collapses into noise. ## Colors The palette is **monochrome with a single ultraviolet accent**. There is no secondary brand color, no tonal range, no gradient. - `{colors.background}` (`#FFFFFF`) — the universal page surface. Cards, the app bar, tab bar, and content areas all sit on it. - `{colors.foreground}` / `{colors.border}` (`#000000`) — pure black does double duty as text and as every structural rule on the screen. The 3–4px black border IS the design. - `{colors.primary}` (`#01010D`) — near-black, used as the inverted-fill state for the active tab item, primary CTA fills, and segments of progress fills. - `{colors.on-primary}` (`#FFFFFF`) — text/icon on `primary`. - `{colors.surface-alt}` (`#F4F4F5`) — a barely-there neutral, used ONLY as a hover or selected-row tint. Never a card background, never the page. - `{colors.surface-secondary}` (`#E5E5E5`) — empty-track color for progress bars. - `{colors.on-surface-variant}` (`#737373`) — secondary text (coordinates, supplementary captions) — used sparingly and almost always paired with the mono typeface. - `{colors.accent}` (`#0000FF`) — the load-bearing color decision. Pure RGB blue, reserved for: active/highlighted state words ("RAIN.", "85%"), the small leading status icon next to a primary item, and emphasis pills. NEVER a card background, NEVER chrome, NEVER decorative. - `{colors.error}` (`#FF0000`) — pure red, reserved for severity / alarm signals (heavy precipitation, destructive actions). Used at the same restraint level as accent. **Strict palette rules:** - Black is structure. Blue is emphasis. White is breath. Red is alarm. There are no other roles. - Never tint cards, rows, or buttons with accent or error fills. Accent appears as foreground (text/icon) or as a small geometric mark. - The hover/selected tint (`surface-alt`) is the ONLY soft surface tone — and it's nearly imperceptible by design. ## Typography Three typefaces, each with a strict job. **No italics, no decorative weights, no swaps mid-role.** - **Space Grotesk** at weight 900 (`fontFamily: "Space Grotesk"`) — every display, headline, and large numeric figure. Always with negative letter-spacing (-0.02em to -0.04em). The condensed-feeling geometry plus the heavy weight is what makes the aesthetic feel structural rather than soft. - **Geist** at weight 700 (`fontFamily: "Geist"`) — body text, button labels, list-row values, navigation labels. Bold-by-default. There is no Regular weight in this system. - **JetBrains Mono** at weight 500–700 — used exclusively for metadata, coordinates, timestamps, and micro-captions. Always uppercase, always with wide tracking (`letterSpacing: 0.1em`). The mono is decorative-AND-functional: it signals "data" the way a label on a technical drawing does. **Roles:** - `{typography.display-xl}` — the hero numeric (a primary metric or count rendered at huge scale). One per screen, max. - `{typography.display-lg}` / `{typography.display-md}` — emphasized state words and large grouped numerics. Display-lg is the saturated accent-colored shouted word. - `{typography.headline-lg}` — primary screen titles in the top app bar. Always uppercase. - `{typography.headline-md}` / `{typography.headline-sm}` — secondary section titles, list-row names, hero values inside cards. - `{typography.body-lg}` / `{typography.body-md}` — supporting bold body text. - `{typography.label-md}` / `{typography.label-sm}` — buttons, tab bar items. - `{typography.mono-caption}` — coordinates, status strings, time-of-day metadata. Always uppercase + tracked. - `{typography.mono-micro}` — legend labels, table headers, micro-metadata above a value (e.g. an eyebrow above a numeric stat). **Compositional recipes** (these are NOT components — they're combinations the implementer should reach for): - **Eyebrow + value stat tile**: `mono-micro` uppercase eyebrow above a `headline-md` value, both inside a `card` with `card-padding`. Use this for any "labeled metric" pattern. - **Coordinate caption**: a `mono-caption` line preceded by a 3px black left-border (a `border-l-[3px] border-black pl-3` decoration). This is a signature treatment — see Distinctive Details. - **Title + emphasized state line**: a `display-md` neutral line followed immediately by a `display-lg` accent-colored line ending in a period (".") to punch the state. ## Spacing & Layout Density is **medium-high with generous edge gutters**. Every page uses a `{spacing.gutter}` (24px) horizontal inset for primary content blocks. Internal card padding matches at 24px. List rows use a tighter 16px vertical padding to allow ~6 rows on screen comfortably. Vertical rhythm is established not by whitespace but by **black dividing rules**. Sections separate with 4px-bottom-borders; rows separate with 3px-bottom-borders. There is no marginal whitespace between blocks — each block butts up against the next, separated only by the rule. This is the brutalist newsprint move: composition by partition, not by float. The bottom tab bar is `position: fixed`, full-width, 4px top-bordered. Content scroll areas reserve `pb-20` to `pb-28` so nothing hides behind it. ## Elevation & Depth The system is **structurally flat with one elevated state**. There are no soft drop shadows. - Default elevation: zero. Cards, rows, the app bar, and the tab bar all sit at the page's z=0, separated only by their black borders. - One signature elevation move: **offset hard shadow `4px 4px 0px 0px rgba(0,0,0,1)`** — a solid black square offset down-right with no blur. Used on floating overlay controls (e.g. map zoom controls) to lift them above content imagery. The active state retracts the offset (`active:translate-x-[2px] active:translate-y-[2px] active:shadow-none`) so the button visually "presses in." This is the only shadow recipe in the entire system. Hover state on rows and buttons is conveyed by inverting fill/text (white→black background, black→white text) — never by shadow or elevation change. ## Shapes **Radius is zero. Everywhere.** The `--radius` token is `0rem`. Every card, button, input, chip, image, and avatar is a hard rectangle. The only exception in this system is the `rounded-full` utility, used exclusively for inline atmospheric blobs over imagery (e.g. blurred heat-map overlays on the map). It is never used on a chrome surface, button, or container. The shape language is **a grid of squares cut by orthogonal black rules**. If a shape has a curve, it's an icon glyph or an atmospheric overlay — not chrome. ## Components ### card Square white surface bounded by a 3px black border. No shadow, no inner radius. ```html
[Eyebrow label]
[Value]
``` ### card-elevated Same card, lifted with the offset hard shadow. Reserve for floating controls over imagery. ```html ``` This is signature — without it, the system loses its single playful kinetic move. Use sparingly. ### button-primary Inverted-fill rectangle. Black ground, white text, 3px black border (yes, even on black — the border is part of the visual rhythm). ```html ``` ### button-secondary White ground, black text, 3px black border. The default "tap-able" look. ```html ``` ### button-icon Square 48px (or 64px hero variant) with 3–4px black border. Icon only. ```html ``` For an inverted variant (active / primary action), add `bg-[#01010D] text-white`. ### input-text Square white input with 3px black border. Placeholder is uppercase tracked. On focus, fill shifts to `surface-alt`. ```html
``` ### list-row Full-width row with a 3px bottom-border-only (the row sits inside an already-bordered scroll container). Hover applies `surface-alt` tint. The selected state applies the same tint at full opacity. ```html
[Label]
[Value]
``` The internal **2px black horizontal rule connecting the icon side to the value side** is a signature compositional move — the row reads like a typographic specimen with leader rules. ### progress-bar Squared 3px-bordered track on `surface-secondary` with a black fill segment. A separate 3px-bordered square thumb (white fill) marks the current position. ```html
``` ### top-app-bar Full-bleed, 4px bottom-bordered header with the screen title in `headline-lg` uppercase + a single trailing action (button-secondary or button-icon). Optional sub-row below for breadcrumbs/coordinates uses the `mono-caption` left-rule decoration. ```html

[SCREEN TITLE]

[Metadata line]

``` ### tab-bar / tab-item-active / tab-item-inactive Fixed-bottom three-up bar with 4px top-border, 3px between-item-borders. Active item is fully inverted (black ground, white text); inactive items are white with the same hover-invert. ```html
``` ### Compositional recipes (NOT components) - **Stat tile** (eyebrow + value): a `border-[3px] border-black p-4 flex flex-col` containing `mono-micro` uppercase eyebrow above a `headline-md` value. Use accent color on the value when the metric is at-emphasis (e.g. high probability, severity). - **Hero metric block**: a full-width section with `display-xl` numeric on the left, a stacked `display-lg` accent-colored state word + `headline-lg` neutral subvalue, and a 96×96 square bordered icon plate in the bottom-right corner. - **Horizontal scroll strip**: a row of `min-w-[5rem]` items each with right-3px-black-divider. The active item inverts to black fill / white text. No rounded corners, no padding outside the dividers. - **Tonal-secondary action**: render `button-primary` with `bg-white text-black` instead — the inverse fill IS the secondary recipe. ## Iconography - Set: **Solar** (Iconify `solar:*`). Bold-filled glyphs match the heavy-weight type and the chunky 3px chrome borders. Linear variants are used only for navigational affordances (back arrow, search magnifier) where a hairline glyph reads more clearly inside an input field. - Default variant: `bold` (filled). Active variant: `bold` (state is signaled by color or by inverting the container, not by swapping line→fill). - Default size: `size-6` (24px). Inside a 48px square button: `size-8` (32px). Inside a 64px hero plate: `size-8` (32px) up to `size-16` (64px) for primary glyphs. - Glyphs are colored either `currentColor` (defaults to black) or `accent` for at-emphasis state. Never tint glyphs with arbitrary colors except in semantically-categorical contexts (e.g. a categorical icon next to a list row may use a saturated category color, but accent and error remain reserved). ## Illustration & Imagery The source HTML uses one `` (a satellite/map photograph) treated as **muted background imagery** for an atmospheric overlay screen. Imagery in this aesthetic is **strictly photographic, never illustrative**, and always heavily processed. - **Style / Technique**: photographic only. Treat photography as raw material to be flattened — desaturated, reduced in opacity, and overlaid with vector chrome. No painted illustration, no flat-vector scenes, no 3D, no characters, no mascots. - **Palette**: enforced monochrome. Apply `grayscale(100%)` to every photographic ``. The only color allowed on top of imagery is the system accent (`{colors.accent}`) and `{colors.error}`, applied as semi-transparent blurred geometric overlays — never as a tint on the photo itself. - **Edge treatment**: no outlines on the photo itself; the photo is contained by its 4px black frame. Inside the photo, no vignettes, no feathering. - **Shading & light**: not applicable — the source photograph carries its own light, but it's neutralized by grayscale + 50% opacity. The photo recedes to nearly textural. - **Composition & framing**: photo fills its container with `object-cover`. Framing is subject-agnostic — landscape/aerial/textural imagery works best because the brutalist chrome IS the focal layer; the photo is wallpaper. - **Background within the imagery**: whatever the photo carries, washed out by `grayscale opacity-50`. - **Container styling**: photos sit inside a `flex-1` content region bounded by a 4px black bottom-border (top edge bounded by the app bar's 4px border, side edges by the device viewport). No inner padding around the image. No `rounded-*` class — radius is zero. - **CSS treatment on the `` element**: exact recipe is `class="w-full h-full object-cover grayscale opacity-50"`. Use these four utilities literally; do not substitute `mix-blend-mode`, `filter: sepia`, or other treatments. - **Box-shadow on the image or its frame**: none. The photo sits flat; only overlaid floating controls (`card-elevated`) carry the offset hard shadow. - **Aspect ratio rule**: the photo fills the container, ratio is irrelevant — crop aggressively with `object-cover`. - **Anti-references**: NOT illustration, NOT 3D, NOT clay, NOT vector, NOT cartoon, NOT pastel, NOT photoreal-and-saturated, NOT character-based, NOT mascot. - **Style recipe prompt**: *A documentary or aerial photograph of [SUBJECT], rendered in pure black-and-white with desaturated mid-grey midtones, soft natural lighting, no color cast, framed full-bleed inside a 4px-thick hard black rectangle on a stark white page. The image sits at 50% opacity, allowing the white background to bleach through and reduce the photo to a textural underlay. No filters beyond grayscale; no vignettes; no border treatments other than the surrounding hard black frame. The image is not the focus — it is wallpaper for vector chrome (electric-blue and red blurred circular overlays, white squared 3px-bordered control buttons) that sits on top of it.* When a brief calls for what would conventionally be an illustration, **render it as typographic-and-geometric chrome instead** — an oversized `display-xl` numeric, a square bordered icon plate at 64–96px, a black-rule-and-bullet legend block — never a generated illustration. ## Hierarchy & Emphasis Hierarchy is conveyed by **scale, weight, and color in that order**. Things that matter most are larger and shouted in 900-weight Space Grotesk. Things that whisper are 12px JetBrains Mono uppercase tracked. - **Largest typographic element on the screen** = the at-glance metric (display-xl). One per screen. - **Saturated accent blue** = state-of-the-moment word — exactly one accent-colored phrase or numeric per screen group, used to make the eye land. - **Black 4px borders** = primary structural divisions (page sections). **Black 3px borders** = secondary divisions (rows, cards, controls). The 1px difference between 4 and 3 is load-bearing — don't flatten them. - **Mono captions** = always supporting, never primary. They orbit a heavier display element. Active states are signaled by **fill inversion** (black ground, white text), not by color shift. The only color-as-state move is the accent-colored numeric or word. ## Distinctive Details 1. **The left-rule mono caption.** A `mono-caption` line preceded by a 3px solid black left-border with 12px left-padding. This appears as a subhead under the screen title and as a status line in the app bar. It evokes a printed margin annotation and is the design's most recognizable typographic move. Recipe: `class="font-mono text-xs uppercase tracking-widest border-l-[3px] border-black pl-3"`. 2. **The mid-row leader rule.** Inside list rows, a 2px black horizontal line stretches between the row's left content (icon + label) and right content (value), filling the available space (`
`). It turns every row into a typographic specimen and is the system's signature row treatment. 3. **The offset hard-shadow control.** `shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]` paired with a press-in active state. The only kinetic move in the entire system, reserved for buttons that float over imagery. It's playful precisely because everything else is rigid. ## Do's and Don'ts ### Do - Use 4px black borders for top-level page divisions and 3px for secondary divisions — preserve the hierarchy. - Reserve accent blue for at-emphasis state words, semantic icons, and the active progress thumb. - Set every display heading in Space Grotesk 900 with negative tracking, uppercase. - Use JetBrains Mono uppercase + 0.1em tracking for ALL coordinate, timestamp, eyebrow, and metadata text. - Pair the `mono-caption` with the 3px left-border for any annotation under a heading. - Apply `grayscale opacity-50` to every photographic `` without exception. - Invert fill (black ground, white text) for active states and hover — not shadow, not color shift. - Use the offset hard shadow only on floating controls over imagery, never on cards or list rows. ### Don't - Don't introduce any rounded corners (except `rounded-full` on atmospheric blurred blobs over imagery). - Don't use accent or error as a fill on cards, buttons, or chrome — they are foreground colors only. - Don't use soft shadows, gradients, or any blur effect on chrome surfaces. - Don't mix in additional brand colors, tonal scales, or pastels — the palette is black, white, blue, red, and two greys. - Don't render illustrations, 3D, clay, mascots, or vector scenes — imagery is photographic-and-monochrome only. - Don't use Geist Regular or any non-bold body weight — Geist 700 is the body floor. - Don't tint photographs with color — grayscale is enforced. Color overlays may sit on top, never under. - Don't add decorative components for layout (timeline rails, hero illustration tiles, sticky CTA bars) — the brutalist grid does the work. - Don't soften the active-state contrast — full inversion is the rule, not a partial tint.