Cream Neobrutalist DESIGN.md

---
version: 1
name: Cream Neobrutalist Mobile
colors:
  background: "#F5F0E8"
  surface: "#FFFFFF"
  on-surface: "#1A1A1A"
  on-surface-variant: "#6B7280"
  border: "#1A1A1A"
  primary: "#E85D3A"
  on-primary: "#FFFFFF"
  secondary: "#1A1A1A"
  on-secondary: "#FFFFFF"
  accent: "#E8B93A"
  on-accent: "#1A1A1A"
  muted: "#E5E7EB"
  cat-coral: "#E85D3A"
  cat-blue: "#3A6BE8"
  cat-green: "#7BB069"
  cat-yellow: "#E8B93A"
  cat-pink: "#E85D8A"
  error: "#EF4444"
  success: "#7BB069"
typography:
  display-md:
    fontFamily: Fraunces
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Fraunces
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: -0.005em
  headline-md:
    fontFamily: Fraunces
    fontSize: 20px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0em
  headline-sm:
    fontFamily: Fraunces
    fontSize: 18px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: 0em
  card-numeral:
    fontFamily: Fraunces
    fontSize: 18px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  body-italic:
    fontFamily: Fraunces
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0.06em
  label-sm:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 12px
    letterSpacing: 0.08em
  tab-label:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 12px
    letterSpacing: 0.08em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  "2xl": 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  "2xl": 32px
  gutter: 24px
  card-padding: 16px
  section-gap: 32px
icons:
  set: phosphor
  default_variant: regular
  active_variant: fill
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    boxShadow: "4px 4px 0px #1A1A1A"
  card-compact:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.md}"
    padding: 12px
    boxShadow: "2px 2px 0px #1A1A1A"
  card-feature:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.xl}"
    padding: 20px
    boxShadow: "4px 4px 0px #1A1A1A"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: 44px
    paddingX: 20px
    boxShadow: "4px 4px 0px #1A1A1A"
    pressedBackground: "#D4512F"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: 44px
    paddingX: 20px
    boxShadow: "2px 2px 0px #1A1A1A"
  button-icon:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.md}"
    size: 44px
    boxShadow: "2px 2px 0px #1A1A1A"
    iconSize: 24px
  button-fab:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.lg}"
    size: 56px
    boxShadow: "4px 4px 0px #1A1A1A"
    iconSize: 32px
  input-text:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    height: 44px
    paddingX: 16px
    boxShadow: "2px 2px 0px #1A1A1A"
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    boxShadow: "2px 2px 0px #1A1A1A"
  chip-active:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 8px
    boxShadow: "2px 2px 0px #1A1A1A"
  badge-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 10px
    paddingY: 4px
    boxShadow: none
  avatar:
    backgroundColor: "{colors.muted}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.md}"
    size: 56px
    boxShadow: none
  avatar-circle-sm:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.full}"
    size: 48px
    boxShadow: "2px 2px 0px #1A1A1A"
  list-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    rounded: "{rounded.lg}"
    padding: 12px
    gap: "{spacing.lg}"
    boxShadow: "4px 4px 0px #1A1A1A"
  progress-bar:
    backgroundColor: "{colors.muted}"
    rounded: "{rounded.full}"
    height: 6px
    border: none
    boxShadow: none
  progress-bar-thick:
    backgroundColor: "#3A3A3A"
    rounded: "{rounded.full}"
    height: 8px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    paddingX: "{spacing.gutter}"
    paddingY: 16px
    boxShadow: none
  tab-bar:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    paddingX: "{spacing.gutter}"
    paddingY: 12px
    boxShadow: "0 -2px 10px rgba(0,0,0,0.05)"
  tab-item-active:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.md}"
    size: 44px
    iconSize: 24px
    border: none
    boxShadow: "2px 2px 0px #1A1A1A"
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.md}"
    size: 44px
    iconSize: 24px
    border: none
    boxShadow: none
---

# Cream Neobrutalist Mobile

## Overview

**Warm, paper-stock cream canvas married to ink-black 2px borders and offset hard shadows.** This is a contemporary neobrutalist mobile aesthetic: every meaningful surface is hand-stamped with a thick black outline and a flat, non-blurred drop-shadow that sits a few pixels down-and-right, as if every card were a printed sticker pressed onto kraft paper. There is zero translucency, zero Gaussian blur, and zero gradient softness — depth is conveyed by the offset shadow alone.

The personality is **editorial-meets-arcade**: a warm Fraunces serif (often italicized for the second word of a title, used as a typographic flourish) carries headings, while Inter handles all functional UI text in heavy weights with generous letter-spacing on uppercase labels. Color is used as confident, saturated punctuation against the cream and ink — never as a wash or atmosphere.

The result feels tactile, opinionated, and slightly playful — confident enough to be used for serious products but warm enough to feel inviting.

## Colors

The palette has three layers, each with strict boundaries:

**Chrome (always present):** `{colors.background}` is the warm cream canvas; `{colors.surface}` is pure white reserved for cards and inputs only — never a full-screen background. `{colors.on-surface}` doubles as the universal **border color** at 2px on every component. `{colors.on-surface-variant}` is the only acceptable secondary text color.

**Brand & emphasis:** `{colors.primary}` (saturated coral) is used for the dominant CTA, active progress fill, and translation/hint text in word entries. `{colors.secondary}` (near-black ink) is used for hero feature surfaces, the active tab pill, and active filter chips. `{colors.accent}` (warm yellow) is reserved for stars, achievements, and "in progress" states — it never carries a CTA.

**Categorical (`cat-*`):** five saturated hues (`cat-coral`, `cat-blue`, `cat-green`, `cat-yellow`, `cat-pink`) for tagging, status, charting, and category icons. Use them to *differentiate* — never to decorate. A card never has a `cat-*` background unless it represents a categorical state. The hero feature card (`{components.card-feature}`) and the AI-style accent card use `{colors.secondary}` and `{colors.cat-blue}` respectively as full backgrounds; this is the signature "loud surface" move and should be used sparingly (one per screen).

**Hard rules:**
- The 2px border is **always** `{colors.border}` (`#1A1A1A`). Never a tinted border, never a hairline, never a different weight.
- Drop shadows are **always** the same ink color, no blur, offset only. Never soft, never colored.
- The cream `{colors.background}` never appears inside cards — surfaces are white or a saturated brand/categorical hue.

## Typography

Two-family system:

- **Fraunces** (serif) carries every heading, every numeral that wants weight, and the recurring "italic flourish" trick. Always 700 for the bold portion; 400 italic for the flourish word. Mix bold and italic in the same heading by italicizing the second noun (e.g. *first* word bold-roman, *second* word italic-regular) — this is a signature gesture.
- **Inter** handles all functional UI: labels, buttons, body, captions, tab labels.

`{typography.display-md}` (30px Fraunces 700) is the screen title. `{typography.headline-md}` and `{typography.headline-sm}` are section anchors and card titles. `{typography.label-md}` and `{typography.label-sm}` are uppercase, heavily letter-spaced (0.06–0.08em) — they carry metadata kickers, button text, badge text, and tab labels. The uppercase + tracked-out treatment is load-bearing: it visually "stamps" labels onto the page like a printer's mark.

`{typography.body-italic}` (Fraunces italic at 12px) is reserved for example sentences, voice samples, or quoted phrases — italic Fraunces does the work that a quote-block bar or fancy callout would do in other systems.

**Weight rule of thumb:** Fraunces is bold or italic-regular, never in between. Inter is 700 for labels, 500 for body, 400 only for muted descriptive text.

## Spacing & Layout

Density sits at **balanced-to-airy**. Screen gutters are `{spacing.gutter}` (24px); cards have `{spacing.card-padding}` (16px) internal padding; sections separate at `{spacing.section-gap}` (32px). The cream surface and uniform 4px hard-shadow offsets create natural breathing room — content doesn't need to crowd.

A consistent rhythm: a sticky bordered top bar, a hero loud-surface card, a horizontal chip strip, then a vertical stack of bordered cards. The implementer composes screens from these blocks; the aesthetic does not prescribe the arrangement.

## Elevation & Depth

There is exactly **one elevation move** in this system, applied with three offset sizes:

- **2px offset** (`shadow-[2px_2px_0px_#1A1A1A]`) — small chrome (badges, chips, inputs, icon buttons, tab active pill, compact cards).
- **4px offset** (`shadow-[4px_4px_0px_#1A1A1A]`) — primary cards, list rows, feature surfaces, the FAB, primary CTAs.
- **0 offset** — backgrounds, dividers, decorative dot patterns, progress bars, plain inline avatars.

The shadow is **always solid `#1A1A1A`, no blur, offset down-and-right**. Never use `rgba` blurry shadows, never use a colored glow, never inset. The pressed state collapses the offset: `active:translate-x-[1px] active:translate-y-[1px] active:shadow-none` (or to the next-smaller offset). This press behavior is the signature interactivity feel and should apply to every interactive bordered element.

The **single exception** is the bottom tab bar, which uses a soft top-edge glow (`0 -2px 10px rgba(0,0,0,0.05)`) to lift it off the canvas — this is the only blurred shadow allowed in the system.

## Shapes

Mostly rounded rectangles in a tight scale — `{rounded.md}` (12px) for inputs, icon buttons, and small cards; `{rounded.lg}` (16px) for standard cards and list rows; `{rounded.xl}` (20px) for hero/feature cards; `{rounded.full}` for chips, progress bars, status dots, and the user-circle avatar. Avatars in list rows use `{rounded.md}` (square-with-soft-corners), not circles — circles are reserved for status indicators and the header user mark.

The shape language is **softened-rectangular**, not pillowy. Corners are visible and consistent; nothing is fully circular except where pill-shape is functional.

## Components

### card

The workhorse surface. White fill, 2px ink border, 4px hard shadow, 16px internal padding.

```html
<div class="bg-white border-2 border-[#1A1A1A] rounded-2xl p-4 shadow-[4px_4px_0px_#1A1A1A]">
  <h4 class="font-[Fraunces] text-xl font-bold">[Card title]</h4>
  <p class="text-sm text-[#6B7280] mt-1">[Card body]</p>
</div>
```

### card-feature

The "loud surface" — used at most once per screen as a hero CTA / feature highlight. Black or saturated-color fill, white text, often overlaid with a faint dot-grid texture in the top-right corner.

```html
<div class="bg-[#1A1A1A] text-white border-2 border-[#1A1A1A] rounded-3xl p-5 shadow-[4px_4px_0px_#1A1A1A] relative overflow-hidden">
  <div style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 16px 16px;" class="absolute top-0 right-0 w-32 h-32 opacity-20"></div>
  <div class="relative">
    <p class="text-[10px] uppercase tracking-widest opacity-70">[Kicker]</p>
    <h2 class="font-[Fraunces] text-2xl font-bold mt-1">[Title] <span class="italic font-normal">[flourish]</span></h2>
    <p class="text-sm text-gray-300 mt-1">[Subtitle]</p>
  </div>
</div>
```

### button-primary

Coral fill, ink border, 4px hard shadow, uppercase tracked-out label.

```html
<button class="h-11 px-5 bg-[#E85D3A] text-white border-2 border-[#1A1A1A] rounded-xl font-bold text-xs uppercase tracking-wider shadow-[4px_4px_0px_#1A1A1A] active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_#1A1A1A] transition-all">
  [Button label]
</button>
```

### button-secondary

White fill, ink border, 2px hard shadow.

```html
<button class="h-11 px-5 bg-white text-[#1A1A1A] border-2 border-[#1A1A1A] rounded-xl font-bold text-xs uppercase tracking-wider shadow-[2px_2px_0px_#1A1A1A] active:translate-x-[1px] active:translate-y-[1px] active:shadow-none transition-all">
  [Button label]
</button>
```

### button-icon

44×44 square icon button with the same chrome treatment.

```html
<button class="size-11 bg-white border-2 border-[#1A1A1A] rounded-xl flex items-center justify-center shadow-[2px_2px_0px_#1A1A1A] active:translate-x-[1px] active:translate-y-[1px] active:shadow-none transition-all">
  <iconify-icon icon="ph:[icon-name]" class="size-6"></iconify-icon>
</button>
```

### button-fab

Floating action button, 56×56, primary fill, 4px shadow, anchored above the tab bar.

```html
<button class="absolute bottom-24 right-6 size-14 bg-[#E85D3A] text-white border-2 border-[#1A1A1A] rounded-2xl flex items-center justify-center shadow-[4px_4px_0px_#1A1A1A] active:translate-x-[1px] active:translate-y-[1px] active:shadow-none transition-all">
  <iconify-icon icon="ph:plus-bold" class="size-8"></iconify-icon>
</button>
```

### input-text

```html
<div class="relative">
  <iconify-icon icon="ph:magnifying-glass" class="absolute left-3 top-1/2 -translate-y-1/2 text-[#6B7280] size-5"></iconify-icon>
  <input type="text" placeholder="[Placeholder]" class="w-full h-11 bg-white border-2 border-[#1A1A1A] rounded-xl pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-[#E85D3A] shadow-[2px_2px_0px_#1A1A1A]" />
</div>
```

### chip / chip-active

Pill chips, uppercase-tracked label, always with 2px shadow. Active state is ink-fill / white-text.

```html
<button class="px-4 py-2 bg-white border-2 border-[#1A1A1A] rounded-full text-xs font-bold uppercase tracking-wider shadow-[2px_2px_0px_#1A1A1A] whitespace-nowrap">[Label]</button>
<button class="px-4 py-2 bg-[#1A1A1A] text-white border-2 border-[#1A1A1A] rounded-full text-xs font-bold uppercase tracking-wider shadow-[2px_2px_0px_#1A1A1A] whitespace-nowrap">[Active]</button>
```

### list-row

A standalone bordered card-as-row with avatar/icon + body + trailing meta.

```html
<div class="flex items-center gap-4 bg-white border-2 border-[#1A1A1A] rounded-2xl p-3 shadow-[4px_4px_0px_#1A1A1A]">
  <img src="[avatar-url]" alt="" class="size-14 rounded-xl border-2 border-[#1A1A1A]" />
  <div class="flex-1 min-w-0">
    <div class="flex items-center justify-between mb-0.5">
      <p class="font-[Fraunces] font-bold text-base truncate">[Primary]</p>
      <span class="text-[10px] text-[#6B7280] uppercase font-bold">[Meta]</span>
    </div>
    <p class="text-xs text-[#6B7280] truncate italic">[Secondary]</p>
  </div>
</div>
```

### avatar

Image avatars are square with `{rounded.md}` corners and a 2px ink border — never circular. A small status dot can be hung off the bottom-right with its own 2px border.

```html
<div class="relative">
  <img src="[avatar-url]" alt="" class="size-14 rounded-xl border-2 border-[#1A1A1A]" />
  <div class="absolute -bottom-1 -right-1 size-4 bg-[#7BB069] border-2 border-[#1A1A1A] rounded-full"></div>
</div>
```

### avatar-circle-sm

Header user mark — a coral circle with a Fraunces initial, used only once per screen at the top-right.

```html
<div class="size-12 rounded-full bg-[#E85D3A] border-2 border-[#1A1A1A] flex items-center justify-center shadow-[2px_2px_0px_#1A1A1A]">
  <span class="font-[Fraunces] text-lg font-bold text-white">[Initial]</span>
</div>
```

### progress-bar

Thin track in `{colors.muted}` with a saturated fill. The fill color encodes status (use `cat-green` for completed, `cat-yellow` for in progress, `cat-pink` for new, `{colors.primary}` for active session). For loud-surface progress, use `progress-bar-thick` with a diagonal-stripe primary fill:

```html
<!-- standard -->
<div class="flex-1 h-1.5 bg-[#E5E7EB] rounded-full overflow-hidden">
  <div class="h-full bg-[#7BB069] w-[80%]"></div>
</div>

<!-- striped on dark surface -->
<div class="flex-1 h-2 bg-[#3A3A3A] rounded-full overflow-hidden">
  <div style="background: repeating-linear-gradient(45deg, #E85D3A, #E85D3A 6px, #D4512F 6px, #D4512F 12px);" class="h-full w-[60%] rounded-full"></div>
</div>
```

The diagonal-stripe progress fill on dark surfaces is a signature flourish — use it only on `card-feature`-style loud surfaces, never on standard white cards.

### top-app-bar

Flat, bordered-bottom, lives on the cream background. Holds title + optional avatar/icon-button on the right.

```html
<header class="px-6 pt-14 pb-4 bg-[#F5F0E8] border-b-2 border-[#1A1A1A]">
  <div class="flex items-center justify-between">
    <h1 class="font-[Fraunces] text-3xl font-bold">[Title] <span class="italic font-normal">[flourish]</span></h1>
    <!-- optional trailing element -->
  </div>
</header>
```

### tab-bar

White surface, bordered-top, soft upward glow. Active item is an ink-filled rounded square with the icon in the filled variant; inactive items are transparent with the regular icon variant. Tab label sits below in `{typography.tab-label}`.

```html
<nav class="absolute bottom-0 inset-x-0 bg-white border-t-2 border-[#1A1A1A] px-6 py-3 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
  <div class="flex items-center justify-around">
    <!-- active -->
    <button class="flex flex-col items-center gap-1">
      <div class="size-11 bg-[#1A1A1A] rounded-xl flex items-center justify-center shadow-[2px_2px_0px_#1A1A1A]">
        <iconify-icon icon="ph:[icon-name]-fill" class="text-white size-6"></iconify-icon>
      </div>
      <span class="text-[10px] font-bold uppercase tracking-wider text-[#1A1A1A]">[Label]</span>
    </button>
    <!-- inactive -->
    <button class="flex flex-col items-center gap-1 group">
      <div class="size-11 flex items-center justify-center rounded-xl group-hover:bg-[#E5E7EB] transition-colors">
        <iconify-icon icon="ph:[icon-name]" class="text-[#6B7280] size-6"></iconify-icon>
      </div>
      <span class="text-[10px] font-semibold uppercase tracking-wider text-[#6B7280]">[Label]</span>
    </button>
  </div>
</nav>
```

### Composition recipes (not separate components)

- **Stat tile**: a `card-compact` with a category-colored Phosphor `-fill` icon on the left, an uppercase `{typography.label-sm}` kicker (`leading-none`), and a `{typography.headline-sm}` numeral below. Three abreast in a flex row. Don't add a separate `stat-tile` component — compose it.
- **Numbered/list step**: a 64×64 square `{rounded.xl}` colored tile (status: `cat-green` complete, `{colors.primary}` active, `{colors.muted}` locked) with a Phosphor icon, paired with a kicker + title to its right. Indent each successive step horizontally to suggest a meandering path.
- **Inline quote / example sentence**: render `{typography.body-italic}` with a 2px left border in `{colors.muted}` and 12px left padding. This replaces a quote-card.
- **Status badge** (Mastered / Learning / New): plain `{typography.label-sm}` text in the corresponding `cat-*` color, no pill chrome — the color alone carries the status.

## Iconography

**Set: Phosphor.** Use the regular variant (no suffix) for inactive states and bold/regular icons within content; use the `-fill` variant for active states (active tab, primary surface decorations, category markers in stat tiles). The `-bold` variant is used sparingly for emphasis arrows and confirmation marks.

**Phosphor naming quirk — important**: Phosphor's "regular" variant has NO suffix. Write `ph:user`, NOT `ph:user-regular` (which does not exist and renders as a missing-icon glyph). The available suffixes are `-bold`, `-fill`, `-light`, `-thin`, `-duotone` only.

Icon sizing in snippets uses Tailwind classes (`size-5`, `size-6`, `size-8`), never `width`/`height` HTML attributes. Default chrome icon size is 24px (`size-6`); FAB and large stat icons go to 32px (`size-8`); small inline icons go to 20px (`size-5`).

Icons inside category tiles take their color from the tile category (one of the `cat-*` tokens). Icons inside `card-feature` surfaces are white. Icons in inactive tab items use `{colors.on-surface-variant}`.

## Illustration & Imagery

**Note**: the only `<img>` elements in source HTML are user profile photos (e.g. randomuser.me portraits) — no decorative illustrations. The aesthetic is illustration-light by nature: it relies on bold typography, hard-shadow surfaces, dot-grid textures, and Phosphor icons rather than illustrated scenes. Treat imagery as a supporting element, not a hero. The descriptions below cover what the source DOES show (photographic avatars) and what would be aesthetically consistent if a brief introduces additional imagery.

- **Style / Technique** *(for photographic content like avatars)*: natural, warmly-lit photographic portraits with a slight golden/cream cast. Soft daylight, shallow depth of field, candid framing. NOT studio-lit, NOT heavily filtered, NOT color-graded into a single palette. *(For illustrated content, if a brief introduces it: flat 2D vector with a 2px black outline matching the chrome borders, filled with the categorical palette, no shading — illustrations should look like they were drawn by the same hand that drew the borders.)*
- **Palette**: photos retain their natural color but read as warm thanks to the cream background. Illustrations, if used, should be limited to 3–4 colors per piece drawn from `cat-coral`, `cat-blue`, `cat-green`, `cat-yellow`, `cat-pink`, with `{colors.on-surface}` for the outline.
- **Edge treatment**: photos are **always** wrapped in a 2px `{colors.border}` black border matching every other component. Illustrations would carry the same 2px black outline as a hard rule — outlines are non-negotiable in this system.
- **Shading & light**: photos retain their natural shading. Illustrations are flat — no gradients, no soft shading, no ambient occlusion. One-color fills only.
- **Composition & framing**: portrait avatars are square-cropped tight on the face, bleeding to the edges of their square frame. Decorative imagery should be centered and surrounded by generous negative space within its container.
- **Background within the illustration**: photos retain their natural background. For an illustration, prefer a transparent or solid `{colors.surface}`/`{colors.background}` background — never include scenery or an illustrated environment.
- **Container styling**: every image sits in a `{rounded.md}` (12px corner) square frame with a **2px solid `#1A1A1A` border**, no internal padding. The image fills its frame with `object-cover`. Avatars get a small status dot (`size-4 rounded-full`) hung off the bottom-right with its own 2px black border when an online state needs to be communicated.
- **CSS treatment on the `<img>` element**: `object-cover` on every image. NO `mix-blend-mode`, NO `opacity` reduction (except `opacity-70` to suggest a "muted" or "archived" row state — applied to the entire row, not the image alone), NO CSS `filter`. Quote: `class="size-14 rounded-xl border-2 border-[#1A1A1A]"`.
- **Box-shadow on the image or its frame**: **none** — image frames sit flat. The hard-shadow treatment is reserved for the *card or row* that contains the image, not the image itself. (Exception: if an image is itself a standalone surface — e.g. a profile hero — apply the standard `4px 4px 0px #1A1A1A` shadow to its frame.)
- **Aspect ratio rule**: always **1:1 square** for avatars and thumbnails. Crop to square; do not preserve source aspect. For wider editorial imagery, use 4:3 or 16:9 within the same bordered-square-corner frame.
- **Anti-references**: NOT 3D, NOT claymation, NOT photorealistic illustration, NOT painterly, NOT pastel, NOT line-art-only (must be filled), NOT outlined-in-color (outline must be `#1A1A1A`), NOT shadowed/blurred (image frames are flat).
- **Style recipe prompt** *(for any illustrated `[SUBJECT]` a brief might call for)*:

  > *Flat 2D vector illustration of [SUBJECT], drawn with a confident 2px solid black outline. Filled with 3 to 4 saturated flat colors drawn from a small palette of warm coral, vivid blue, leafy green, golden yellow, and hot pink — no gradients, no shading, no ambient occlusion. Centered composition with generous negative space. Transparent or warm cream solid background. Editorial-meets-arcade neobrutalist style. NOT 3D, NOT claymation, NOT photorealistic, NOT pastel, NOT painterly, NOT outlined in any color other than black.*

## Hierarchy & Emphasis

What gets weight, in order:
1. **Loud-surface cards** (`card-feature`) — saturated or ink fill, claim the most attention. One per screen.
2. **Fraunces 700 headings** with the italic-flourish second word — the typography itself is the loudest non-color signal.
3. **Primary-fill buttons** (coral) — single per screen for the dominant action.
4. **Saturated category color** in icons, progress fills, and accent text — codes meaning, never decorates.
5. **Standard cards and rows** — whisper-equal in importance; differentiation comes from content, not chrome.
6. **Muted text** (`{colors.on-surface-variant}`) — metadata, captions, kickers; always reads as quieter context.

## Distinctive Details

- **The italic flourish.** Every screen-title or feature-card heading splits its words: the first half is Fraunces 700 roman, the second half is Fraunces 400 *italic*. This is the signature typographic gesture and should appear at least once per screen.
- **The hard-offset shadow.** No blur, ever. Always `Npx Npx 0px #1A1A1A`. Buttons and cards collapse the offset on press (`active:translate-x-[1px] active:translate-y-[1px] active:shadow-none`) — this physical "stamp pressing into paper" feel is the system's interactivity language.
- **Dot-grid texture overlay.** Loud-surface cards (`card-feature`) often carry a small radial-gradient dot pattern in the top-right corner at 20% opacity — a printer's halftone reference that ties decorative texture to the rest of the system without using imagery.
- **Diagonal-stripe progress fill.** When progress sits on a dark feature surface, the fill becomes a 45° repeating-linear-gradient stripe in the primary color — never used on white cards, only on the loud surfaces, where it reads as a printed sticker label.

## Do's and Don'ts

### Do
- Apply 2px `#1A1A1A` borders to every card, button, input, chip, image frame, and badge — the border is non-negotiable.
- Use the hard-offset shadow (no blur) at 2px or 4px sizes; collapse it on press.
- Keep the cream `{colors.background}` for the canvas only; surfaces are white or a saturated brand/categorical color.
- Italicize the second word of headings in Fraunces regular for the signature flourish.
- Use uppercase + 0.06–0.08em letter-spacing for every label, button, and meta-caption.
- Reserve the loud feature surface (`card-feature`) for one card per screen.
- Use Phosphor's `-fill` variant for active states and the regular (no suffix) variant for inactive states.

### Don't
- Don't use blurry / soft shadows anywhere except the bottom tab-bar's upward glow.
- Don't tint the border — it's always pure ink `#1A1A1A`.
- Don't use translucent overlays, glass, or backdrop-blur — this aesthetic is opaque end-to-end.
- Don't put the cream background inside a card — use white or a saturated fill.
- Don't write Phosphor's regular variant as `ph:name-regular` — it must be the bare name `ph:name`.
- Don't use HTML `width`/`height` attributes on `<iconify-icon>` — always use `size-*` or `w-*`/`h-*` Tailwind classes.
- Don't make avatars circular — they're rounded squares (`{rounded.md}`). Circles are for status dots and the single header user mark only.
- Don't introduce gradients, soft shading, or pastel colors — the palette is saturated or ink, never washed out.
- Don't add more than one loud (saturated/ink-fill) surface per screen.