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

[Card title]

[Metadata]

``` ### button-primary Tokens: see frontmatter `{components.button-primary}`. Acid lime fill, black ink, hard lime-tinted shadow. ```html ``` ### button-secondary Tokens: see frontmatter `{components.button-secondary}`. Background fill (deeper than card), hairline border, no shadow. ```html ``` ### input-text Tokens: see frontmatter `{components.input-text}`. Surface fill, hairline border, hard shadow, lime focus ring + border on focus. ```html
``` ### chip / chip-active Tokens: see frontmatter `{components.chip}`, `{components.chip-active}`. Pill-shaped uppercase filter pills. ```html ``` ### 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 [Category] ``` 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 [Name] ``` ### list-row Tokens: see frontmatter `{components.list-row}`. Used for session-history-style rows: leading colored icon-square, title + uppercase metadata, trailing chevron. ```html

[Row title]

[Meta] • [Meta] • [Meta]

``` ### progress-bar Tokens: see frontmatter `{components.progress-bar}`. Dark depressed track, lime fill with outer glow. ```html
``` ### 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

[Page Title]

[Subtitle]

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