--- version: 1 name: "Neon Lime Nightshade Mobile" colors: primary: "#BEF264" on-primary: "#1A2E05" background: "#0C0A09" surface: "#1C1917" surface-alt: "#292524" on-surface: "#FAFAF9" on-surface-variant: "#A8A29E" on-surface-muted: "#44403C" border: "#292524" error: "#EF4444" accent-teal: "#5EEAD4" accent-cyan: "#67E8F9" accent-amber: "#FCD34D" accent-peach: "#FDBA74" typography: display-lg: fontFamily: "Space Grotesk" fontSize: 30px fontWeight: 700 lineHeight: 36px letterSpacing: -0.01em headline-lg: fontFamily: "Space Grotesk" fontSize: 24px fontWeight: 700 lineHeight: 30px letterSpacing: -0.005em headline-md: fontFamily: "Space Grotesk" fontSize: 20px fontWeight: 700 lineHeight: 26px letterSpacing: 0em headline-sm: fontFamily: "Plus Jakarta Sans" fontSize: 16px fontWeight: 700 lineHeight: 22px letterSpacing: 0em body-md: fontFamily: "Plus Jakarta Sans" fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: 0em body-sm: fontFamily: "Plus Jakarta Sans" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0em label-md: fontFamily: "Plus Jakarta Sans" fontSize: 13px fontWeight: 600 lineHeight: 16px letterSpacing: 0em label-uppercase: fontFamily: "Plus Jakarta Sans" fontSize: 10px fontWeight: 700 lineHeight: 14px letterSpacing: 0.08em tab-label: fontFamily: "Plus Jakarta Sans" fontSize: 10px fontWeight: 500 lineHeight: 14px letterSpacing: 0em rounded: sm: 8px md: 12px lg: 16px xl: 24px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px gutter: 24px card-padding: 16px section-gap: 32px icons: set: solar default_variant: linear active_variant: bold stroke_weight: 1.5px default_size: 24px components: card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: "{spacing.card-padding}" borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px border: none boxShadow: "0 8px 24px -8px rgba(190,242,100,0.35)" button-secondary: backgroundColor: "rgba(41,37,36,0.8)" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none button-text: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" paddingX: 4px paddingY: 4px border: none boxShadow: none button-icon-glass: backgroundColor: "rgba(41,37,36,0.5)" textColor: "{colors.on-surface}" rounded: "{rounded.full}" size: 40px iconSize: 20px borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none input-text: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.lg}" paddingX: 16px paddingY: 14px borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none focusRingColor: "rgba(190,242,100,0.2)" chip: backgroundColor: "rgba(41,37,36,0.8)" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none chip-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" paddingX: 16px paddingY: 8px border: none boxShadow: none badge-pill: backgroundColor: "rgba(190,242,100,0.15)" textColor: "{colors.primary}" typography: "{typography.label-uppercase}" rounded: "{rounded.sm}" paddingX: 6px paddingY: 2px border: none boxShadow: none badge-circle: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" size: 20px rounded: "{rounded.full}" border: none boxShadow: none avatar: backgroundColor: "{colors.surface-alt}" rounded: "{rounded.full}" size: 40px borderColor: "rgba(190,242,100,0.2)" borderWidth: 2px boxShadow: none list-row: backgroundColor: "transparent" textColor: "{colors.on-surface}" rounded: "{rounded.md}" paddingX: 0px paddingY: 8px gap: 16px border: none boxShadow: none progress-bar: backgroundColor: "rgba(255,255,255,0.1)" textColor: "{colors.primary}" rounded: "{rounded.full}" height: 2px border: none boxShadow: none top-app-bar: backgroundColor: "transparent" textColor: "{colors.on-surface}" paddingX: "{spacing.gutter}" paddingY: 16px border: none boxShadow: none tab-bar: backgroundColor: "rgba(12,10,9,0.95)" paddingX: "{spacing.gutter}" paddingY: 12px borderColor: "rgba(255,255,255,0.05)" borderWidth: 1px boxShadow: none tab-item-active: textColor: "{colors.primary}" iconSize: 24px typography: "{typography.tab-label}" backgroundColor: "transparent" border: none boxShadow: none tab-item-inactive: textColor: "{colors.on-surface-variant}" iconSize: 24px typography: "{typography.tab-label}" backgroundColor: "transparent" border: none boxShadow: none card-floating-glass: backgroundColor: "rgba(28,25,23,0.9)" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: "{spacing.sm}" borderColor: "rgba(255,255,255,0.1)" borderWidth: 1px boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)" --- # Neon Lime Nightshade Mobile ## Overview **Dark, electric, after-hours.** A near-black canvas pierced by a single saturated lime accent and hazy color-blob atmospherics. The aesthetic feels like a late-night listening session — confident, premium, slightly futuristic — without tipping into hard cyberpunk. Surfaces are stacked tones of warm-black (stone/zinc), interrupted by glowing lime CTAs and soft-blurred chromatic gradients (teal, cyan, amber, peach) that bleed in from the edges. The personality balances **editorial seriousness** (geometric headings in Space Grotesk) with **app warmth** (rounded humanist body in Plus Jakarta Sans). Every chrome surface is hairline-bordered with a 5–10% white stroke — flat doesn't mean unstructured here, it means quiet structure. Imagery is always given visual weight via crops and contrast rather than via heavy frames or shadows. ## Colors The palette is a **dark monochrome warm-black ladder** (`{colors.background}` → `{colors.surface}` → `{colors.surface-alt}`) with **one** saturated brand color, `{colors.primary}` (#BEF264 — electric lime), reserved for: the active CTA fill, the active tab/chip, the focus ring, the small play-button, hyperlinks, and the active progress-fill. Use `{colors.on-primary}` (#1A2E05, deep moss) as the foreground on lime — never white. `{colors.on-surface}` is the off-white body / heading color. `{colors.on-surface-variant}` is the muted secondary text (subtitles, metadata, inactive tab labels). `{colors.on-surface-muted}` is reserved for disabled or hairline copy. The **chart accents** (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) form a secondary palette used for **atmospheric blur blobs** and **categorical gradient tiles** (genre tiles, mood playlist tiles). They must NEVER fill a CTA, NEVER set a body-text color, and NEVER appear as a card background — only as gradient duets, blurred ambient blobs (3xl blur, 10–20% opacity), or the 1px accent stripe under a tile title. `{colors.error}` is the only semantic color (destructive actions). Borders and dividers are always `rgba(255,255,255,0.05)` — a near-invisible hairline that defines edges without weight. ## Typography Two superfamilies, both Google Fonts: - **Space Grotesk** (`font-heading`) — geometric, slightly mechanical sans for every heading, screen title, and prominent label. Use **Bold (700)** almost exclusively. Tight tracking on the largest sizes (`-0.01em` on `display-lg`). - **Plus Jakarta Sans** (`font-sans`) — humanist sans for body, metadata, buttons, chips, tab labels. Workhorse weights are **600 (semibold)** for buttons/labels/list titles, **400** for paragraphs and metadata. Token roles: - `{typography.display-lg}` — primary screen title on hub screens (e.g. the largest 30px screen header). - `{typography.headline-lg}` — secondary screen title or page heading on detail screens. - `{typography.headline-md}` — section anchors ("Jump Back In", "Top Charts" style section headers). - `{typography.headline-sm}` — card titles inside content tiles. - `{typography.body-md}` — body and list-row primary text (semibold so it reads as content, not paragraph). - `{typography.body-sm}` — metadata, captions, supporting text under titles. - `{typography.label-md}` — buttons, chips, larger interactive labels. - `{typography.label-uppercase}` — tracked-out tiny eyebrows (NEW, kicker labels, section group titles like "DOWNLOADED"). The +0.08em tracking is load-bearing — never collapse it to 0. - `{typography.tab-label}` — bottom tab bar text only (10px, regular). **Weight rule**: 700 owns headings; 600 owns content & interactive labels; 400 owns prose. Skip 500. Italics never used. ## Spacing & Layout Density is **balanced-airy** — generous outer gutters (`{spacing.gutter}` = 24px), cards breathe with 16px internal padding (`{spacing.card-padding}`), section gaps are 32px (`{spacing.section-gap}`). Vertical rhythm is led by section headers: 16px below the section header, then content. Horizontal scrollers extend full-bleed with 24px content padding and no fade — the cut-off at the edge implies "more." The grid is mostly single-column with occasional 2-column tile grids (genre/quick-access). Reserve enough bottom padding for floating chrome (a mini-player + tab bar stack ≈ 160px clearance). ## Elevation & Depth The aesthetic is **flat with atmospheric depth**, not shadow-stacked. Three depth techniques, in order of frequency: 1. **Tonal layering** — `{colors.background}` (page) → `{colors.surface}` (card) → `{colors.surface-alt}` (input/chip) → hairline white-5% border to crisp the edge. 2. **Backdrop blur** — floating chrome (mini-player, tab bar, top-corner icon buttons) uses `backdrop-blur-xl` over a translucent surface (`bg-card/90` or `bg-secondary/50`) with a `border-white/10` hairline. This is the only place a real shadow shows up: `shadow-2xl` on the mini-player. 3. **Ambient color blobs** — large soft `blur-3xl` orbs in chart-accent colors at 10–20% opacity, anchored just outside the viewport corners. Pure decoration; never sits behind primary content. Drop shadows are reserved for: the mini-player (`shadow-2xl`), the small lime play button (`shadow-lg`), and a soft lime glow under the primary FAB (`shadow-primary/20`). Cards and inputs cast no shadow. ## Shapes Radii lean **medium-soft** — nothing is sharp, nothing is fully circular except controls. The `--radius` base is 16px. - `{rounded.sm}` (8px) — small inline accents, eyebrow badge backgrounds. - `{rounded.md}` (12px) — small thumbnails (size-12, size-14 album covers, list-row art). - `{rounded.lg}` (16px) — cards, inputs, mini-player, tile thumbnails of any meaningful size, hero album art. - `{rounded.xl}` (24px) — the largest content tiles (square aspect-ratio playlist tiles, genre tiles). - `{rounded.full}` — every button, chip, avatar, status pill, circular icon container, progress fill. Rule of thumb: **everything tappable that contains text is fully rounded; everything that contains imagery is `lg` or `xl`.** ## Components ### card Stone-black surface with a near-invisible white-5% hairline. No shadow. Used for content tiles, list-item containers, and grouped surfaces. Internal padding 12–16px depending on density. ```html

[Card title]

[Supporting metadata]

``` ### button-primary Lime pill with deep-moss text. Bold weight, 13px, comfortable horizontal padding. The signature CTA — use sparingly (one per screen surface). ```html ``` For a *low-attention* secondary action, render `button-primary` with `bg-primary/10` background and `text-primary` foreground — preserves the lime accent without claiming the spotlight. ### button-secondary Tonal stone pill with hairline border. Identical shape and metrics to `button-primary` so they line up as siblings. ```html ``` ### button-icon-glass 40px circle, translucent stone with backdrop blur and white-5% hairline. Used for top-bar utilities (notifications, settings, history). Houses a 20px solar `linear` icon. ```html ``` This is a signature treatment — the glass-pill icon button is what makes the chrome feel premium-app rather than flat-card. ### input-text Stone-alt fill, white-5% hairline, 16px rounded, leading 20px solar magnifier. Focus-ring is lime at 20% opacity, never a solid stroke. ```html
``` ### chip / chip-active Pill, 13px semibold. Inactive: stone-alt 80% with hairline. Active: lime fill, deep-moss text, no border. Used as horizontal-scroll filter rails. ```html
``` ### badge-pill Tracked-out lime micro-label sitting on a 15%-lime tinted plate. The "NEW" / kicker treatment — pairs with adjacent body copy. ```html [Kicker] ``` ### avatar Round, 40px, with a 2px lime-at-20% ring (signature touch — the lime is referenced even on the avatar). ```html
``` ### list-row A 16px-gap horizontal row: thumbnail → title/subtitle stack → trailing action. Bottom-divided by a `border-white/5` hairline rather than full-card containment when stacked vertically. ```html

[Primary]

[Secondary metadata]

``` A *ranked* list row (numbered chart) prefixes the row with a `size-8` lime numeral in `font-heading font-bold text-lg` — composition only, not a separate component. ### progress-bar A 2px-tall white-10% track with a lime-filled segment. Most often anchored to the bottom edge of a floating surface (mini-player progress). ```html
``` ### top-app-bar Transparent, no border, sits over the page (which often has a top-edge ambient gradient). Layout is avatar+greeting on the left, glass-icon buttons on the right. ```html
[avatar + greeting]
[glass-icon buttons]
``` ### tab-bar / tab-item-active / tab-item-inactive Bottom-anchored, near-opaque background (`bg-background/95`) with `backdrop-blur-xl` and a top hairline. Each tab is a vertical icon+label stack, 16px wide. Active state = solar `bold` icon variant + lime color. Inactive = solar `linear` + muted color. No pill, no underline — variant + color carries the state alone. ```html ``` ### card-floating-glass (signature) A floating action / status surface — translucent stone with `backdrop-blur-xl`, white-10% hairline (slightly stronger than chrome cards), `shadow-2xl`. Sits above content on the bottom of the screen. This component is what makes the aesthetic feel like a "live" app rather than a static page; without it, the design loses its layered after-hours character. ```html

[Primary]

[Secondary]

``` ## Iconography **Solar icon set** is the canonical choice — its slightly-rounded, friendly geometry pairs with Plus Jakarta Sans without going twee. The variant convention is **strict and load-bearing**: - **Linear** (`solar:[name]-linear`) — every default / inactive / utility icon. 1.5px stroke implied. - **Bold** (`solar:[name]-bold`) — every active / selected / primary-action icon. The active tab, the play button, the heart on the favorited row, the bold numeric icon. Icon sizing: 16px inside small chips/buttons, 20px in glass-pill chrome buttons, 24px in tab bars and standalone actions. Always size with Tailwind `size-*` classes — never HTML `width`/`height` attributes. For categorical hero icons inside gradient genre tiles, bump to 48px and tint to 30% of the tile's foreground color (`text-background/30` or `text-white/30`) so the icon reads as texture, not subject. ## Illustration & Imagery This aesthetic uses imagery heavily — every screen surfaces album art, playlist covers, genre tiles, and avatars. Images carry significant visual weight, so the display rules below must be followed exactly. - **Style / Technique**: Mixed — the app aggregates user-content-style imagery from many genres, so the *aggregate* style is "evocative editorial cover art" spanning photographic (moody concert / artist / lifestyle photography), illustrated (lo-fi anime interiors, retro-futurist neon scenes, traditional painting), and graphic-design (geometric color-block, gradient typographic). The unifying thread is **saturated atmosphere** and **mood-first composition** — never sterile product shots, never bright clean stock photography. - **Palette**: Each individual image is allowed its own palette, but selections lean toward **deep, saturated, after-hours** color — magentas, indigos, neon-cyans, sunset oranges, deep teals, warm earths. Avoid washed-out pastels and bright daylight palettes. Atmospheric ambient blobs *behind* the UI use the chart-accent palette (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) at 10–20% opacity, blurred 3xl. - **Edge treatment**: The image itself fills its frame edge-to-edge with no stroke. Frames have NO border on hero/tile imagery. Only `avatar` adds the 2px lime-at-20% ring. - **Shading & light**: Whatever the source provides — but selection bias toward dramatic light (single warm lamp, neon glow, single sunset spotlight) over flat lighting. - **Composition & framing**: Square (1:1) is the default for tiles and album covers. List-row thumbnails crop square. Mini-player art is square 48px. Genre tiles use 4:3. - **Background within the illustration**: Always present — there is no transparent / cut-out imagery in this aesthetic. Image fills its frame. - **Container styling**: - Square album/playlist tiles → `rounded-2xl` (16px) with `border border-white/5` over a `bg-card` placeholder. - List-row thumbnails (size-12 to size-16) → `rounded-xl` (12px), no border. - Hero "card with badge" tiles → `rounded-2xl`, no border, frame contains its own ambient blob. - Genre tiles → `rounded-2xl`, no image — instead a `bg-gradient-to-br` of two chart-accent colors with a centered iconify icon at 30% foreground opacity. This is a categorical stand-in for imagery, not a photograph. - Avatars → `rounded-full` with 2px `border-primary/20`. - **CSS treatment on ``**: Always `class="w-full h-full object-cover"`. Optional `opacity-80 group-hover:opacity-100 transition-opacity` for tiles where hover should reveal a play overlay. The mini-player thumbnail uses `animate-[spin_8s_linear_infinite]` to evoke a vinyl rotation — a signature touch reserved for the floating-glass mini-player only. - **Box-shadow on the image / its frame**: None on tile thumbnails. List-row 16px thumbnails carry an implicit `shadow-lg` only when hovering (`group-hover:scale-105 transition-transform`) — the lift, not the shadow, is the affordance. The exception is the floating-glass mini-player, whose entire surface (image included) sits inside `shadow-2xl`. - **Aspect ratio rule**: Default 1:1. Genre tiles 4:3. Never freeform. - **Anti-references**: NOT 3D-rendered, NOT claymation, NOT bright flat-vector daylight illustration, NOT pastel, NOT corporate stock photography, NOT cut-out / transparent-bg illustration, NOT line-art / wireframe illustration. - **Style recipe prompt**: *A square cover-art image of [SUBJECT], rendered in evocative editorial style — saturated, after-hours mood, deep atmospheric color (magenta, indigo, neon-cyan, sunset orange, or deep teal). Allowed mediums: moody photography with dramatic single-source light, lo-fi illustrated interior in a warm-lamp palette, retro-futurist neon scene, traditional painted landscape with a foggy atmospheric perspective, or geometric color-block graphic design. Composition is mood-first, framing is centered or low-horizon, full-frame with no border. NOT 3D, NOT claymation, NOT pastel, NOT clean daylight stock photography, NOT line-art, NOT cut-out — always a complete bleed-to-edge atmospheric image.* ## Hierarchy & Emphasis Visual weight is dominated by **size + saturation contrast**. Headings (Space Grotesk Bold 20–30px) anchor every screen section; body and metadata fall to muted gray. The lime `{colors.primary}` is the screen's loudest voice — wherever it appears, it is *the* call to action or *the* selected state. Use it once or twice per visible region; if a screen has more than three lime elements at once, downgrade one to muted. Imagery is the second-loudest signal — saturated covers compete with the lime, which is why all chrome (cards, buttons, inputs) is desaturated to stone-black. The chart-accent palette never appears in chrome precisely so it can flare in atmospheric blobs and gradient tiles without competing. Metadata always whispers — `text-muted-foreground` body-sm, no decoration. ## Distinctive Details 1. **Lime-at-20% ring on avatars** — a 2px brand-color hint on otherwise neutral avatars, signaling "you are here" without a heavy treatment. 2. **Backdrop-blur glass for floating chrome** — every floating surface (icon buttons, mini-player, tab bar) uses translucent stone over `backdrop-blur-xl` with a hairline white border. This is what makes the dark background feel layered rather than flat. 3. **Ambient 3xl-blur color blobs** anchored at corners — chart-accent colors at 10–20% opacity, leaking in from off-screen. They give the dark canvas its "after-hours" atmospheric depth without ever competing with content. 4. **Tracked-out micro-eyebrows in lime** — the `text-[10px] uppercase tracking-wider text-primary font-bold` kicker label is the recurring typographic-decoration trick that introduces fresh content without taking heading space. ## Do's and Don'ts ### Do - Reserve `{colors.primary}` (lime) for one CTA, the active tab/chip, focus rings, and the active progress fill — and nothing else. - Pair every heading with `font-heading` (Space Grotesk) Bold; pair every body / button label with `font-sans` (Plus Jakarta Sans) 600 or 400. - Use `border border-white/5` to define every chrome card, input, and chip edge — flat, not borderless. - Use solar `linear` for inactive icons and solar `bold` for active icons — let the variant carry the state. - Place ambient color blobs (`blur-3xl`, 10–20% opacity) just outside viewport corners for atmospheric depth. - Stack floating chrome (mini-player above tab bar) with `backdrop-blur-xl` and `shadow-2xl` to feel layered. ### Don't - Don't use the chart-accent palette (`accent-teal`, `accent-cyan`, `accent-amber`, `accent-peach`) in any UI chrome (buttons, text, card backgrounds). It is for atmospheric blobs and categorical gradient tiles only. - Don't add drop shadows to standard cards or inputs — they should sit flat and rely on hairline borders for separation. - Don't put white text on lime — always use `{colors.on-primary}` (deep moss). - Don't use Bold (700) outside Space Grotesk headings — body/button text caps at Semibold 600. - Don't add a pill or underline indicator to the active tab; the icon variant + lime color is the indicator. - Don't render images on transparent / cut-out backgrounds — every image fills its frame edge-to-edge. - Don't introduce a third heading typeface or a serif into running UI — Playfair Display is loaded but unused; keep it that way unless a brief explicitly calls for editorial display type. - Don't crowd the lime — if a screen surface already has a lime CTA, use stone tonal recipes for any neighboring actions.