Verdant Nightfall DESIGN.md

---
version: 1
name: "Verdant Nightfall Mobile"
description: "A deep-emerald nocturnal aesthetic pairing a serif Playfair Display centerpiece with a humanist Nunito body, anchored by saturated lime-green primaries and a single buttery-yellow accent. Surfaces are layered translucent cards with hairline white borders and soft blurred color glows behind them, evoking a mossy, atmospheric, slightly mystical mood."
colors:
  background: "#022C22"
  surface: "#064E3B"
  surface-alt: "#14532D"
  surface-popover: "#065F46"
  on-surface: "#ECFCCB"
  on-surface-variant: "#CBF08D"
  on-surface-muted: "#7A9070"
  primary: "#4ADE80"
  on-primary: "#022C22"
  accent: "#FACC15"
  on-accent: "#064E3B"
  border: "#11652F"
  border-hairline: "rgba(255,255,255,0.05)"
  error: "#7F1D1D"
  glow-primary: "rgba(74,222,128,0.5)"
typography:
  display-xl:
    fontFamily: "Playfair Display"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  display-lg:
    fontFamily: "Playfair Display"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
  display-md:
    fontFamily: "Playfair Display"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Playfair Display"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  headline-sm:
    fontFamily: "Playfair Display"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0em
  body-lg:
    fontFamily: "Nunito"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0em
  body-md:
    fontFamily: "Nunito"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: "Nunito"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  label-md:
    fontFamily: "Nunito"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
  label-uppercase:
    fontFamily: "Nunito"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  caption:
    fontFamily: "Nunito"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  tab-label:
    fontFamily: "Nunito"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  gutter: 24px
  card-padding: 20px
  section-gap: 24px
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}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    boxShadow: "0 10px 40px rgba(0,0,0,0.3)"
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
  card-muted:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    height: 56px
    paddingX: 24px
    gap: 8px
    border: none
    boxShadow: "0 8px 24px rgba(74,222,128,0.2)"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    height: 56px
    paddingX: 24px
    boxShadow: none
  button-icon-glass:
    backgroundColor: "rgba(20,83,45,0.3)"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.full}"
    size: 48px
    boxShadow: none
  input-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    border: none
    boxShadow: none
    paddingX: 0px
    paddingY: 0px
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    paddingX: 12px
    paddingY: 6px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    paddingX: 12px
    paddingY: 6px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    size: 36px
    border: none
    boxShadow: none
  badge-circle-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    size: 36px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    paddingX: 20px
    paddingY: 20px
    gap: 16px
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    height: 6px
    border: none
    boxShadow: none
  toggle-switch:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    width: 56px
    height: 32px
    border: none
    boxShadow: "inset 0 1px 2px rgba(0,0,0,0.3)"
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-sm}"
    height: 64px
    paddingX: "{spacing.gutter}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "rgba(2,44,34,0.9)"
    borderColor: "{colors.border-hairline}"
    borderWidth: 1px
    height: 80px
    paddingX: 32px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 4px
  tab-item-inactive:
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.tab-label}"
    iconSize: 24px
    gap: 4px
---

# Verdant Nightfall Mobile

## Overview

**Mossy, atmospheric, contemplative.** A nocturnal forest aesthetic where deep emerald greens layer over near-black backgrounds, illuminated by a single saturated lime accent and the occasional glint of butter-yellow. The mood is hushed and reverent — every screen feels like it sits inside a still, dim conservatory at dusk.

The signature combination is editorial-serif numerals (Playfair Display) against a sturdy humanist body face (Nunito), set on translucent emerald cards with hairline white borders and large blurred color glows behind everything. Nothing is purely flat — there is always an atmospheric haze in the background that softens hard edges and lends depth without using literal drop shadows on small components.

The aesthetic is opinionated about restraint: one primary green carries every active state, one yellow accent carries every "special" moment, and everything else is a tonal step within the green family.

## Colors

The palette is a near-monochromatic green system with two accent escapes.

- `{colors.background}` is the deepest near-black emerald and forms the page floor. `{colors.surface}` and `{colors.surface-alt}` are progressively lighter emerald tiers used for cards and inset blocks. `{colors.surface-popover}` is reserved for the rare lifted surface (modal, popover).
- `{colors.on-surface}` is a pale chartreuse cream — never pure white, always biased toward yellow-green so it harmonizes with the accent. `{colors.on-surface-variant}` and `{colors.on-surface-muted}` step down for secondary and tertiary text.
- `{colors.primary}` is the saturated lime-green that carries every active state: enabled toggles, active chips, the primary CTA, the active tab icon, the gradient terminus on progress bars, and the focus ring. It NEVER appears as a card background — only as a fill on small interactive elements or as a thin gradient stripe.
- `{colors.accent}` is the buttery yellow. It is rationed: a single small icon, a colon between numerals, a "special moment" highlight. Never two accents on the same screen if it can be avoided.
- `{colors.border-hairline}` (5% white) is the universal hairline that sits on top of every translucent surface. `{colors.border}` is the heavier emerald border for ghost buttons.

**Atmospheric layer (separate palette):** every screen has 1–2 large blurred radial glows positioned absolutely behind content — typically a `{colors.primary}`-tinted glow at 20% opacity in one corner and a `{colors.accent}`-tinted glow at 10% opacity in the opposite corner, both blurred by 100–120px and using `mix-blend-screen`. These glows are the aesthetic's heartbeat; never omit them.

## Typography

Two typefaces, working in deliberate contrast.

- **Playfair Display** (serif) carries every numeral and every heading. Weight 500 is the workhorse — it has enough body to feel editorial without becoming heavy. Used for `{typography.display-xl}` (alarm-time-scale numerals, ~96px), `{typography.display-lg}` (large stat numerals, ~72px), `{typography.display-md}`, `{typography.headline-md}` (section titles), and `{typography.headline-sm}` (top-bar titles).
- **Nunito** (humanist sans) carries everything else: body copy, labels, metadata, captions, button text, tab labels. Weight 700 is used for buttons and uppercase labels (where its slight roundness softens the shouting); 500 is the default body weight; 300 is reserved for delicate subtitles directly under a Playfair display numeral.
- **Tracking philosophy:** Playfair runs tight (`-0.01em` to `-0.02em` on display sizes) for editorial density. Nunito uppercase labels run wide (`+0.1em` to `+0.3em`) — the wide-tracked uppercase caption under a Playfair numeral is a signature combination.
- **`{typography.label-uppercase}`** (12px, weight 700, +0.1em, uppercase) is the caption-eyebrow that pairs with display numerals and section anchors. Always render in `{colors.on-surface-muted}` or `{colors.accent}`, never `{colors.on-surface}` — its restraint is the whole point.

A small composition note: when a numeral row contains multiple values separated by a colon (clock-style displays), render the colon in `{colors.primary}` while the numerals stay `{colors.on-surface}`. This single-character splash of green is a recurring motif.

## Spacing & Layout

**Generous and breathing.** Side gutter is `{spacing.gutter}` (24px). Cards have `{spacing.card-padding}` (20px) internal padding and stack with `{spacing.md}` (16px) gaps. Sections separate by `{spacing.section-gap}` (24px) of vertical air.

Top of every screen carries an unusually tall hero region (~30–35% of viewport) where a serif display numeral floats centered, surrounded by negative space. Below the hero, content compresses into the standard rhythm. This high-contrast density shift between hero and body is part of the aesthetic.

The bottom tab bar sits flat against the screen edge but uses a translucent dark fill so the atmospheric glows behind it bleed through subtly.

## Elevation & Depth

Depth is conveyed through **translucency and atmospheric glow**, not classical drop shadows.

- **Tier 1 — page floor:** `{colors.background}` flat. The two blurred radial glows live here.
- **Tier 2 — translucent surfaces:** Cards and chrome buttons use `{colors.surface}` at 40–60% opacity with `backdrop-blur-md` and a 1px `{colors.border-hairline}` outline. This is the workhorse elevation.
- **Tier 3 — emphasis:** A single sectional surface (e.g. the main scroll panel) may use a `bg-gradient-to-b` from `{colors.surface}/80` to `{colors.background}` with a top-only inner border and a soft outer shadow `0 -10px 40px rgba(0,0,0,0.3)`. Used at most once per screen.
- **Glow shadows on active elements:** the primary CTA carries `0 8px 24px rgba(74,222,128,0.2)`, and progress-bar fills carry `0 0 15px rgba(74,222,128,0.5)`. These green-tinted shadows are how "active" reads at distance.

Never use neutral black drop shadows on small components — the depth always comes from green or yellow ambient light.

## Shapes

A pronounced soft-corner language. The radius scale steps up generously: `{rounded.sm}` (8px) for tight inline elements like chips, `{rounded.md}` (16px) for nested icon containers, `{rounded.lg}` (24px) for standard surfaces, `{rounded.xl}` (32px) for cards, `{rounded.2xl}` (40px) for the largest sectional surfaces, and `{rounded.full}` for every pill — buttons, toggles, day-of-week selector dots, icon-only chrome buttons, badges, progress bars.

Rule of thumb: **anything interactive that isn't a card is a pill.** Buttons are always fully rounded. Chrome icon buttons are always circular. Day selectors are circles. Toggle tracks are pills.

## Components

### card

Translucent emerald surface, hairline outline, generous radius. The default container.

```html
<div class="bg-[#064E3B]/60 backdrop-blur-sm border border-white/5 rounded-[32px] p-5 shadow-[0_10px_40px_rgba(0,0,0,0.3)]">
  <h3 class="font-[Playfair_Display] text-2xl text-[#ECFCCB] mb-2">[Card title]</h3>
  <p class="font-[Nunito] text-sm text-[#CBF08D]">[Body copy]</p>
</div>
```

For a tonally muted card variant (lower-emphasis list items), swap the background to `bg-[#14532D]/20` and drop the shadow — same border, same radius. This is the recipe for "inactive list row."

### button-primary

Lime pill with green-glow shadow.

```html
<button class="h-14 px-6 rounded-full bg-[#4ADE80] text-[#022C22] font-[Nunito] font-bold text-sm tracking-[0.1em] uppercase shadow-[0_8px_24px_rgba(74,222,128,0.2)] flex items-center justify-center gap-2">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [Action label]
</button>
```

Always uppercase, always with `tracking-[0.1em]`. May be `w-full` in form contexts.

### button-secondary

Ghost pill with hairline emerald border.

```html
<button class="w-full py-6 rounded-[32px] backdrop-blur-sm border border-[#11652F] text-[#ECFCCB] font-[Nunito] font-bold tracking-[0.2em] uppercase text-sm hover:bg-[#064E3B]/60 transition-colors">
  [Secondary action]
</button>
```

### button-icon-glass

Circular chrome button used in top app bars and overlay controls. Translucent emerald, hairline border, no shadow.

```html
<button class="size-12 rounded-full bg-[#14532D]/30 backdrop-blur-sm border border-white/5 flex items-center justify-center text-[#ECFCCB]">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
</button>
```

### input-text

Inputs are borderless and live INSIDE a `card`. Label sits above as `{typography.label-uppercase}` in `{colors.on-surface-muted}`; the value renders as `{typography.body-md}` in `{colors.on-surface}`. No frame around the input itself — the card is the frame.

```html
<div class="bg-[#064E3B]/40 backdrop-blur-sm rounded-[32px] p-5 border border-white/5">
  <p class="font-[Nunito] text-xs text-[#CBF08D] font-bold uppercase tracking-wider">[Label]</p>
  <input type="text" value="[Value]" class="bg-transparent text-[#ECFCCB] font-[Nunito] font-medium focus:outline-none w-full border-none p-0 mt-1" />
</div>
```

### chip / chip-active

Small rounded-rect pill (NOT fully round — the day-of-week selector uses fully round; the AM/PM-style chip uses `{rounded.sm}`). Active state is the lime fill on the dark text.

```html
<button class="px-3 py-1 rounded-lg bg-[#4ADE80] text-[#022C22] font-[Nunito] font-bold text-xs">[Active]</button>
<button class="px-3 py-1 rounded-lg bg-[#14532D] text-[#CBF08D] font-[Nunito] font-bold text-xs">[Inactive]</button>
```

### badge-circle

Circular selector dot used for day-of-week pickers and small numeric badges. Active = primary fill on dark text; inactive = surface-alt fill on muted text.

```html
<button class="size-9 rounded-full bg-[#4ADE80] text-[#022C22] font-[Nunito] font-bold text-xs">[X]</button>
<button class="size-9 rounded-full bg-[#14532D] text-[#CBF08D] font-[Nunito] font-bold text-xs">[X]</button>
```

A row of these — 5 active, 2 inactive — is a recurring composition for any 7-slot selector.

### list-row

Translucent card with a left-edge gradient stripe for the "currently emphasized" row. The stripe is a 1.5px-wide vertical gradient from `{colors.primary}` fading to transparent.

```html
<div class="relative bg-[#064E3B]/60 border border-white/5 rounded-[32px] p-5 shadow-lg overflow-hidden">
  <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-[#4ADE80] to-transparent"></div>
  <div class="flex items-center justify-between">
    <div class="flex-1">
      <div class="flex items-baseline gap-2">
        <span class="font-[Playfair_Display] text-4xl text-[#ECFCCB]">[Value]</span>
        <span class="font-[Nunito] text-sm font-bold text-[#CBF08D] uppercase">[Unit]</span>
      </div>
      <div class="flex items-center gap-2 mt-1 text-sm text-[#ECFCCB]">
        <iconify-icon icon="solar:[icon-name]-bold" class="text-[#4ADE80] size-4"></iconify-icon>
        <span>[Label]</span>
      </div>
    </div>
  </div>
</div>
```

For a deemphasized version, drop the gradient stripe, swap to `bg-[#14532D]/20`, swap numerals to `text-[#CBF08D]`, and wrap content in `opacity-60` until hover.

### progress-bar

Thin pill with a gradient primary fill and a green-tinted glow shadow on the fill.

```html
<div class="w-full h-1.5 bg-[#14532D]/50 rounded-full overflow-hidden">
  <div class="h-full bg-gradient-to-r from-[#4ADE80] to-[#FACC15] w-[65%] rounded-full shadow-[0_0_15px_rgba(74,222,128,0.5)]"></div>
</div>
```

The gradient terminates in `{colors.accent}` — the only place the two saturated colors meet.

### toggle-switch

Custom-styled checkbox toggle, pill track with circular thumb, inner shadow on the track for depth.

```html
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" checked class="sr-only peer" />
  <div class="w-14 h-8 bg-[#14532D] rounded-full peer peer-checked:bg-[#4ADE80] shadow-inner after:content-[''] after:absolute after:top-1 after:start-1 after:bg-[#ECFCCB] after:rounded-full after:size-6 after:transition-all peer-checked:after:translate-x-full"></div>
</label>
```

### top-app-bar

Transparent. Title in `{typography.headline-sm}` Playfair, centered. Flanking `button-icon-glass` left and right.

```html
<header class="flex items-center justify-between px-6 pt-12 pb-6">
  <button class="size-12 rounded-full bg-[#14532D]/30 backdrop-blur-sm border border-white/5 flex items-center justify-center text-[#ECFCCB]">
    <iconify-icon icon="solar:arrow-left-linear" class="size-6"></iconify-icon>
  </button>
  <h1 class="font-[Playfair_Display] text-xl text-[#ECFCCB] font-medium">[Screen title]</h1>
  <button class="size-12 rounded-full bg-[#14532D]/30 backdrop-blur-sm border border-white/5 flex items-center justify-center text-[#ECFCCB]">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  </button>
</header>
```

### tab-bar

Translucent dark bar fixed to bottom, hairline top border, blurred. Active tab item uses `{colors.primary}` icon (bold variant) and bold tab label; inactive uses `{colors.on-surface-muted}` icon (linear variant) and medium label.

```html
<nav class="absolute bottom-0 inset-x-0 bg-[#022C22]/90 backdrop-blur-xl border-t border-white/5 pt-4 pb-8 px-8">
  <div class="flex justify-between items-center max-w-sm mx-auto">
    <button class="flex flex-col items-center gap-1 text-[#4ADE80]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="font-[Nunito] text-[10px] font-bold tracking-wide">[Tab]</span>
    </button>
    <button class="flex flex-col items-center gap-1 text-[#7A9070]">
      <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
      <span class="font-[Nunito] text-[10px] font-medium tracking-wide">[Tab]</span>
    </button>
  </div>
</nav>
```

### Composition recipes (not separate components)

- **Hero numeral block:** an oversized Playfair numeral (`{typography.display-xl}` or larger) centered on its own with a small `{typography.label-uppercase}` eyebrow above (in `{colors.accent}` with a tiny leading icon) and a Nunito subtitle in `{typography.body-lg}` below in `{colors.on-surface-variant}`. This is the canonical "screen anchor."
- **Numeric row with colon separator:** display numerals separated by a Playfair colon rendered in `{colors.primary}` — a single-character green pop that anchors the row.
- **Stepper field:** vertical stack of `solar:alt-arrow-up-linear` (50% opacity) → numeral in `{typography.display-lg}` → `solar:alt-arrow-down-linear` (50% opacity), centered. Use this anywhere a value can be incremented.
- **Field row inside card:** 40×40 `{rounded.md}` icon container in `{colors.surface-alt}/50` on the left (icon colored `{colors.primary}` or `{colors.accent}`), then a column with `{typography.label-uppercase}` muted label above `{typography.body-md}` value, and an optional trailing `solar:alt-arrow-right-linear` chevron.

## Iconography

**Solar** is the icon set, used in two variants: **linear** as the default and **bold** for active or emphatic states. The variant switch is how active state is communicated alongside the color shift to `{colors.primary}`.

- Default chrome icons in top app bars and tab bars: linear, `{colors.on-surface}` or `{colors.on-surface-muted}`.
- Active tab, primary-action icons, list-row category markers: bold, `{colors.primary}`.
- "Special moment" icons (the rare yellow accent — sun, sparkle, sunrise indicator): bold, `{colors.accent}`.
- Standard icon size is 24px in chrome, 16–20px when inline with body copy, 32px+ for hero icons.

Icons are NEVER outlined in a colored ring or boxed in chrome unless they sit inside a 40×40 icon container (a `{rounded.md}` `{colors.surface-alt}/50` square — the canonical "field icon container").

## Illustration & Imagery

**Note**: no source images present in HTML. This section is *inferred* from the aesthetic's type, color, and shape language — treat as a starting point, not ground truth. If a future round of extraction includes images, this section should be replaced with extracted values.

- **Style / Technique**: Soft, atmospheric flat-vector with subtle gradient shading — would suit dim, jungle-conservatory subjects rendered with simple silhouettes and one or two ambient light sources. Definitely NOT photographic and NOT 3D claymation; the editorial-serif/dark-emerald combination calls for hand-illustrated depth without literal realism.
- **Palette**: Restricted to the green family — `{colors.background}`, `{colors.surface}`, `{colors.surface-alt}`, `{colors.on-surface-variant}`, `{colors.primary}` — with `{colors.accent}` as a single small highlight per illustration (a moon, a lit window, a firefly). 4–5 colors maximum per illustration.
- **Edge treatment**: No outlines. Forms are defined by tonal differences within the green spectrum. If contrast is insufficient, a 1px `{colors.border-hairline}` rim-light may be used sparingly to suggest backlight.
- **Shading & light**: One soft directional light source from above, with a single subtle gradient per shape. Avoid hard cel-shading and avoid multiple light sources. The illustration should feel lit by a single window or a single lamp.
- **Composition & framing**: Subject sits centered or slightly off-center with significant negative space — at least 40% of the canvas is the dark green background. The subject is small relative to the frame; the atmosphere matters more than the subject.
- **Background within the illustration**: Always a `{colors.background}` deep emerald, optionally with a single soft radial glow in `{colors.primary}` or `{colors.accent}` echoing the page-level atmospheric glows.
- **Container styling**: Frame as a `{rounded.xl}` (32px) card matching the standard `card` recipe — `{colors.surface}/60` background, 1px `{colors.border-hairline}` outline, no internal padding around the image (the illustration bleeds to the card's inner edge with the card's `{rounded.xl}` radius applied to the image as well).
- **CSS treatment on `<img>`**: `object-cover`, no `mix-blend-mode`, full opacity, no CSS filter. The illustration is meant to read clearly within its frame.
- **Box-shadow**: None on the image itself; the containing card may carry the standard `0 10px 40px rgba(0,0,0,0.3)` if elevated.
- **Aspect ratio rule**: Prefer 4:5 portrait or 1:1 square framing. Never crop a subject to landscape unless the layout demands it.
- **Anti-references**: NOT photographic, NOT 3D-rendered, NOT claymation, NOT pixel art, NOT bright-cartoon, NOT outlined-line-art, NOT pastel, NOT high-saturation across multiple hues.
- **Style recipe prompt**: *Soft flat-vector illustration of [SUBJECT], rendered in a restricted deep-emerald palette (#022C22 background, #064E3B mid-tones, #14532D shadows, #4ADE80 lime highlights, with a single small #FACC15 buttery-yellow accent point of light). One soft directional light source from above, subtle gradient shading within shapes, no outlines, generous negative space — subject occupies less than 60% of the canvas. Atmospheric and contemplative mood, mossy-conservatory-at-dusk feeling. NOT photographic, NOT 3D, NOT pastel, NOT cartoon-bright, NOT outlined.*

## Hierarchy & Emphasis

- **Size carries the most weight**: a Playfair display numeral always wins the screen, regardless of color.
- **Saturated `{colors.primary}` is reserved for ACTIVE state** — the currently-on toggle, the selected day, the focused tab, the primary CTA. Never decorative.
- **`{colors.accent}` is reserved for SPECIAL state** — a moment of warmth, a single highlighted icon, the gradient terminus on a progress bar. One accent moment per screen ideally.
- **Metadata always whispers** in `{colors.on-surface-muted}` at small Nunito sizes with wide letter-spacing.
- **Active vs. inactive in lists** is communicated by THREE simultaneous shifts: opacity (60% → 100%), background (`surface-alt/20` → `surface/60`), and the addition of a left-edge gradient stripe. All three together; never just one.

## Distinctive Details

1. **Atmospheric blurred glows behind every screen.** Two large radial color glows (one primary-tinted, one accent-tinted), heavily blurred, low opacity, `mix-blend-screen`. They are not optional — without them the deep green flattens and the aesthetic dies.
2. **The single green colon.** When numerals are separated by a colon (clock-style stat displays), the colon is rendered in `{colors.primary}` while the numerals stay cream. This one-character splash of green is a signature treatment that can be applied to any numeric pair.
3. **The left-edge gradient stripe on the emphasized list row.** A 1.5px-wide vertical bar fading from `{colors.primary}` at the top to transparent at the bottom, sitting flush against a card's left edge. It marks "this is the active row" without filling or recoloring the whole card.
4. **Editorial-serif numerals against humanist body type.** The Playfair/Nunito contrast is the core typographic identity — never substitute Playfair for headings while keeping Nunito for body, and never use Playfair for body text.

## Do's and Don'ts

### Do

- Use Playfair Display for every numeral and every heading; Nunito for everything else.
- Keep the page floor `{colors.background}` and ALWAYS layer 1–2 large blurred radial glows behind content.
- Use `{colors.primary}` only for active states, and `{colors.accent}` only for one special moment per screen.
- Make every interactive non-card element a pill — fully rounded.
- Use translucent surfaces (`/40`, `/60` opacity) with hairline white borders to convey elevation.
- Render uppercase labels with `+0.1em` to `+0.3em` letter-spacing — wide tracking is the rule.
- Communicate active list state with three combined shifts: opacity, background, and the left-edge gradient stripe.

### Don't

- Don't use `{colors.primary}` as a card background — it appears only on small interactive elements and as a thin gradient.
- Don't use multiple `{colors.accent}` highlights on the same screen unless absolutely necessary.
- Don't apply neutral black drop shadows to small components — depth comes from green/yellow ambient glows.
- Don't omit the atmospheric blurred glows behind the page; they are load-bearing.
- Don't substitute pure white for `{colors.on-surface}` — the cream chartreuse is the only acceptable foreground.
- Don't outline icons in a colored ring; if framing is needed, use the 40×40 `{rounded.md}` `surface-alt/50` icon container.
- Don't mix Playfair and Nunito within the same line — keep them in separate type runs.
- Don't use sharp corners anywhere; the smallest radius in the system is `{rounded.sm}` (8px).