Neon Brutalist DESIGN.md

---
version: 1
name: "Neon Brutalist Mobile"
colors:
  background: "#1A1A1A"
  surface: "#222222"
  surface-alt: "#2A2A2A"
  surface-muted: "#333333"
  on-surface: "#FFFFFF"
  on-surface-variant: "#A1A1A1"
  primary: "#C6FF00"
  on-primary: "#000000"
  border: "#333333"
  accent-red: "#FF6B6B"
  accent-blue: "#4A9EFF"
  accent-amber: "#FFB84D"
  accent-violet: "#A855F7"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.04em
  display-md:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.035em
  numeral-xl:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.04em
  numeral-lg:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.035em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  label-uppercase-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.1em
  label-uppercase-sm:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12em
  button-label:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0.1em
rounded:
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  gutter: 16px
  card-padding: 16px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "4px 4px 0 rgba(0,0,0,0.3)"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    height: 56px
    paddingX: 24px
    border: none
    boxShadow: "4px 4px 0 rgba(198,255,0,0.2)"
    gap: 8px
    iconSize: 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-label}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    height: 56px
    paddingX: 24px
    boxShadow: none
    gap: 8px
    iconSize: 20px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    border: none
    boxShadow: none
    paddingX: 0
    paddingY: 0
    gap: 4px
  input-text:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    height: 56px
    paddingX: 16px
    boxShadow: "4px 4px 0 rgba(0,0,0,0.3)"
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    height: 40px
    paddingX: 24px
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase-sm}"
    border: none
    rounded: "{rounded.full}"
    height: 40px
    paddingX: 24px
    boxShadow: "2px 2px 0 rgba(198,255,0,0.2)"
  badge-pill:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.xs}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  avatar:
    size: 48px
    rounded: "{rounded.full}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
    gap: "{spacing.lg}"
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    height: 12px
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
    paddingX: "{spacing.gutter}"
    paddingY: "{spacing.lg}"
    height: auto
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    paddingX: "{spacing.xl}"
    paddingY: "{spacing.lg}"
    height: 76px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 24px
    border: none
    boxShadow: none
    backgroundColor: "transparent"
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 24px
    border: none
    boxShadow: none
    backgroundColor: "transparent"
---

# Neon Brutalist Mobile

## Overview

**Aggressive. Industrial. Charged.** A blackout dark-mode aesthetic with one electric accent — an acid lime — that lights up only the elements that matter: active states, primary CTAs, live indicators, peak data points. Everything else is rendered in tonal greys and heavy black uppercase type, giving the feel of a piece of athletic equipment, a mission console, or a gym wall stencil.

The shape language is rectilinear and brutalist: small radii, hard 90° corners on accent badges, and signature **offset hard-drop shadows** (no blur, no spread) that make cards and buttons feel stamped, sticker-like, slightly displaced from the surface. Type is the loudest element — extreme weights (900), tight negative tracking on display copy, wide positive tracking on labels — pushed deep into all-caps wherever metadata or actions live.

The supporting palette is a categorical 4-color set (red / blue / amber / violet) borrowed from data-viz, used as **20% alpha tint chips**, colored bottom-borders on stat cards, and 1px hover-border accents — never as fills. Photography is gym-grade: dark, contrasty, edge-lit silhouettes against near-black, treated with `opacity-50–60` so the brand acid lime stays the visual king.

## Colors

The system is built on three layers of black-grey and one electric primary.

**Chrome layers (darkest → lightest):**
- `{colors.background}` — page background, also used for the depressed track inside progress bars.
- `{colors.surface}` — every card, input, and list row.
- `{colors.surface-alt}` and `{colors.surface-muted}` — secondary fills (chip bodies, bar-chart empty states).
- `{colors.border}` — the universal hairline; sits between surface and background tonally.

**Foreground:**
- `{colors.on-surface}` — primary white text and headings.
- `{colors.on-surface-variant}` — metadata, captions, inactive tab labels.

**Brand:**
- `{colors.primary}` (acid lime) is reserved. It appears ONLY as: primary CTA fill, active tab text + icon, active chip fill, "live" pulse dot, peak bar in charts, focus ring, avatar ring, hover-border on inputs, and accent inline italic kickers. It must NEVER be used as a card background — the only large fill ever rendered in primary is the primary button.
- `{colors.on-primary}` is the only legal foreground on a `{colors.primary}` fill.

**Categorical (data-viz) palette:**
- `{colors.accent-red}`, `{colors.accent-blue}`, `{colors.accent-amber}`, `{colors.accent-violet}` are categorical tags — used as 20% alpha background tints behind small uppercase badges, as colored bottom-borders on stat tiles, and as 1px hover-border accents on cards. They must NEVER tint UI chrome (no red buttons, no blue cards) — only inline category markers.

## Typography

**Inter** is the entire system. The display family is loaded but unused in chrome; the loaded mono is reserved for raw data dumps if ever needed. The trick is weight: this aesthetic lives at **900 (Black)** for everything that matters and **700 (Bold)** for everything that whispers — there is almost no 400/500.

- `{typography.display-lg}` and `{typography.display-md}` — uppercase hero titles, two-line stacked, tight `-0.04em` tracking. Used for the screen-defining headline (page title, featured session name, current activity title).
- `{typography.headline-lg}` and `{typography.headline-md}` — uppercase card titles inside list rows and tiles.
- `{typography.numeral-xl}` and `{typography.numeral-lg}` — the data shouters: timer readouts, stat-tile big numbers, progress totals. Same weight/tracking as displays — numerals ARE display in this system.
- `{typography.label-uppercase-md}` — the workhorse "muted ALL CAPS" line: section kickers, metadata, input placeholders. Always uppercase, always `letterSpacing: 0.1em`, color `{colors.on-surface-variant}`.
- `{typography.label-uppercase-sm}` — tiny tags: badge text, tab labels, micro-metadata. `letterSpacing: 0.12em`.
- `{typography.button-label}` — same weight as displays (900) but smaller — buttons SHOUT.
- `{typography.body-md}` — the rare lowercase line for descriptive paragraphs. Used sparingly; this aesthetic prefers uppercase even for body.

**Italic** at 900 weight on `{colors.primary}` is a recurring decorative move — used for selected day labels in charts, "Live" indicators, and chart kickers — leaning the type forward to imply motion.

## Spacing & Layout

Density is **tight-but-breathing**: `{spacing.gutter}` (16px) edge insets, `{spacing.section-gap}` (24px) between sections, `{spacing.card-padding}` (16px) inside cards. The grid is utilitarian — 2-up, 3-up, full-width — never staggered. The whole system feels like a printed program card.

Vertical rhythm leans on type weight more than whitespace; sections are separated by a kicker label (`{typography.label-uppercase-md}`) above the content, with no decorative dividers.

## Elevation & Depth

This is the most distinctive move in the system. Elevation is conveyed by **hard-edged offset shadows** — `box-shadow: 4px 4px 0 rgba(0,0,0,0.3)` — no blur, no spread, just a solid black rectangle displaced down-and-right. It's a print/sticker aesthetic. Cards, inputs, and list rows wear this shadow; the primary button wears a tinted variant `4px 4px 0 rgba(198,255,0,0.2)` that bleeds the brand color into the displacement.

Tier rules:
- **Flat** — top app bar, tab bar, badges, chips: no shadow.
- **Stamped** — cards, inputs, list rows, primary button: `4px 4px 0 rgba(0,0,0,0.3)`.
- **Glow** (rare, primary-only) — peak data bars and progress fills get a soft outer glow (`shadow-[0_0_10px_rgba(198,255,0,0.5)]` or `shadow-[0_-4px_10px_rgba(198,255,0,0.3)]`) to make the lime visibly emit.

A 1px `{colors.border}` hairline always accompanies the stamped shadow — the border defines the silhouette, the shadow displaces it.

## Shapes

Radii are small and consistent — this is a brutalist system, not a soft one.

- `{rounded.xs}` (2px) — colored category badges (the smallest tags).
- `{rounded.sm}` (4px) — chart bar tops, secondary inline pills.
- `{rounded.md}` (6px) — rare; small inline chips.
- `{rounded.lg}` (8px) — cards, inputs, buttons, list rows. The default.
- `{rounded.full}` — chips/filter pills (these are the ONLY pill-shaped elements), avatars, progress-bar tracks, "live" dots.

Rule of thumb: **filter chips are full-pill**, everything else is 8px. Badges are nearly square (2px). Sharp is the default mood.

## Components

### card

Tokens: see frontmatter `{components.card}`. Hairline border + offset hard shadow.

```html
<div class="bg-[#222222] border border-[#333333] rounded-lg p-4 shadow-[4px_4px_0_rgba(0,0,0,0.3)]">
  <h4 class="font-black uppercase text-xl tracking-tighter text-white">[Card title]</h4>
  <p class="text-xs font-bold text-[#A1A1A1] uppercase tracking-widest mt-1">[Metadata]</p>
</div>
```

### button-primary

Tokens: see frontmatter `{components.button-primary}`. Acid lime fill, black ink, hard lime-tinted shadow.

```html
<button class="h-14 px-6 bg-[#C6FF00] text-black rounded-lg font-black uppercase tracking-widest text-sm flex items-center justify-center gap-2 shadow-[4px_4px_0_rgba(198,255,0,0.2)] active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  [Action label]
</button>
```

### button-secondary

Tokens: see frontmatter `{components.button-secondary}`. Background fill (deeper than card), hairline border, no shadow.

```html
<button class="h-14 px-6 bg-[#1A1A1A] border border-[#333333] text-white rounded-lg font-bold uppercase tracking-widest text-sm flex items-center justify-center gap-2 hover:bg-[#2A2A2A] active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  [Action label]
</button>
```

### input-text

Tokens: see frontmatter `{components.input-text}`. Surface fill, hairline border, hard shadow, lime focus ring + border on focus.

```html
<div class="relative group">
  <iconify-icon icon="solar:[icon-name]-linear" class="absolute left-4 top-1/2 -translate-y-1/2 text-[#A1A1A1] group-focus-within:text-[#C6FF00] size-5"></iconify-icon>
  <input type="text" placeholder="[PLACEHOLDER]" class="w-full h-14 bg-[#222222] border border-[#333333] rounded-lg pl-12 pr-4 text-sm font-bold uppercase tracking-widest placeholder:text-[#A1A1A1] focus:outline-none focus:border-[#C6FF00] focus:ring-1 focus:ring-[#C6FF00] shadow-[4px_4px_0_rgba(0,0,0,0.3)]" />
</div>
```

### chip / chip-active

Tokens: see frontmatter `{components.chip}`, `{components.chip-active}`. Pill-shaped uppercase filter pills.

```html
<button class="px-6 h-10 bg-[#C6FF00] text-black rounded-full text-xs font-black uppercase tracking-widest shadow-[2px_2px_0_rgba(198,255,0,0.2)]">[Active]</button>
<button class="px-6 h-10 bg-[#222222] border border-[#333333] text-white rounded-full text-xs font-bold uppercase tracking-widest hover:border-[#C6FF00] transition-colors">[Inactive]</button>
```

### badge-pill

Tokens: see frontmatter `{components.badge-pill}`. Tiny uppercase tag with 20%-alpha categorical tint background + matching foreground color. Near-square 2px radius.

```html
<span class="px-2 py-1 bg-[#4A9EFF]/20 text-[#4A9EFF] text-[10px] font-bold uppercase rounded tracking-wider">[Category]</span>
```

Tonal recipe — for an inverse "solid acid" label tag (e.g. duration / level metadata stamped on a hero image): render `badge-pill` as `bg-[#C6FF00] text-black` with the same `rounded` and tracking.

### avatar

Tokens: see frontmatter `{components.avatar}`. Circular, 2px lime ring.

```html
<img alt="[Name]" src="[url]" class="size-12 rounded-full border-2 border-[#C6FF00] object-cover" />
```

### list-row

Tokens: see frontmatter `{components.list-row}`. Used for session-history-style rows: leading colored icon-square, title + uppercase metadata, trailing chevron.

```html
<div class="bg-[#222222] border border-[#333333] rounded-lg p-4 flex items-center justify-between">
  <div class="flex items-center gap-4">
    <div class="size-12 bg-[#FF6B6B]/10 rounded flex items-center justify-center text-[#FF6B6B]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </div>
    <div>
      <h4 class="font-bold uppercase text-sm tracking-tight text-white">[Row title]</h4>
      <p class="text-[10px] font-bold text-[#A1A1A1] uppercase tracking-widest">[Meta] • [Meta] • [Meta]</p>
    </div>
  </div>
  <iconify-icon icon="solar:alt-arrow-right-linear" class="text-[#A1A1A1] size-5"></iconify-icon>
</div>
```

### progress-bar

Tokens: see frontmatter `{components.progress-bar}`. Dark depressed track, lime fill with outer glow.

```html
<div class="w-full h-3 bg-[#1A1A1A] rounded-full overflow-hidden border border-[#333333]">
  <div class="h-full bg-[#C6FF00] rounded-full shadow-[0_0_10px_rgba(198,255,0,0.5)]" style="width: 65%"></div>
</div>
```

### top-app-bar

Tokens: see frontmatter `{components.top-app-bar}`. No fill, no border — just generous top padding (`pt-12`) and an oversized uppercase title.

```html
<header class="px-4 pt-12 pb-4">
  <h1 class="text-4xl font-black uppercase tracking-tighter text-white">[Page Title]</h1>
  <p class="text-sm font-bold text-[#A1A1A1] uppercase tracking-widest mt-1">[Subtitle]</p>
</header>
```

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

Tokens: see frontmatter. Bottom-anchored, translucent backdrop, hairline top border. Active items shift color only — no pill, no underline, no weight change.

```html
<nav class="fixed bottom-0 left-0 right-0 bg-[#1A1A1A]/90 backdrop-blur-md border-t border-[#333333] px-6 py-4 flex justify-between items-center z-50">
  <a href="#" class="flex flex-col items-center gap-1 text-[#C6FF00]">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    <span class="text-[10px] font-bold uppercase tracking-wider">[Tab]</span>
  </a>
  <a href="#" class="flex flex-col items-center gap-1 text-[#A1A1A1] hover:text-white transition-colors">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    <span class="text-[10px] font-bold uppercase tracking-wider">[Tab]</span>
  </a>
</nav>
```

### Composition recipes (not separate components)

- **Stat tile** (e.g. for a 3-up output grid): `card` + leading `iconify` icon in a categorical color (`text-[#FF6B6B]`, etc.), then a `{typography.numeral-lg}` value, then a `{typography.label-uppercase-sm}` unit. Add a 2px categorical bottom-border (`border-b-2 border-b-[#FF6B6B]`) to color-code the metric.
- **Image + label tile** (e.g. up-next thumbnails): `card` with `aspect-[4/3]` and an absolutely-positioned `<img>` at `opacity-50` underneath; foreground is a self-start `badge-pill` and a bottom-aligned `{typography.label-uppercase-sm}` kicker + `{typography.headline-md}` title.
- **Bar-chart bar**: a full-height column of `bg-[#333333] rounded-t-sm`, with an absolutely-positioned inner div `bg-[#C6FF00]` (or alpha variants like `bg-[#C6FF00]/40` for non-peak days) sized by percent height. The peak bar gets `shadow-[0_-4px_10px_rgba(198,255,0,0.3)]` for a light bloom.
- **Day-cell grid** (calendar-style): square `aspect-square rounded-sm` cells; completed → `bg-[#C6FF00] text-black font-black`; missed → `bg-[#222222] border border-[#FF6B6B]/40`; future → `bg-[#333333]/30 text-[#A1A1A1]`; today → add `ring-2 ring-[#C6FF00] ring-offset-2 ring-offset-[#1A1A1A]`.
- **Achievement medallion**: a `card` with `aspect-square w-32`, centered emoji-style iconify glyph (e.g. `fluent-emoji:*`) at 40px, and a 2-line `{typography.label-uppercase-sm}` caption. Locked variant: `grayscale opacity-50`.

## Iconography

The icon system is **`solar` bold**. The bold variant is intentional — these are blocky, filled, geometric icons that match the heavy 900-weight type and the rectilinear shapes. Active and inactive states do NOT switch variant (both are `bold`); active state is signaled purely by color shift to `{colors.primary}`. Linear variant is reserved for trailing chevrons (`solar:alt-arrow-right-linear`) and the leading magnifier in inputs (`solar:magnifer-linear`).

Default icon size is 24px in chrome, 20px inside buttons, 12–16px inline in metadata rows, 32–40px for hero/tile icons. Icons in stat tiles take a categorical color (`{colors.accent-*}`) to color-code metric type. Icons inside circle/square thumbnails sit on a 10% alpha bed of their own color (`bg-[#FF6B6B]/10 text-[#FF6B6B]`).

For "rating dots" (e.g. intensity indicators) use repeated `solar:bolt-bold` glyphs at 12px — filled lime for active dots, `text-[#333333]` for inactive.

Icon fallback set: emoji-style glyphs from `fluent-emoji` (e.g. `fluent-emoji:fire`, `fluent-emoji:crown`) are allowed exclusively inside achievement/medallion tiles for a deliberate flash of saturated color in an otherwise monochrome screen.

## Illustration & Imagery

All imagery in this aesthetic is **photographic**. There are no illustrations, no vectors, no 3D renders, no drawings.

- **Style / Technique**: high-contrast, low-key gym/sports photography. Single hard rim light against a near-black environment. Subjects are athletes mid-action or athletic equipment in studio. Skin and metal both render with deep specular highlights and crushed shadows. Look: editorial fitness magazine, sportswear campaign, energy-drink ad. Color grade is desaturated overall with selective warm-amber rim light or cool blue/red practical lights.
- **Palette**: dominated by black and charcoal; rim-lit subjects in warm flesh tones (amber/orange) or cool cyan; environmental practical lights add red `#FF6B6B`, blue `#4A9EFF`, or amber `#FFB84D` accents that map to the categorical palette. Frame total saturation is low — punchy lights against a dead-black field.
- **Edge treatment**: no graphic outlines or strokes. The "edge" is the rim light itself — a thin specular outline separating the subject from the black background.
- **Shading & light**: dramatic chiaroscuro. One key light (often back/rim) does almost all the work. Foreheads, deltoids, and barbell plates catch highlights; everything else falls into shadow. No soft shadow detail in mid-tones — the look is two-step: lit edge, dark mass.
- **Composition & framing**: subject is centered or slightly off-center, occupying 50–70% of frame height, often cropped at thighs or knees for action shots. Generous black negative space on at least one side. Background is always near-black — no busy environments.
- **Background within the image**: a black or near-black gym, alley, or seamless studio. Practical lights (neon signs, tube strips, street lamps) are allowed as small saturated points but never as fields of color.
- **Container styling**: photos always sit inside a `{rounded.lg}` (8px) container with `border border-[#333333]` and `overflow-hidden`. No extra padding around the image inside the container — the image is full-bleed to the rounded corners. Cards that wrap photos may carry the standard `4px 4px 0 rgba(0,0,0,0.3)` stamped shadow on the outer container.
- **CSS treatment on the `<img>`**: `object-cover w-full h-full` is universal. **The image is rendered with `opacity-50` to `opacity-60`** so the dark photograph recedes and the white uppercase typography overlay reads loud and clean. On hover, `opacity` may drop further (`group-hover:opacity-40`) or scale slightly (`group-hover:scale-105`). Sometimes a colored 20%-alpha tint overlay is layered on top (`absolute inset-0 bg-[#4A9EFF]/20`) to color-code the photo to its category.
- **Box-shadow on the image or its frame**: none on the `<img>` itself — the wrapping card carries the shadow (`shadow-[4px_4px_0_rgba(0,0,0,0.3)]`). Hero photos at the top of "elite program" sections may use a top-down gradient overlay (`bg-gradient-to-t from-[#1A1A1A] via-transparent to-transparent`) instead of any shadow, to fade the image into the page background.
- **Aspect ratio rule**: hero banners 16:9 to 3:1; thumbnail tiles 4:3; list-row leading thumbnails 1:1 fixed-width 96px. Always crop, never letterbox.
- **Anti-references**: NOT illustrated, NOT vector, NOT 3D-rendered, NOT pastel, NOT bright/sunny, NOT lifestyle-cheerful, NOT outdoor-daylight, NOT desaturated-grey-on-grey (must have rim-light contrast), NOT soft-focus.
- **Style recipe prompt**:

  > *Editorial fitness photograph of [SUBJECT] in a near-black environment. Single hard rim light from behind catching the edge of the form in warm amber or cool cyan. Crushed shadows, deep blacks, low overall saturation but punchy specular highlights. The subject occupies the center 60% of frame against a dead-black background; small practical lights (red, blue, or amber neon) optional in the deep background. High contrast, low-key, cinematic. NOT illustrated, NOT vector, NOT 3D, NOT cheerful, NOT daylight — gritty studio or industrial gym mood.*

## Do's and Don'ts

### Do
- Use `{colors.primary}` only for active states, the primary CTA, "live" indicators, focus rings, and peak data — sparingly.
- Use the categorical palette as 20%-alpha background tints behind small badges, as 2px bottom-borders on stat tiles, and as 1px hover-borders.
- Stamp cards, inputs, and list rows with the `4px 4px 0 rgba(0,0,0,0.3)` hard shadow plus a 1px `{colors.border}` hairline.
- Set photographs to `opacity-50` to `opacity-60` so white uppercase type reads cleanly on top.
- Use Inter Black (900) for displays, headlines, numerals, and button labels — and use the wide-tracked uppercase Bold (700) for everything else.
- Stack two-line uppercase titles with `<br/>` to mimic stencil/poster layout when space allows.

### Don't
- Don't use `{colors.primary}` as a card background, badge tint, or text color on body copy — it must stay scarce to remain electric.
- Don't tint UI chrome with the categorical palette (no red buttons, no blue cards). Categorical colors are markers only.
- Don't apply blurred/soft shadows. The shadow language is hard, offset, no-blur — `4px 4px 0 #...`.
- Don't use lowercase or 400-weight type for titles, metadata, buttons, or chips — those are uppercase Bold/Black.
- Don't render imagery as illustration, 3D, or bright lifestyle photography. Imagery is dark, contrasty, rim-lit gym/sports photography only.
- Don't add radii beyond the defined scale. Pills are `full`, badges are 2px, everything else is 8px. No 16px+ rounding anywhere.
- Don't layer photos at full opacity — they will fight the lime accent and the white type.