Editorial Mono DESIGN.md

---
version: 1
name: Editorial Mono Mobile
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-alt: "#FAFAFA"
  surface-muted: "#F5F5F5"
  on-surface: "#2D2D2A"
  on-surface-variant: "#78766F"
  primary: "#1A1A1A"
  on-primary: "#F9F8F4"
  accent-coral: "#E07A5F"
  accent-cream: "#F4EBD0"
  accent-sage: "#81B29A"
  accent-sky: "#6D9DC5"
  accent-butter: "#F2CC8F"
  accent-indigo: "#3D405B"
  border: "#F1F1F1"
  destructive: "#D1495B"
typography:
  display-lg:
    fontFamily: DM Sans
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.03em
  display-md:
    fontFamily: DM Sans
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  display-sm:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  label-uppercase-md:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
  label-uppercase-sm:
    fontFamily: Instrument Sans
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
  label-uppercase-xs:
    fontFamily: Instrument Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
  numeral-keypad:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.01em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  gutter: 32px
  card-padding: 20px
  section-gap: 48px
icons:
  set: solar
  default_variant: linear
  active_variant: bold
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.2xl}"
    padding: 20px
    border: none
    boxShadow: none
  card-elevated:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.2xl}"
    padding: 20px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.xl}"
    paddingX: 24px
    paddingY: 20px
    boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
    border: none
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 8px
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 24px
    border: none
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-xs}"
    paddingX: 0
    paddingY: 0
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    paddingX: 16px
    paddingY: 16px
    focusRingColor: "{colors.primary}"
    border: none
    boxShadow: none
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.xl}"
    paddingX: 16px
    paddingY: 16px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.xl}"
    paddingX: 16px
    paddingY: 16px
    border: none
    boxShadow: none
  segmented-control:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.xl}"
    padding: 4px
    border: none
    boxShadow: none
  segmented-item-active:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.lg}"
    paddingY: 8px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    border: none
  segmented-item-inactive:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-xs}"
    rounded: "{rounded.lg}"
    paddingY: 8px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    size: 8px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  avatar:
    rounded: "{rounded.3xl}"
    size: 96px
    borderColor: "{colors.surface-muted}"
    borderWidth: 4px
    boxShadow: none
  list-row:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    paddingY: 16px
    paddingX: 0
    gap: 16px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  list-row-icon-tile:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    size: 40px
    iconSize: 20px
    border: none
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    height: 8px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    height: 72px
    paddingX: 32px
    border: none
    boxShadow: none
  tab-bar-floating:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.3xl}"
    paddingX: 32px
    paddingY: 12px
    boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
    border: none
  tab-item-active:
    textColor: "{colors.on-primary}"
    iconSize: 24px
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "rgba(249,248,244,0.4)"
    iconSize: 24px
    border: none
    boxShadow: none
  tab-fab:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 24px
    border: none
    boxShadow: none
---

# Editorial Mono Mobile

## Overview

**Editorial. Minimal. Quietly confident.** This is a near-monochrome aesthetic built around a near-black ink, generous whitespace, and uppercase letter-spaced micro-labels that read like the running head of a printed magazine. Color is rationed: a warm ink-black (`{colors.primary}`) carries every primary action, while a small set of analog accent hues (coral, cream, sage, sky) appears only inside data visualizations and never on UI chrome.

The aesthetic feels like a well-bound notebook: white paper surfaces, a barely-there off-white for muted blocks, hairline dividers, and one bold floating element (the dark pill nav) anchoring every screen. Nothing shouts; the typographic discipline does all the work.

Anchor adjectives: **paper-white, ink-black, tracked-out, hairline, deliberate.**

## Colors

The palette is functionally monochrome with a curated analog accent set held strictly in reserve.

**Chrome (UI surfaces & text):**
- `{colors.background}` and `{colors.surface}` — the page is paper white.
- `{colors.surface-alt}` and `{colors.surface-muted}` — barely-tinted off-whites used for cards, input fills, and icon tiles. Choose `surface-muted` for filled chips/inputs/buttons; `surface-alt` for slightly lifted card surfaces.
- `{colors.on-surface}` — the warm near-black used for body and headings.
- `{colors.on-surface-variant}` — the warm gray used for every uppercase tracked label, metadata, and secondary text.
- `{colors.primary}` and `{colors.on-primary}` — the deepest ink-black and a warm cream-white. Used together for the floating nav and for primary CTAs.
- `{colors.border}` — a near-invisible hairline used for dividers and the occasional outlined chip.

**Accent palette (data + categorical only):**
`{colors.accent-coral}`, `{colors.accent-cream}`, `{colors.accent-sage}`, `{colors.accent-sky}`, `{colors.accent-butter}`, `{colors.accent-indigo}`. These appear *only* inside charts, progress segments, category dots, and small categorical glyphs. They MUST NOT be used as button fills, card backgrounds, or text colors. The boundary is strict: chrome is monochrome, data is colored.

**Semantic:** `{colors.destructive}` is reserved for destructive labels and the backspace glyph in entry contexts.

## Typography

Three load-bearing families, each with a clear job:

- **DM Sans (heading)** — the geometric sans used for every numeric centerpiece and bold display heading. It carries the typographic weight of the app: large amounts, screen titles, keypad digits.
- **Instrument Sans (body)** — humanist neo-grotesque used for body, list rows, and — critically — the uppercase tracked labels that are the aesthetic's most recognizable signature.
- **Playfair Display (serif)** and **JetBrains Mono (mono)** — declared in the system but used sparingly for pull-quotes and numeric data callouts respectively. Treat them as available-on-demand, not default.

**The signature move is the uppercase tracked label.** Every section header, screen title, button label, chip label, and metadata caption is rendered in Instrument Sans 700 with `letter-spacing: 0.2em` (`tracking-[0.2em]` or `tracking-widest` in Tailwind). This is non-negotiable — it is the single typographic gesture that makes the aesthetic recognizable. Sizes step from 14px (`label-uppercase-md`) down to 10px (`label-uppercase-xs`), but the tracking is constant.

**Headings** lean on DM Sans 700 with negative tracking (`-0.01em` to `-0.03em`). The contrast between the tightly-packed display numerals and the loosely-tracked uppercase labels is the visual rhythm of the entire system. `display-lg` is reserved for the singular hero numeral on entry screens.

**Body** is Instrument Sans 500 at 14px — slightly heavier than typical body weight to hold its own beside the bold display type.

## Spacing & Layout

Generous and editorial. The screen gutter is `{spacing.gutter}` (32px) — wider than typical mobile patterns — which immediately signals the editorial restraint. Vertical rhythm uses `{spacing.section-gap}` (48px) between major sections; within sections, `{spacing.lg}` (24px) and `{spacing.md}` (16px) handle most breathing room.

Cards use `{spacing.card-padding}` (20px) internally. Lists prefer hairline dividers over surface separation, with each row claiming `{spacing.md}` of vertical padding.

The page is anchored at the bottom by a fixed floating pill nav inset 24px from the bottom edge; main content is always padded 128px (`pb-32`) at the bottom to clear it.

## Elevation & Depth

Elevation is almost entirely absent. The system relies on three depth strategies, in order of frequency:

1. **Flat tonal layering** — `surface-muted` against `background` is the default way to separate content. Cards, chips, inputs, and icon tiles all use this single tonal step. No shadow.
2. **Hairline borders** — `{colors.border}` at 1px is used for list dividers (often at 40% alpha for a whisper) and for the occasional outlined surface.
3. **Reserved heavy shadow** — only TWO components in the entire system carry a real shadow: the floating tab bar (`shadow-2xl`) and the primary CTA button (`shadow-xl`). Both are dark-ink elements, and the shadow lifts them dramatically off the white page. Never apply this elevation to cards or other neutral surfaces.

## Shapes

Radii follow a wide scale because radius is the second-most-load-bearing visual token after typography:

- `{rounded.sm}` (8px) – inline progress bars and small marks
- `{rounded.md}` (12px) – tiny inset elements
- `{rounded.lg}` (16px) – icon tiles inside list rows, segmented control items
- `{rounded.xl}` (24px) – cards, chips, inputs, primary CTA, category buttons. **The default container radius.**
- `{rounded.2xl}` (32px) – larger feature cards and breakdown rows
- `{rounded.3xl}` (40px) – the floating tab bar and the avatar (a squircle-feeling rounded square)
- `{rounded.full}` – circular icon buttons, category dots, pill-shaped secondary buttons, progress bar tracks

Tonal recipe — soft secondary action: render `button-primary` with `bg-{surface-muted}` and `text-{on-surface}` for a low-attention version of any CTA.

## Components

### card

Tonal-fill card on the muted off-white. No border, no shadow.

```html
<div class="bg-[#F5F5F5] rounded-[32px] p-5">
  <div class="flex justify-between items-center mb-4">
    <div class="flex items-center gap-3">
      <div class="w-2 h-2 rounded-full bg-[#1A1A1A]"></div>
      <span class="text-sm font-semibold text-[#2D2D2A]">[Category label]</span>
    </div>
    <span class="text-sm font-bold text-[#2D2D2A]">[Value]</span>
  </div>
  <div class="w-full bg-[#F5F5F5] h-2 rounded-full overflow-hidden">
    <div class="bg-[#1A1A1A] h-full w-[50%]"></div>
  </div>
</div>
```

### card-elevated

Lifted variant with a hairline border and the faintest shadow. Use sparingly when a single card in a stack needs to assert primacy.

```html
<div class="bg-[#FAFAFA] rounded-[32px] p-5 border border-[#F1F1F1] shadow-sm">
  <p class="font-semibold text-sm text-[#2D2D2A]">[Card content]</p>
</div>
```

### button-primary

The signature CTA: ink-black pill-rounded rectangle, generous vertical padding, uppercase tracked-out label, dramatic drop shadow lifting it off the page.

```html
<button class="w-full py-5 bg-[#1A1A1A] text-[#F9F8F4] rounded-3xl font-bold uppercase tracking-widest text-sm shadow-xl hover:opacity-90 transition-opacity">
  [Primary Action]
</button>
```

### button-secondary

A muted pill — paper-toned fill, uppercase tracked-out label, no shadow. The quiet alternative to the primary.

```html
<button class="px-6 py-2 bg-[#F5F5F5] text-[#2D2D2A] text-xs font-bold rounded-full uppercase tracking-wider hover:bg-[#F5F5F5]/80 transition-colors">
  [Secondary Action]
</button>
```

### button-icon

The ubiquitous circular chrome button — appears in the top app bar and as inline tap-targets. Always 40×40, muted fill.

```html
<button class="w-10 h-10 rounded-full bg-[#F5F5F5] flex items-center justify-center text-[#2D2D2A] hover:bg-[#F5F5F5]/80 transition-colors">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
</button>
```

### input-text

Fully filled rounded input on the muted off-white. No border by default; on focus, a 2px ring of the foreground ink.

```html
<div class="relative">
  <iconify-icon icon="solar:[icon-name]-linear" class="absolute left-4 top-1/2 -translate-y-1/2 text-[#78766F] size-5"></iconify-icon>
  <input
    type="text"
    class="w-full bg-[#F5F5F5] border-none rounded-2xl py-4 pl-12 pr-4 text-sm font-medium focus:ring-2 focus:ring-[#1A1A1A] transition-all"
    placeholder="[Placeholder text]"
  />
</div>
```

### chip / chip-active

Square-cornered category tiles using the same `rounded.xl` (24px). Active is solid ink-black; inactive is muted off-white. The chip composes vertically — icon stacked above an uppercase tracked label.

```html
<button class="flex flex-col items-center gap-2 min-w-[80px] p-4 rounded-2xl bg-[#F5F5F5] text-[#2D2D2A] hover:bg-[#F5F5F5]/70">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  <span class="text-[10px] font-bold uppercase tracking-widest">[Label]</span>
</button>
<button class="flex flex-col items-center gap-2 min-w-[80px] p-4 rounded-2xl bg-[#1A1A1A] text-white">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  <span class="text-[10px] font-bold uppercase tracking-widest">[Label]</span>
</button>
```

### segmented-control

A tonal pill containing equal-width segments. Active segment lifts with a white fill + faint shadow on the muted track.

```html
<div class="flex p-1 bg-[#F5F5F5] rounded-2xl">
  <button class="flex-1 py-2 text-[10px] font-bold uppercase tracking-widest bg-white rounded-xl shadow-sm">[Active]</button>
  <button class="flex-1 py-2 text-[10px] font-bold uppercase tracking-widest text-[#78766F]">[Inactive]</button>
  <button class="flex-1 py-2 text-[10px] font-bold uppercase tracking-widest text-[#78766F]">[Inactive]</button>
</div>
```

### badge-circle

Solid filled dot. Used as a category indicator beside list rows; size scales from 8px (track marker) to 12px (legend dot).

```html
<div class="w-2 h-2 rounded-full bg-[#1A1A1A]"></div>
```

### avatar

A square-rounded portrait — `rounded-[40px]` on a 96×96 image with a 4px ring of the muted off-white surrounding it. The squircle-feeling shape is a deliberate softening against the otherwise sharp-cornered photographic content.

```html
<div class="relative">
  <img alt="[Name]" src="[avatar-url]" class="w-24 h-24 rounded-[2.5rem] object-cover ring-4 ring-[#F5F5F5]" />
  <button class="absolute bottom-0 right-0 w-8 h-8 bg-[#1A1A1A] text-white rounded-full flex items-center justify-center border-4 border-white">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-4"></iconify-icon>
  </button>
</div>
```

### list-row

Hairline-divided row, no card surface. A small `rounded-lg` icon tile sits left, label center, chevron right. Trailing value text uses `body-sm` muted.

```html
<button class="w-full py-4 flex items-center justify-between group border-b border-[#F1F1F1]/40">
  <div class="flex items-center gap-4">
    <div class="w-10 h-10 rounded-2xl bg-[#F5F5F5] flex items-center justify-center text-[#2D2D2A] group-hover:bg-[#F4EBD0] transition-colors">
      <iconify-icon icon="solar:[icon-name]-linear" class="size-5"></iconify-icon>
    </div>
    <span class="font-semibold text-sm text-[#2D2D2A]">[Row label]</span>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-xs text-[#78766F]">[Value]</span>
    <iconify-icon icon="solar:alt-arrow-right-linear" class="text-[#78766F] size-5"></iconify-icon>
  </div>
</button>
```

### progress-bar

8px tall, fully rounded, muted track with a solid foreground fill. Categorical progress uses the accent palette.

```html
<div class="w-full bg-[#F5F5F5] h-2 rounded-full overflow-hidden">
  <div class="bg-[#1A1A1A] h-full w-[50%]"></div>
</div>
```

### top-app-bar

A flat, transparent header — no fill, no border, no shadow. Two button-icons flank a small uppercase tracked title in the muted gray. May use a subtle `backdrop-blur` when sticky.

```html
<header class="p-8 pb-4 flex justify-between items-center bg-white/80 backdrop-blur-md sticky top-0 z-30">
  <button class="w-10 h-10 rounded-full bg-[#F5F5F5] flex items-center justify-center text-[#2D2D2A]">
    <iconify-icon icon="hugeicons:arrow-left-01" class="size-6"></iconify-icon>
  </button>
  <h1 class="text-sm font-bold uppercase tracking-[0.2em] text-[#78766F]">[Screen Title]</h1>
  <button class="w-10 h-10 rounded-full bg-[#F5F5F5] flex items-center justify-center text-[#2D2D2A]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-5"></iconify-icon>
  </button>
</header>
```

### tab-bar-floating (signature)

The single most recognizable component. A floating ink-black pill anchored 24px from the bottom, 90% width, max 340px, with a dramatic drop shadow lifting it off the page. Inactive icons render at 40% opacity of the cream foreground; the active icon is full opacity in the bold variant. A circular cream-on-ink FAB sits in the center slot.

```html
<nav class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-[340px] bg-[#1A1A1A] text-[#F9F8F4] rounded-[2.5rem] px-8 py-3 flex justify-between items-center z-40 shadow-2xl">
  <a href="#" class="p-2 text-[#F9F8F4]/40 hover:text-[#F9F8F4]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  </a>
  <a href="#" class="p-2 text-[#F9F8F4]/40 hover:text-[#F9F8F4]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  </a>
  <button class="w-10 h-10 bg-[#F9F8F4] text-[#1A1A1A] rounded-full flex items-center justify-center hover:scale-105 transition-transform">
    <iconify-icon icon="solar:add-circle-bold" class="size-6"></iconify-icon>
  </button>
  <a href="#" class="p-2 text-[#F9F8F4]/40 hover:text-[#F9F8F4]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
  </a>
  <a href="#" class="p-2 text-[#F9F8F4]">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  </a>
</nav>
```

### Composition recipes (not separate components)

- **Centerpiece numeral block.** A vertically centered display with three rows: an uppercase tracked-out label (`label-uppercase-xs` in `on-surface-variant`), a baseline-aligned currency-glyph + numeral pair (the glyph in `display-sm` muted, the numeral in `display-lg` ink), centered with `space-y-4`.
- **Numeric keypad.** A 3-column grid of 64px-tall buttons. Each button uses `numeral-keypad` typography centered, `rounded-2xl`, transparent fill, hover-fills with `surface-muted`. The backspace key uses `destructive` for the icon color.
- **Section header.** Always rendered as `label-uppercase-sm` in `on-surface-variant`, top-aligned to its section, with a hairline-divided list directly below.
- **Donut chart.** Built as stacked `border-[20px]` circles in distinct accent colors with selectively transparent border sides to simulate arcs. Center caption stacks an uppercase tracked label above a bold `display-sm` value.

## Iconography

**Set:** Iconify `solar`. Use `solar:[name]-linear` for default chrome and `solar:[name]-bold` for the active state of toggle-able items (selected tab, primary actions, the central FAB which is always bold). The `hugeicons` set appears for the back chevron specifically — `hugeicons:arrow-left-01` — and may continue to be used for navigation chevrons if a more architectural feel is wanted.

**Sizing rule:** all icons are sized via Tailwind classes, never HTML width/height attributes. Default chrome icons are `size-6` (24px); icons inside list-row tiles or input prefixes are `size-5` (20px); micro-icons inside avatar overlays are `size-4` (16px).

**Variant switching:** inactive nav icons stay `linear` at 40% foreground opacity; the active nav icon switches to `bold` at full opacity. Do not introduce duotone or outline variants — only `linear` and `bold`.

## Illustration & Imagery

**Note**: only one source image present in the HTML — a portrait photograph used as an avatar. The rest of this section is *inferred* from the aesthetic's type, color, and shape language. Treat as a starting point.

- **Style / Technique**: photographic, with a natural editorial color grade — warm, slightly desaturated, soft daylight. No filters that read as "social." If illustration is needed instead, the aesthetic would tolerate flat 2D vector with chunky geometric shapes drawn from the accent palette and ink outlines, but photography is the safer default.
- **Palette**: photographs render with their natural palette but should feel compatible with `{colors.accent-coral}`, `{colors.accent-cream}`, `{colors.accent-sage}`, and `{colors.accent-sky}` — warm earth tones, soft blues, no neon. Illustrations would be limited to 3–4 colors drawn from the accent set.
- **Edge treatment**: photographic — no outlines. If illustrated, ink-black 1.5–2px outlines drawn from `{colors.on-surface}`, clean vector edges, no dry-brush.
- **Shading & light**: photographs prefer soft natural daylight, single key. Illustrations would be flat with at most one tonal step.
- **Composition & framing**: portrait subjects centered and tightly cropped; ample negative space around. Subject sits well inside the frame, never bleeds.
- **Background within the illustration**: photographs may carry their natural background but should be neutral / softly out of focus. Flat illustrations on transparent or `{colors.surface-muted}`.
- **Container styling** (read from HTML): images are framed in a `rounded-[40px]` (`rounded.3xl`) squircle-feeling square, wrapped in a 4px `ring-4` of `{colors.surface-muted}`. Padding inside the container is zero — image fills frame edge to edge. The frame sits on the page background with no card behind it.
- **CSS treatment on the `<img>`**: `object-cover` is the source convention. No `mix-blend-mode`, no `opacity` reduction, no CSS filter. Images render at full fidelity.
- **Box-shadow**: none on the image or its frame. The 4px ring is the only treatment lifting it from the page.
- **Aspect ratio rule**: square (1:1). Crop rather than letterbox. Avatars are 96×96; hero photographs would scale up but stay square.
- **Anti-references**: NOT 3D, NOT claymation, NOT illustrated cartoon, NOT heavily filtered, NOT high-contrast monochrome, NOT collage, NOT pastel airbrush, NOT photoreal hyperrealism.
- **Style recipe prompt**:

> *Editorial photograph of [SUBJECT], soft natural daylight, warm slightly-desaturated color grade with earth tones (muted coral, warm cream, soft sage, dusty sky-blue compatible), centered composition with generous negative space, tight crop, neutral or softly out-of-focus background, no filters, no heavy contrast, square 1:1 framing. Magazine-editorial restraint. NOT 3D, NOT illustrated, NOT photoreal-hyperreal, NOT high-contrast.*

## Hierarchy & Emphasis

What gets weight in this aesthetic:

1. **Size for headings, tracking for labels.** Display numerals are big and tight. Labels are tiny and tracked-out. Both command attention but in opposite directions — this contrast IS the hierarchy.
2. **Ink for primary, muted-fill for secondary.** A primary action is the only ink-black surface on a screen besides the floating nav. If everything is ink, nothing is.
3. **Color is reserved for data, never decoration.** A coral fill always means "this category"; it never means "look here."
4. **Hairlines whisper.** Dividers separate without separating. Use them in lieu of card backgrounds whenever a list is structurally simple.

## Distinctive Details

1. **The 0.2em tracked-out micro-label** — every section title, screen title, and small label uses `tracking-[0.2em]` Instrument Sans Bold. This is the signature.
2. **The floating ink-pill nav with a cream FAB inside it** — a single dramatic dark element anchoring an otherwise paper-white interface.
3. **The 40px squircle-feeling avatar** — a rounded-square portrait with a thick muted ring, doubling as a subtle softening gesture in an otherwise rectilinear system.
4. **The two-shadow rule** — only the primary CTA and the floating nav carry real shadows. Everywhere else is flat. The shadows are diegetic to ink-on-paper: dark things cast shadows, paper does not.

## Do's and Don'ts

### Do
- Use `tracking-[0.2em]` uppercase for every label, section header, and metadata caption.
- Reserve ink-black (`{colors.primary}`) for the primary CTA and the floating nav.
- Use `{colors.surface-muted}` as the default fill for inputs, chips, icon tiles, and secondary buttons.
- Keep the screen gutter at 32px — wide gutters are part of the aesthetic.
- Use `solar:linear` for default and `solar:bold` for active states only.
- Sit photographs inside `rounded-[40px]` frames with a 4px `ring-4` of the muted surface.
- Use hairline borders or hairline dividers in preference to card surfaces for simple lists.

### Don't
- Don't use the accent colors (coral, sage, sky, cream) as button backgrounds or text colors. They live in data only.
- Don't add shadows to cards, inputs, or chips — only the primary CTA and floating nav are shadowed.
- Don't drop the letter-spacing on uppercase labels. Tight uppercase looks generic; tracked uppercase is the identity.
- Don't introduce gradients. The aesthetic is flat fills.
- Don't replace the floating dark nav with a flat surface-attached tab bar — the floating contrast is load-bearing.
- Don't mix `solar:bold-duotone` or `solar:outline` variants — stay strictly `linear` / `bold`.
- Don't use heading typography (DM Sans) for body text or labels — that's Instrument Sans's job.
- Don't tighten the gutter below 24px; the editorial feel requires breathing room.