Neon Lime Streetwear DESIGN.md

---
version: 1
name: Neon Lime Streetwear Mobile
colors:
  primary: "#D2F34C"
  on-primary: "#000000"
  surface: "#0A0A0B"
  surface-alt: "#1C1C1E"
  surface-muted: "#2C2C2E"
  on-surface: "#FFFFFF"
  on-surface-variant: "#A1A1AA"
  on-surface-muted: "#8E8E93"
  border: "#2C2C2E"
  input: "#272729"
  error: "#FF453A"
  hot: "#EF4444"
typography:
  display-hero:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: 900
    fontStyle: italic
    lineHeight: 1
    letterSpacing: -0.01em
  display-md:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 900
    fontStyle: italic
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
  label-sm:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.15em
  caption:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  numeral-price:
    fontFamily: Montserrat
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  sm: 6px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 28px
  3xl: 36px
  full: 9999px
  shape: squircle
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 32px
  gutter: 20px
  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-alt}"
    rounded: "{rounded.3xl}"
    padding: "{spacing.card-padding}"
    border: none
    boxShadow: none
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    paddingX: 24px
    paddingY: 16px
    border: none
    boxShadow: none
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 6px
    border: none
    boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
  button-icon-circle:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    paddingX: 20px
    paddingY: 16px
    border: none
    boxShadow: none
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 10px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 8px
    border: none
    boxShadow: none
  avatar:
    rounded: "{rounded.full}"
    size: 28px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.3xl}"
    padding: 12px
    gap: 16px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    height: 64px
    paddingX: "{spacing.gutter}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    paddingX: 40px
    paddingY: 16px
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    iconSize: 24px
    gap: 4px
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.caption}"
    iconSize: 24px
    gap: 4px
---

# Neon Lime Streetwear Mobile

## Overview

**Confident, athletic, and after-hours.** This is a near-black canvas punched through with a single electric lime accent, italicized condensed display headlines that lean forward like motion lines, and high-contrast product photography lit on smoky studio black. The mood is hype-drop / streetwear / sneaker-culture — premium but loud, with the visual energy of a release-day countdown.

The system is built on three foundations: (1) a deep near-black surface stack with very small tonal steps between layers, (2) a single saturated chartreuse-lime as the only chromatic voice in chrome, and (3) heavy italic display type used as branding chrome rather than just typography. Photography of objects sits inside softly-tinted color wells — never on plain white — to keep the dark canvas continuous.

## Colors

The palette is a **dark neutral stack + one accent**. Treat it as monochromatic with surgical use of color.

- `{colors.surface}` (#0A0A0B) — page background. Near-black with a subtle warm-blue cast.
- `{colors.surface-alt}` (#1C1C1E) — every card, every chip, every elevated surface. The default "thing on the page."
- `{colors.surface-muted}` (#2C2C2E) — used for borders, dividers, and the next tier of elevation when a fourth layer is needed (e.g. quantity-stepper container).
- `{colors.on-surface}` (#FFFFFF) — primary text, active icons, button labels on white.
- `{colors.on-surface-variant}` (#A1A1AA) — secondary text, inactive icons, metadata.
- `{colors.primary}` (#D2F34C) — the chartreuse lime. **One job: signal active state, premium CTA, the single hero word.** Use it for the primary button fill, the active tab, the active chip, the active filter outline, the heart-favorited state, and exactly one accented word in any display headline. Never as a card background. Never as body text on dark. Pair only with `{colors.on-primary}` (#000000).
- `{colors.error}` / `{colors.hot}` — used sparingly for "Hot" / urgency badges as a tinted-bg + same-hue-text recipe (e.g. `bg-red-500/20 text-red-500`).

**Palette boundaries:** primary lime never bleeds into card bodies, illustration backgrounds, or text passages longer than 2 words. Photography color wells (warm brown, primary-tinted, neutral white) are decorative tints sitting at ~20% alpha behind product images — they are NOT chrome colors and must not be promoted to UI roles.

## Typography

Two voices: **Montserrat Black Italic** for display chrome, **Inter** for everything else.

- `{typography.display-hero}` — Montserrat 900 italic, ~48px. Editorial sneaker-poster headlines on hero cards. Often two lines, where one line is white and the other is `{colors.primary}`.
- `{typography.display-md}` — Montserrat 900 italic, 20px, with `tracking-wider` to `tracking-widest`. Used for the wordmark, screen titles ("MY CART", "BROWSE ALL"), and section headers ("FRESH HEAT", "TRENDING NOW"). Always uppercase. The italic slant + black weight + wide tracking IS the brand voice — do not substitute a regular sans here.
- `{typography.headline-md}` — Inter 700, 18px. Card-group anchors that don't warrant the display treatment ("Shop by Vibe").
- `{typography.body-md}` — Inter 400, 14px. Lead body, descriptive paragraphs.
- `{typography.body-sm}` — Inter 400, 12px. Compressed body, card descriptions.
- `{typography.label-md}` — Inter 700, 12px. Button labels, chip labels, filter labels. Often uppercase.
- `{typography.label-sm}` — Inter 700, 10px, **tracking-widest** (0.15em). Eyebrow kickers above sections ("CATEGORIES", "PROMO CODE", "FILTER BY BRAND"). Always uppercase. The wide tracking is load-bearing.
- `{typography.caption}` — Inter 500, 10px. Tab labels, micro-metadata.
- `{typography.numeral-price}` — Montserrat 700, 18px. Price numerals on cards; uses the heading font (not italic) to give prices a confident, branded weight distinct from body Inter.

**Weight rule:** Inter Bold (700) is the workhorse for any UI text that isn't display. Never use Inter at weight ≥ 800 — go to Montserrat instead. Never use Montserrat regular — its only role is the italic black display voice.

## Spacing & Layout

Density is **balanced-to-airy**: comfortable horizontal gutters of `{spacing.gutter}` (20px), generous `{spacing.section-gap}` (32px) between major sections, and chunky `{spacing.card-padding}` (16px) inside cards. The layout breathes against the dark canvas — empty space is part of the aesthetic, not wasted.

Horizontal scrolling lists with `{spacing.md}` gaps and `pb-2` overflow padding are a recurring rhythm: brand-logo strip, vibe pills, filter chips, fresh-product carousels. Vertical product lists use `space-y-4` between cards.

The bottom tab bar is `fixed`, with `pt-4 pb-8 px-10` (extra bottom padding for safe area), creating a permanent 80–96px reserved bottom zone.

## Elevation & Depth

Elevation is **almost entirely tonal, not shadow-based.** Hierarchy comes from stepping up the surface stack: page (#0A0A0B) → card (#1C1C1E) → border/inner (#2C2C2E). The contrast between page and card is intentionally subtle — these are tonal whispers, not slabs.

Shadows appear only in two places:
1. The primary "Proceed to Checkout" mega-CTA gets a tinted glow: `shadow-lg shadow-primary/20` — the lime bleeding around the button reinforces it as the destination action.
2. Tiny circular white "add" buttons floating on product cards use `shadow-lg` to lift them off the photo well.

Backdrop blur (`backdrop-blur-md` / `backdrop-blur-lg`) appears on the sticky header, the bottom nav, and floating "Exclusive Drop" badges over photography — translucency over content rather than over surface.

## Shapes

The radius vocabulary is generous and rounded throughout:

- `{rounded.sm}` (6px) — small inline tags ("NEW", "HOT", "IN STOCK").
- `{rounded.md}` (16px) — image wells inside cards, inner thumbnails.
- `{rounded.lg}` (20px) — input fields, secondary buttons.
- `{rounded.xl}` (24px) — primary buttons.
- `{rounded.2xl}` (28px) — promo-code apply button.
- `{rounded.3xl}` (36px) — main product cards, list-row cards, hero photo card.
- `{rounded.full}` — chips, pills, circular icon buttons, avatars, brand-logo dot, status dots, quantity stepper.

**Squircle implementation note:** The source uses CSS `corner-shape: squircle` with a `--shape-multiplier: 2.5` to render Apple-style superellipse corners (`@supports (corner-shape: squircle)`). Implementers should set `corner-shape: squircle` on the root and amplify radii via the multiplier so chrome surfaces have visibly smoother iOS-icon-style corners than a vanilla `border-radius`. Component snippets continue to use Tailwind `rounded-*` classes — the squircle rendering is a CSS-level enhancement, not a snippet rewrite.

Shape philosophy: **everything is rounded; sharp corners do not exist in this aesthetic.** Even small inline badges use `rounded-md`. Pills and circles dominate interactive elements; large rounded rectangles dominate content surfaces.

## Components

### card

```html
<div class="bg-[#1C1C1E] rounded-[36px] p-4">
  <!-- product photo well + content -->
</div>
```

### product-card composition recipe

A product card is a `card` containing: (1) a square `bg-[#TINT]/20 rounded-2xl` photo well with an `<img class="mix-blend-screen object-cover">` inside; (2) a small absolute `badge-pill` top-left and a heart icon top-right; (3) a floating circular white `button-secondary` bottom-right with a cart icon; (4) below the photo well, a 700 Inter title, an `on-surface-variant` brand caption, and a `numeral-price`.

### button-primary

```html
<button class="bg-[#D2F34C] text-black font-bold text-xs uppercase tracking-wide px-6 py-4 rounded-[24px] flex items-center justify-center gap-2 active:scale-[0.98] transition-transform">
  [Action label] <iconify-icon icon="solar:[icon-name]-linear" class="size-5"></iconify-icon>
</button>
```

For the **mega-CTA** (checkout-tier action), upgrade to display type and add the tinted glow:

```html
<button class="w-full bg-[#D2F34C] text-black font-[Montserrat] font-black italic text-lg uppercase tracking-wider py-5 rounded-[36px] flex items-center justify-center gap-2 shadow-lg shadow-[#D2F34C]/20 active:scale-[0.98]">
  [Mega CTA label] <iconify-icon icon="solar:arrow-right-linear" class="size-6"></iconify-icon>
</button>
```

### button-secondary

The small white "Add" button is the canonical secondary — a high-contrast white pill against the dark canvas.

```html
<button class="bg-white text-black text-[10px] font-bold px-3 py-1.5 rounded-full flex items-center gap-1">
  <iconify-icon icon="solar:[icon-name]-bold"></iconify-icon> [Label]
</button>
```

### button-icon-circle

```html
<button class="bg-[#1C1C1E] p-2.5 rounded-full">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
</button>
```

### input-text

```html
<div class="relative">
  <iconify-icon icon="solar:magnifer-linear" class="absolute left-4 top-1/2 -translate-y-1/2 text-[#A1A1AA] size-5"></iconify-icon>
  <input type="text" placeholder="[Placeholder]"
    class="w-full bg-[#1C1C1E] border-none rounded-[20px] py-4 pl-12 pr-12 text-sm text-white placeholder:text-[#A1A1AA] focus:ring-1 focus:ring-[#D2F34C]" />
</div>
```

### chip / chip-active

```html
<button class="bg-[#1C1C1E] text-white px-5 py-2.5 rounded-full text-xs font-bold shrink-0">[Label]</button>
<button class="bg-[#D2F34C] text-black px-5 py-2.5 rounded-full text-xs font-bold shrink-0">[Active label]</button>
```

### badge-pill

For inline status badges, use a `bg-{color}/20 text-{color}` recipe so the badge sits as a tinted ghost of itself rather than a solid block. Three canonical variants:

- New / accent → `bg-[#D2F34C]/20 text-[#D2F34C]`
- Hot / urgency → `bg-red-500/20 text-red-500`
- Neutral status → `bg-white/10 text-white`

```html
<span class="bg-[#D2F34C]/20 text-[#D2F34C] text-[8px] font-bold px-1.5 py-0.5 rounded uppercase">[Status]</span>
```

The solid lime `badge-pill` (`bg-[#D2F34C] text-black`) is reserved for floating "NEW" tags overlaid on photography wells.

### badge-circle

A simple status dot — used for the unread bag indicator.

```html
<span class="absolute top-2 right-2 size-2 bg-[#D2F34C] rounded-full"></span>
```

### avatar

```html
<div class="w-7 h-7 rounded-full overflow-hidden border border-[#2C2C2E] ring-2 ring-[#D2F34C]/20">
  <img src="[avatar]" class="w-full h-full object-cover" />
</div>
```

The lime `ring-2 ring-primary/20` halo around the bottom-nav profile avatar is a signature touch — keep it.

### list-row (horizontal product row)

A list-row is a wider `card` variant with reduced padding (12px) and a fixed-size square thumbnail well on the left:

```html
<div class="bg-[#1C1C1E] p-3 rounded-[36px] flex gap-4">
  <div class="w-24 h-24 bg-[#TINT]/20 rounded-2xl overflow-hidden shrink-0">
    <img src="[product]" class="w-full h-full object-cover mix-blend-screen" />
  </div>
  <div class="flex-1 flex flex-col justify-between py-1"><!-- title, meta, price, add button --></div>
</div>
```

### Quantity stepper composition recipe

A quantity stepper is a `pill` container with `bg-background/50 border border-[#2C2C2E] rounded-full px-2 py-1`, holding `[minus icon] [count] [plus icon]` with `gap-4`. The minus icon uses `text-muted-foreground` (linear), the plus icon uses `text-primary` (bold) — the asymmetric coloring signals "increment is the affirmative action."

### top-app-bar

Sticky at top, translucent with backdrop blur:

```html
<header class="flex items-center justify-between px-5 pt-12 pb-4 sticky top-0 bg-[#0A0A0B]/90 backdrop-blur-md z-50">
  <div class="flex items-center gap-2">
    <div class="bg-[#D2F34C] text-black p-1.5 rounded-full flex items-center justify-center">
      <iconify-icon icon="mingcute:[icon-name]-fill" class="text-lg"></iconify-icon>
    </div>
    <h1 class="font-[Montserrat] font-black italic text-xl tracking-wider uppercase">[Wordmark]</h1>
  </div>
  <button class="bg-[#1C1C1E] p-2.5 rounded-full">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
  </button>
</header>
```

The lime-dot wordmark logo (small filled circle with white-on-lime icon, followed by italic black tracked uppercase wordmark) is the canonical brand lockup pattern.

### tab-bar

```html
<nav class="fixed bottom-0 w-full bg-[#0A0A0B]/95 backdrop-blur-lg border-t border-[#2C2C2E] pt-4 pb-8 px-10 flex justify-between items-center z-50">
  <button class="flex flex-col items-center gap-1 text-[#D2F34C]">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    <span class="text-[10px] font-medium">[Active]</span>
  </button>
  <button class="flex flex-col items-center gap-1 text-[#A1A1AA]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
    <span class="text-[10px] font-medium">[Inactive]</span>
  </button>
  <!-- final tab uses an avatar instead of an icon -->
</nav>
```

Active state = `text-primary` + `bold` icon variant. Inactive = `text-muted-foreground` + `linear` icon variant. The icon-variant swap is load-bearing; do not just recolor.

## Iconography

**Icon set: Solar.** Variant convention: `linear` for default/inactive states, `bold` for active/selected/affirmative states. The active/inactive switch is BOTH a color change AND a variant change — a tab going from inactive to active flips `solar:home-smile-linear` to `solar:home-smile-bold`. Same rule for heart (favorited), tab-bar, quantity-plus.

Brand-logo icons (Nike, Adidas, Jordan, etc.) come from the `simple-icons` set when category logos are needed; emoji-style category icons come from `fluent-emoji` for playful "vibe" pickers. The lightning bolt brand mark uses `mingcute:lightning-fill` as a representative example of an icon mark on a lime circle — implementers should pick a brief-appropriate filled icon for any wordmark dot.

Default icon size in chrome is 20–24px; tab-bar and prominent buttons use 24px; inline badge-buttons use ~16px (`size-4`).

## Illustration & Imagery

**Style / Technique:** High-contrast studio product photography on near-black smoky backgrounds. Dramatic side- or rim-lighting with volumetric haze/smoke catching the light. Subjects are photographed at slight three-quarter or hero angles, often levitating mid-frame as if suspended in a beam. The look is **commercial sneaker drop campaign / hype-shot / after-hours studio** — never daylight, never lifestyle, never on-foot.

**Palette:** Each photograph centers a single saturated subject color (chili red, neon green, chartreuse lime, cognac brown, etc.) against a graphite-to-black gradient background. Smoke and rim-light add cool blue-white highlights. Backgrounds are universally dark (#0a0a0b–#2c2c2e range).

**Edge treatment:** No outlines — pure photographic edges. Subjects have a slight rim-light separating them from the dark background. Some images use a mild atmospheric falloff at the edges of the frame.

**Shading & light:** Hard directional key light (often top-left) with a softer fill from the opposite side. Volumetric smoke/haze catches the key light. Deep contact shadows beneath levitating subjects (or no contact shadow if mid-air). Highly contrasted: deep blacks, blown specular highlights on glossy materials.

**Composition & framing:** Subject occupies the center 60–80% of the frame, often at a dynamic angle (15–30° rotation) to suggest motion. Generous negative space above/below filled with smoke and gradient. Subject NEVER bleeds to the frame edge — there's always atmospheric breathing room.

**Background within the illustration:** Dark graphite gradient with volumetric haze — never transparent, never flat solid. The dark photo background visually merges with the dark UI canvas, which is the entire point.

**Container styling:** Two distinct frames coexist:
1. **Hero photo card** — `rounded-[40px]` (`rounded-3xl`) on a `h-[450px]` full-bleed-within-gutter container; `overflow-hidden`; no border; no shadow; a `bg-gradient-to-t from-black/90 via-black/40 to-transparent` overlay sits over the image to anchor headline text at the bottom.
2. **Product thumbnail well** — `rounded-2xl` (`16px`) inner well, with a subtle `bg-[#TINT]/20` colored backplate that matches the dominant subject color of the shoe (warm brown for the brown sneaker, lime for the green sneaker, red for the red sneaker). The colored backplate is required — products never sit on plain card surface.

**CSS treatment on the `<img>` element:** `object-cover` on hero shots; `object-cover mix-blend-screen` on thumbnails sitting inside colored wells (the `mix-blend-screen` pulls dark photo backgrounds out, letting the colored backplate seep through and unify the photo with the card tint). When the product is naturally light (white sneakers), drop `mix-blend-screen` and use a neutral `bg-white/5` well instead.

**Box-shadow on the image or its frame:** None on the photo container itself. The hero card's only "shadow" is the internal black gradient overlay used to bed text. Floating UI buttons OVER the photo (the white circular Add button) carry their own `shadow-lg`.

**Aspect ratio rule:** Hero photo card is roughly 3:4 (450px tall in a ~360px gutter). Product thumbnails are 1:1 squares. Always preserve aspect via `object-cover` + crop; never letterbox.

**Anti-references:** NOT lifestyle / on-foot, NOT daylight, NOT outdoor, NOT illustration, NOT 3D-render-clean (real photography with real haze), NOT pastel, NOT minimal-white-background e-commerce, NOT cartoon.

**Style recipe prompt:**

> *Hero studio product photograph of [SUBJECT], shot against a near-black graphite gradient background with volumetric smoke and haze catching a hard rim light from the upper left. The [SUBJECT] is suspended mid-frame at a slight three-quarter angle, dramatically lit with a single saturated brand color reading clean against the dark scene. Crisp specular highlights on the subject, deep blacks in the background, soft atmospheric falloff at the frame edges. High-contrast commercial campaign aesthetic, hype-drop energy. NOT lifestyle, NOT daylight, NOT illustrated, NOT clean white e-commerce — moody after-hours studio with smoke. Center composition with breathing room, subject does not bleed to the edges.*

## Hierarchy & Emphasis

Visual weight cascade: (1) the single lime accent — guaranteed eye magnet, used at most once or twice per screen; (2) Montserrat black italic display — branding chrome that reads as motion; (3) high-contrast white on near-black for primary text; (4) #A1A1AA muted gray for everything that should whisper. **Saturated color is reserved for active state, primary CTA, and exactly one accented headline word.** Metadata (brand name under product, size info) always sits in muted gray at body-sm. Prices use the heading font weight to feel branded and confident, never apologetic.

## Distinctive Details

1. **The lime-accent display split.** Hero headlines render two lines, where the second line flips to `text-primary`. This typographic move — italic black, color-split, all-caps — IS the brand voice and should appear on at least one hero per app.
2. **Tinted photo wells with mix-blend-screen.** Product images don't sit on neutral cards — they sit on `bg-{subject-color}/20` colored backplates with `mix-blend-screen` applied to the image. The backplate color matches the dominant color of the photographed subject, unifying photo and card into one tinted module.
3. **Asymmetric quantity controls.** In quantity steppers, minus is muted-gray-linear and plus is lime-bold. The asymmetry is intentional and signals affirmative direction.
4. **Tracked-out italic chrome.** Every screen title is uppercase Montserrat black italic with `tracking-wider` to `tracking-widest`. The tracking is load-bearing — without it the italic weight collapses into a generic poster.

## Do's and Don'ts

### Do

- Reserve the lime `{colors.primary}` for active states, the single primary CTA, and one accented display word per hero.
- Use Montserrat Black Italic uppercase + wide tracking for every screen title and section header.
- Place product photography inside `bg-{tint}/20 rounded-2xl` colored wells with `mix-blend-screen` on the image.
- Use the `solar` icon set with `linear` (default) ↔ `bold` (active) variant swapping AND a color change together.
- Use tonal stepping (#0A0A0B → #1C1C1E → #2C2C2E) for elevation; reserve real shadows for the mega-CTA glow and tiny floating action buttons.
- Apply `backdrop-blur` to the sticky header and bottom nav — translucency over content is a signature.

### Don't

- Don't use lime as a card background, body-text color, or for surfaces wider than a button.
- Don't use Montserrat at any weight other than Black (900) Italic — it has exactly one job.
- Don't render product photography on plain card surface or on white backgrounds — always inside a colored well.
- Don't introduce additional accent colors (orange, blue, pink). The system is dark-neutral + one lime + sparing red urgency only.
- Don't use sharp corners; everything is rounded, even small inline badges (minimum `rounded-md` / 6px).
- Don't add shadows to ordinary cards, list rows, or chips — depth here is tonal.
- Don't apply `mix-blend-screen` to genuinely light/white products; swap to a neutral `bg-white/5` well instead.
- Don't strip the wide letter-spacing from display titles — `tracking-wider`/`tracking-widest` is non-optional.