Neon Lime Performance DESIGN.md

---
version: 1
name: "Neon Lime Performance Mobile"
colors:
  primary: "#CCFF00"
  on-primary: "#0A0A0A"
  surface: "#0F1115"
  surface-alt: "#181B21"
  surface-muted: "#2A2F38"
  on-surface: "#F0F2F5"
  on-surface-variant: "#9CA3AF"
  border: "#22262E"
  error: "#FF3B30"
  chart-1: "#CCFF00"
  chart-2: "#A3CC00"
  chart-3: "#7A9900"
  chart-4: "#526600"
  chart-5: "#293300"
typography:
  display-lg:
    fontFamily: Space Grotesk
    fontSize: 96px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  display-md:
    fontFamily: Space Grotesk
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.03em
  display-sm:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0em
  numeral-stat:
    fontFamily: Space Grotesk
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  body-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  body-sm:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.2em
  label-micro:
    fontFamily: Manrope
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.15em
  mono-data:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  mono-micro:
    fontFamily: JetBrains Mono
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.05em
  tab-label:
    fontFamily: Manrope
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.02em
rounded:
  xs: 4px
  sm: 6px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 28px
  4xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  gutter: 20px
  card-padding: 20px
  section-gap: 32px
icons:
  set: solar
  default_variant: linear
  active_variant: bold
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.xl}"
    height: 64px
    paddingX: 32px
    border: none
    boxShadow: "0 10px 30px rgba(204,255,0,0.2)"
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.2xl}"
    height: 80px
    paddingX: 24px
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
    border: none
    boxShadow: none
    paddingX: 0px
    paddingY: 0px
  button-icon-circle:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 20px
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    focusRingColor: "{colors.primary}"
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    gap: 12px
    iconSize: 18px
  chip-active:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
  badge-pill:
    backgroundColor: "{colors.primary}/20"
    textColor: "{colors.primary}"
    typography: "{typography.label-micro}"
    borderColor: "{colors.primary}/30"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
    gap: 6px
  avatar:
    backgroundColor: "{colors.surface-muted}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    size: 40px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 16px
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 4px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}/80"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    height: 88px
    paddingX: 24px
  tab-bar:
    backgroundColor: "{colors.surface}/90"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    height: 72px
    paddingX: 28px
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    background: transparent
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    background: transparent
    border: none
    boxShadow: none
---

# Neon Lime Performance Mobile

## Overview

**Athletic. Instrumented. After-dark.** This is a near-black performance dashboard aesthetic — the kind of UI that lives on a wrist or a phone strapped to a forearm at 6 AM. A single radioactive lime accent (`{colors.primary}`) does all the emotional work against a deep cool-black ground; everything else is calibrated grey on grey, lit only by data.

The personality is **technical-not-clinical**: oversized italic display numerals shout the metric that matters, mono captions whisper the supporting context, and a small repertoire of subtle glows (lime drop-shadow on charts, primary-tinted shadow on the hero CTA) suggest energy rather than decoration. Card chrome is restrained — hairline borders on a slightly-lifted surface — so the data and the lime can carry the screen.

The implicit references are race-track HUDs, performance watch faces, and the high-contrast instrumentation panels of professional gear. Avoid friendly, pastel, or rounded-soft moves; this aesthetic earns trust by looking like measurement equipment.

## Colors

The palette is a **single-accent dark system**. There is one chrome stack and one accent:

- **Chrome stack** (top → bottom of layering): `{colors.surface}` (`#0F1115`, the page) → `{colors.surface-alt}` (`#181B21`, every card and list row) → `{colors.surface-muted}` (`#2A2F38`, inset wells, secondary buttons, inactive bar fills). Borders are `{colors.border}` (`#22262E`) — a hairline that's barely brighter than the card it surrounds, never assertive.
- **Text stack**: `{colors.on-surface}` (`#F0F2F5`, near-white headlines and key numerals), `{colors.on-surface-variant}` (`#9CA3AF`, body, units, captions, inactive icons). There is no third tier — when something needs to whisper further, drop opacity (e.g. `/60`) on the variant.
- **Accent** (`{colors.primary}`, `#CCFF00`): radioactive lime. Reserved for **active/current state, primary CTA, achievement, and live data series**. It must remain rare on each screen — typically one large hit (a CTA or a hero numeral) plus 1–3 small hits (an active tab, a current chart bar, a PR pill). Never use it as a card background, never as body text, never to color decorative chrome.
- **Semantic**: `{colors.error}` (`#FF3B30`) only for negative-delta indicators (e.g. a slower-than-target reading) and destructive actions.
- **Chart palette**: `chart-1` through `chart-5` is a monochromatic lime ramp from full-saturation to near-black-green. Use only inside data visualizations; never assign to UI chrome.

**Hard rule**: lime never bleeds into surface fills. The accent appears as text color, icon color, hairline border (`border-primary/30`), tinted overlay (`bg-primary/10` or `bg-primary/20`), or a small filled shape (a 2px progress fill, a 2x2 dot). It is a signal, not a substrate.

## Typography

Three families, three jobs:

- **Space Grotesk** (`{typography.display-*}`, `{typography.headline-*}`, `{typography.numeral-stat}`) — geometric sans with humanist warmth. The workhorse for everything that wants weight. Use **800–900 (black)** for the hero numerals and primary buttons; the heaviness is half the aesthetic. Italic + black + tight tracking on the largest displays creates a forward-leaning, motion-blurred feel — apply italic to the loudest single moment per screen (a hero CTA word, a featured title) and not elsewhere.
- **Manrope** (`{typography.body-*}`, `{typography.label-*}`, `{typography.tab-label}`) — neutral humanist sans for body, captions, and any text that should disappear into context. Weight 500 default; weight 700 with `tracking-[0.2em]` and uppercase becomes the signature kicker (`{typography.label-uppercase}`) used above every metric, every section, every card.
- **JetBrains Mono** (`{typography.mono-data}`, `{typography.mono-micro}`) — fixed-width for tabular data, timestamps, split times, distance/pace values inside list rows, and any inline code-like read-out. The mono shift signals "this is a measurement," distinct from prose.

Three load-bearing typographic moves:

1. **Tabular numerals everywhere a number can change**: hero stats, splits, durations, paces. Use `tabular-nums` so digits don't jitter as values update.
2. **Tracked-out uppercase micro-labels** (`{typography.label-uppercase}` and `{typography.label-micro}`) above every metric and every section. The +0.15–0.2em letter-spacing on 10–12px is the design's "instrument label" voice — it should appear 4–8 times per screen.
3. **Unit demotion**: the unit appended to a stat (`KM`, `/KM`, `bpm`, `m`, `cal`) is always rendered smaller and in `{colors.on-surface-variant}` — typically `text-sm` next to a `text-3xl` value. This keeps the magnitude dominant.

## Spacing & Layout

Density is **balanced-tight**: the screen is dense with information but each card breathes via internal padding. Page-level horizontal gutter is `{spacing.gutter}` (20px). Cards use `{spacing.card-padding}` (16–20px) inside, with `{spacing.md}` (16px) gap between elements. Sections separate by `{spacing.section-gap}` (32px) of vertical air.

A common card-grid layout is 2-column with `{spacing.sm}` (12px) gap between square-ish stat tiles. Horizontal scrollers (chip rails) use `{spacing.sm}` between items and intentionally bleed off the right edge to signal more content.

The home/dashboard rhythm is: short uppercase kicker → primary content → metadata strip → next kicker. Implementers should NOT fight this rhythm by adding decorative dividers; the kickers ARE the dividers.

## Elevation & Depth

The aesthetic is **flat-with-glow**. There is no traditional drop-shadow vocabulary on cards or surfaces — depth comes from tonal layering (`{colors.surface}` → `{colors.surface-alt}` → `{colors.surface-muted}`) and hairline borders.

The one shadow recipe is **lime aura**, used sparingly on three things only:

- The primary CTA: `shadow-[0_10px_30px_rgba(204,255,0,0.2)]`
- A featured chart bar (current/best): `shadow-[0_0_10px_rgba(204,255,0,0.3)]`
- A live progress-bar fill: `shadow-[0_0_8px_rgba(204,255,0,0.6)]`

These glows are emissive, not occlusive — they read as light coming from the element, not a shadow being cast. Never apply them to plain text or to non-accent surfaces.

For sticky chrome (top app bar, bottom tab bar, fixed CTA bar), use a translucent surface with backdrop blur (`bg-background/90 backdrop-blur-lg`) and a hairline border (`border-t border-border` / `border-b border-border`) to separate from scrolling content. Fixed bottom CTAs additionally fade into the page via a top-edge gradient (`bg-gradient-to-t from-background via-background/90 to-transparent`).

## Shapes

Geometry is **rectilinear with consistently rounded corners** — no asymmetry, no organic shapes, no pill chips. The rounding scale is fine-grained:

- `{rounded.xs}` (4px) — micro inset bars inside chart cells
- `{rounded.sm}` (6px) — small list-row insets
- `{rounded.md}` (10px) — secondary surfaces (the volume bar background)
- `{rounded.lg}` (12px) — standard card and chip
- `{rounded.xl}` (16px) — primary CTA, prominent cards
- `{rounded.2xl}` (20px) — stat tiles, summary cards
- `{rounded.3xl}` (28px) — hero/feature card frames (e.g. map containers)
- `{rounded.4xl}` (40px) — bottom-sheet top edge
- `{rounded.full}` — circular icon buttons, avatar, badge pills, progress-bar tracks

Rule of thumb: the larger and more important the surface, the larger the radius. A page-spanning hero feature uses `{rounded.3xl}`; a 4-up stat tile uses `{rounded.2xl}`; a list row uses `{rounded.lg}`. Never mix radii within a single visual group.

## Components

### card

Hairline-bordered surface lifted one tonal step above the page. No shadow.

```html
<div class="bg-[#181B21] border border-[#22262E] rounded-2xl p-5">
  <span class="block text-[10px] font-bold text-[#9CA3AF] uppercase tracking-[0.2em] mb-2">[Metric Label]</span>
  <p class="text-3xl font-[Space_Grotesk] font-bold text-white tabular-nums">[Value]<span class="text-sm text-[#9CA3AF] font-normal ml-1 italic">[Unit]</span></p>
</div>
```

A **stat tile** is a `card` with an `{typography.label-uppercase}` kicker, a `{typography.numeral-stat}` value with demoted italic unit, and an optional 20%-opacity icon absolutely positioned top-right (`absolute top-0 right-0 p-3 opacity-20`).

### button-primary

The lime hero — used at most once per screen for the most important forward action.

```html
<button class="w-full h-16 bg-[#CCFF00] text-[#0A0A0A] font-[Space_Grotesk] font-black text-xl rounded-2xl shadow-[0_10px_30px_rgba(204,255,0,0.2)] active:scale-95 transition-all">
  [ACTION LABEL]
</button>
```

For an even more expressive variant (a "quick start" hero), the label can be split into a small uppercase eyebrow and a `text-5xl italic font-black tracking-tighter` headline word, with a circular black-tinted play affordance docked right.

### button-secondary

Used for paired/alternate actions and large utility surfaces. Translucent muted fill with hairline border.

```html
<button class="w-full h-20 bg-[#2A2F38]/50 backdrop-blur-md rounded-2xl flex items-center justify-center gap-4 border border-[#22262E] active:scale-95 transition-all">
  <div class="h-10 w-10 rounded-full bg-[#CCFF00] flex items-center justify-center">
    <iconify-icon icon="solar:[icon-name]-bold" class="text-[#0A0A0A] size-6"></iconify-icon>
  </div>
  <span class="text-xl font-[Space_Grotesk] font-bold text-[#F0F2F5] tracking-tight">[ACTION]</span>
</button>
```

### button-text

Bare interactive label, typically with a trailing chevron, used for navigation affordances ("see all," "show more"). No background, no padding.

```html
<a href="#" class="text-xs font-medium text-[#9CA3AF] flex items-center hover:text-[#CCFF00] transition-colors">
  [Label] <iconify-icon icon="solar:alt-arrow-right-linear" class="ml-1 size-4"></iconify-icon>
</a>
```

### button-icon-circle

The default for top-app-bar actions (close, share, back). Hairline-bordered circle on the muted surface tone.

```html
<button class="h-10 w-10 rounded-full bg-[#2A2F38] flex items-center justify-center border border-[#22262E]">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-xl size-5"></iconify-icon>
</button>
```

### input-text

Hairline-bordered field on the elevated surface, with the lime as focus ring color.

```html
<input class="w-full bg-[#181B21] border border-[#22262E] rounded-xl px-4 py-3 text-[#F0F2F5] text-sm placeholder:text-[#9CA3AF] focus:outline-none focus:border-[#CCFF00] focus:ring-1 focus:ring-[#CCFF00]" placeholder="[Placeholder]" />
```

### chip

Filter / quick-select chip. Always horizontal-icon-plus-text, with a small uppercase eyebrow above a bold value.

```html
<button class="flex-shrink-0 px-4 py-3 bg-[#181B21] border border-[#22262E] rounded-lg flex items-center gap-3 min-w-[140px] active:bg-[#2A2F38] transition-colors">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#9CA3AF] size-5"></iconify-icon>
  <div class="flex flex-col items-start">
    <span class="text-xs text-[#9CA3AF] font-medium uppercase">[Type Label]</span>
    <span class="text-sm font-bold">[Value]</span>
  </div>
</button>
```

### chip-active

Same as chip, but with `bg-[#2A2F38]` (one tonal step up). Active state in this aesthetic is communicated more by lime *content* (lime icon, lime text) than by lime background.

### badge-pill

Tinted-lime achievement/status pill. The only place where lime appears as both a background tint and a foreground.

```html
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#CCFF00]/20 border border-[#CCFF00]/30 text-[#CCFF00] text-[10px] font-bold uppercase tracking-[0.2em]">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-3"></iconify-icon>[Label]
</span>
```

### avatar

Hairline-bordered circle with cover-fit image.

```html
<div class="h-10 w-10 rounded-full bg-[#2A2F38] overflow-hidden border border-[#22262E]">
  <img alt="[alt]" src="[src]" class="h-full w-full object-cover" />
</div>
```

### list-row

A bordered card row, typically used for split times, gear entries, or comparable list items. Mono numerals on the right edge, semantic content on the left.

```html
<div class="flex items-center justify-between p-4 bg-[#181B21] border border-[#22262E] rounded-xl">
  <div class="flex items-center gap-4">
    <span class="font-mono text-sm text-[#9CA3AF] w-6">[Index]</span>
    <div class="h-1 flex-1 w-24 bg-[#2A2F38] rounded-full overflow-hidden">
      <div class="h-full bg-[#CCFF00] w-[80%]"></div>
    </div>
  </div>
  <div class="flex items-center gap-4">
    <span class="font-mono font-bold">[Value]</span>
    <span class="text-[10px] text-[#9CA3AF] flex items-center gap-0.5"><iconify-icon icon="solar:[arrow-icon]-bold" class="size-3"></iconify-icon> [Delta]</span>
  </div>
</div>
```

A **highlighted** list row (e.g. the best in the set) gets `border-[#CCFF00]/30` and `shadow-[0_0_15px_rgba(204,255,0,0.05)]`, plus lime-colored index, value, and delta.

### progress-bar

Thin track with lime fill. The fill on a live/active progress carries the lime drop-glow.

```html
<div class="h-1 w-full bg-[#2A2F38] rounded-full overflow-hidden">
  <div class="h-full bg-[#CCFF00] w-[64%] shadow-[0_0_8px_rgba(204,255,0,0.6)]"></div>
</div>
```

### top-app-bar

Translucent, sticky, hairline-separated. Title centered, icon-circle buttons left and right; or eyebrow-plus-headline left and avatar right.

```html
<header class="px-6 pt-12 pb-6 flex items-center justify-between sticky top-0 z-20 bg-[#0F1115]/80 backdrop-blur-md border-b border-[#22262E]/50">
  <button class="h-10 w-10 rounded-full bg-[#2A2F38] flex items-center justify-center border border-[#22262E]">
    <iconify-icon icon="solar:[icon-name]-bold" class="text-xl size-5"></iconify-icon>
  </button>
  <h1 class="text-xl font-[Space_Grotesk] font-bold tracking-tight">[Screen Title]</h1>
  <button class="h-10 w-10 rounded-full bg-[#2A2F38] flex items-center justify-center border border-[#22262E]">
    <iconify-icon icon="solar:[icon-name]-bold" class="text-xl size-5"></iconify-icon>
  </button>
</header>
```

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

Translucent floating-feeling bottom bar with hairline top border. Active tab uses lime icon + lime text + bold-variant icon; inactive uses muted text + linear-variant icon. No pill, no underline — color and weight do the work.

```html
<nav class="fixed bottom-0 left-0 w-full bg-[#0F1115]/90 backdrop-blur-lg border-t border-[#22262E] z-50 pb-6 pt-2 px-7">
  <div class="flex justify-between items-center max-w-sm mx-auto">
    <button class="flex flex-col items-center gap-1 p-2 text-[#CCFF00]">
      <iconify-icon icon="solar:[icon-name]-bold" class="text-2xl size-6"></iconify-icon>
      <span class="text-[10px] font-medium tracking-wide">[Label]</span>
    </button>
    <button class="flex flex-col items-center gap-1 p-2 text-[#9CA3AF] hover:text-[#F0F2F5] transition-colors">
      <iconify-icon icon="solar:[icon-name]-linear" class="text-2xl size-6"></iconify-icon>
      <span class="text-[10px] font-medium tracking-wide">[Label]</span>
    </button>
  </div>
</nav>
```

### Composition recipes (not separate components)

- **Hero numeric readout**: `{typography.label-uppercase}` kicker in `{colors.on-surface-variant}` above a `text-7xl` to `text-9xl` Space-Grotesk-black tabular numeral. The featured numeral takes `{colors.primary}`; supporting numerals take `{colors.on-surface}`. Demoted unit (`text-2xl` in `text-muted-foreground/50`) sits inline-baseline to the right.
- **Bar-chart sparkline** (weekly/distance distribution): a 7-cell flex grid where each cell is a `bg-[#181B21] rounded-sm` track containing a bottom-anchored fill — `bg-[#2A2F38]` for default cells, `bg-[#CCFF00]` (with the lime glow shadow) for the current/highlight cell. Below each cell, a single mono-uppercase letter caption.
- **Hero-image card**: a `{rounded.3xl}` container holding an image (see Imagery) with a top-to-bottom `bg-gradient-to-t from-background` overlay so text laid over the bottom remains legible. Metadata badges (date, location pill) sit absolutely positioned with `bg-background/80 backdrop-blur` chips.

For a low-attention secondary action, render `button-primary` with `bg-[#CCFF00]/10` background and `text-[#CCFF00]` foreground (no shadow).

## Iconography

Icon set is **Solar** (Iconify `solar:*`). Variant convention:

- **Default / inactive**: `linear` (e.g. `solar:home-2-linear`, `solar:graph-new-linear`).
- **Active / emphasized / inside filled buttons**: `bold` (e.g. `solar:home-2-bold`, `solar:play-bold`, `solar:pause-bold`).

Default icon size is 24px (`size-6`); list-row inline icons are 16–20px (`size-4` / `size-5`); micro-icons inside badges or deltas are 12px (`size-3`); large decorative icons (the 20%-opacity stat-tile background icons) are 28–32px (`size-7` / `size-8`).

Color rules: icons inherit `currentColor`. Default chrome icons are `{colors.on-surface-variant}`; active states flip to `{colors.primary}`; icons inside the lime CTA flip to `{colors.on-primary}`.

A small set of **expressive emoji-style icons** from `fluent-emoji` (`fluent-emoji:fire`) and `openmoji` (`openmoji:running-shoe`) appear inline alongside calorie / shoe metrics. Use sparingly — these are "warmth tokens" against the otherwise austere chrome — and never as primary navigation icons. A general implementer rule: if a metric has a culturally well-known emoji (fire = burn, lightning = power), an emoji icon is allowed inline; otherwise stick to Solar.

## Illustration & Imagery

**Style / Technique**: Photo-real top-down or low-angle 3D renders of a near-black city street grid, with the subject (a route, a path, a track, an outline of any [SUBJECT]) drawn ON the ground plane as a glowing neon lime line — as if a laser were tracing the shape onto wet asphalt at night. The technique is rendered, not flat-vector: there's atmospheric depth, soft falloff, faint reflections in the surrounding pavement, and a subtle haze of bloom around the glow. The base map underneath is desaturated to near-monochrome cool-black, with grid lines barely brighter than the asphalt.

**Palette**: Two colors only inside any image. (1) The `{colors.primary}` lime (`#CCFF00`) — used exclusively for the glowing subject line, with its bloom halo a slightly desaturated yellow-green at lower opacity. (2) A near-black ground that lives in the same family as `{colors.surface}` and `{colors.surface-alt}` — `#0A0D11` to `#181B21` range, with hairline grid details in `#22262E`. No third hue. No warm tones. No saturated sky color.

**Edge treatment**: The lime line has NO hard outline — its edge IS its glow. The line's core is solid `#CCFF00` at 2–4px equivalent thickness, surrounded by a 12–24px soft falloff to transparent. The base ground has subtle hairline strokes describing streets / surface details, ~1px in `#22262E`, never crisp.

**Shading & light**: The lime line is the only light source in the scene. The pavement immediately under and beside the line picks up a faint green wash; the rest of the scene falls off into deep cool-black. No directional sun, no sky lighting, no ambient warmth.

**Composition & framing**: The subject (the glowing shape) sits centered or slightly off-center in the frame, occupying ~50–65% of the canvas. Generous dark negative space on all sides so the bloom can breathe. The viewing angle is either flat top-down (orthographic) or a shallow ¾ perspective (~15–25° tilt) suggesting the subject is on a real surface. Subject never bleeds to the edge — it floats in dark space.

**Background within the illustration**: A near-black map / surface / grid texture. Streets and surface lines are visible but desaturated and out-of-focus relative to the glowing subject. Never a transparent background; the dark ground is essential to the aesthetic.

**Container styling**: Image lives in a `{rounded.3xl}` (28px) frame for hero/feature placement, or a `{rounded.2xl}` (20px) frame for inline cards. The frame has a `border border-[#22262E]` hairline on all sides. No internal padding — the image fills the frame edge-to-edge. The container background is `{colors.surface-alt}` so the image sits on the elevated surface tone.

**CSS treatment on the `<img>`**: `class="w-full h-full object-cover opacity-60 mix-blend-screen"` for atmospheric/decorative placement (the image becomes part of the dark surface, with lime glow punching through); `class="w-full h-full object-cover"` (no blend, full opacity) for hero/featured placement where the image IS the content. A top-to-bottom gradient overlay (`bg-gradient-to-t from-background via-background/80 to-transparent`) is layered above the image to anchor any text laid over the bottom.

**Box-shadow on the image or its frame**: None. The frame sits flat; depth comes from the image's internal glow.

**Aspect ratio rule**: Hero/feature images use 16:9 to 4:3 landscape (height 256–320px at full container width). Inline thumbnails use 1:1 square. Always preserve the image's framing — crop with `object-cover` rather than letterbox.

**Anti-references**: NOT flat 2D vector. NOT line art. NOT cartoon. NOT illustrated/hand-drawn. NOT pastel. NOT bright/daylit. NOT photographic-real-world (no actual streets recognizable as a place). NOT multi-color. NOT warm-toned. NOT minimal-grayscale (the lime glow is non-negotiable).

**Style recipe prompt**:

> *A near-black overhead view of a city street grid rendered in deep cool-black tones (#0A0D11 to #181B21) with hairline desaturated street markings. Drawn on the ground surface in a single glowing neon lime line (#CCFF00, ~3px equivalent core with soft 16px bloom halo) is the shape of [SUBJECT]. The lime line is the ONLY light source — pavement under and beside it picks up a faint green wash, falling off into deep darkness. Shallow ¾ perspective or flat top-down framing, subject centered occupying 50–65% of canvas, generous dark negative space around it. Atmospheric, slightly hazy, with subtle bloom diffusion. Photo-real 3D rendered look, not vector, not cartoon. Two-color palette only: glowing lime + near-black ground. NOT flat illustration, NOT pastel, NOT daylit, NOT multi-color, NOT recognizable real-world location.*

## Hierarchy & Emphasis

Visual weight in this aesthetic is earned by, in order of dominance:

1. **Size + italic + black weight** on Space Grotesk numerals (the loudest moment per screen).
2. **Lime color** — small in area but maximally salient.
3. **Bold-variant icon + lime color** for active state.
4. **Tabular weight contrast** — bold mono on muted mono.
5. Everything else recedes into `{colors.on-surface-variant}` and tracked-out micro-labels.

The rule: each screen has exactly one "loudest" element (the hero numeral or the primary CTA), one to three lime accents (active states, deltas, pills), and a body of muted grey instrumentation. If two elements are competing for the loudest slot, the design is wrong.

## Distinctive Details

1. **Italic-black display numerals** with negative letter-spacing (`tracking-tighter` / `-0.03em` to `-0.04em`). Forward lean = motion = performance. Reserve italic for the single most kinetic moment per screen.
2. **The lime drop-glow** (`shadow-[0_0_8px_rgba(204,255,0,...)]` family). Used on live progress fills, current chart bars, and the primary CTA — and absolutely nowhere else. It is the design's pulse.
3. **Tracked-out uppercase micro-labels** above every metric (`{typography.label-uppercase}` and `{typography.label-micro}`). The +0.2em tracking on 10–12px Manrope-bold-uppercase reads as instrument-panel typography and appears 4–8 times per screen.
4. **20%-opacity decorative icons** absolutely positioned in stat-tile corners (`absolute top-0 right-0 p-3 opacity-20`). They categorize the metric without competing with the value. Never above 30% opacity, never positioned anywhere except a card corner.

## Do's and Don'ts

### Do
- Use lime (`{colors.primary}`) as a rare, signaling accent — at most ~5% of any screen's pixel area.
- Default to Space Grotesk black-weight italic for hero numerals and use `tabular-nums` on every changeable number.
- Place a `{typography.label-uppercase}` kicker above every metric, every section, every card group.
- Layer surfaces by tonal step (`#0F1115` → `#181B21` → `#2A2F38`) and separate with hairline `{colors.border}` borders, not shadows.
- Apply the lime drop-glow ONLY to live progress fills, current/best chart bars, and the primary CTA.
- Use Solar `linear` for default icons and Solar `bold` for active/emphasized icons.
- Render images as glowing neon lime subjects on near-black ground with bloom; preserve the two-color palette.
- Demote units (`KM`, `/KM`, `bpm`) inline at smaller size and `{colors.on-surface-variant}`.

### Don't
- Don't use lime as a card or surface fill — it lives only as text, icon, hairline, tinted overlay, or small glowing fill.
- Don't add traditional drop-shadows to cards, list rows, or chips. The system is flat-with-glow.
- Don't introduce a second accent color (orange, blue, magenta) — the single-accent discipline IS the aesthetic.
- Don't use italic on more than one element per screen.
- Don't use Manrope where Space Grotesk belongs (numerals, headings, CTA labels) or vice versa.
- Don't render images in flat-vector, cartoon, pastel, or photoreal-real-world style — they must be the dark-ground neon-glow style.
- Don't use rounded-full pill chips for filters or selection — chips here are `{rounded.lg}` rectangles.
- Don't decorate with sparkles, dots, gradients, or atmospheric blobs. Decoration is monochrome and structural (grid textures, hairline borders, micro-bars), never ornamental.
- Don't write body copy in mono — mono is reserved for measurement values and timestamps.
- Don't let any non-data element compete with the hero numeral or primary CTA for visual weight.