--- 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
[Metric Label]

[Value][Unit]

``` 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 ``` 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-text Bare interactive label, typically with a trailing chevron, used for navigation affordances ("see all," "show more"). No background, no padding. ```html [Label] ``` ### button-icon-circle The default for top-app-bar actions (close, share, back). Hairline-bordered circle on the muted surface tone. ```html ``` ### input-text Hairline-bordered field on the elevated surface, with the lime as focus ring color. ```html ``` ### chip Filter / quick-select chip. Always horizontal-icon-plus-text, with a small uppercase eyebrow above a bold value. ```html ``` ### 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 [Label] ``` ### avatar Hairline-bordered circle with cover-fit image. ```html
[alt]
``` ### 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
[Index]
[Value] [Delta]
``` 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
``` ### top-app-bar Translucent, sticky, hairline-separated. Title centered, icon-circle buttons left and right; or eyebrow-plus-headline left and avatar right. ```html

[Screen Title]

``` ### 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 ``` ### 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 ``**: `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.