Warm Cream Editorial DESIGN.md

---
version: 1
name: Warm Cream Editorial Mobile
colors:
  primary: "#ECAE36"
  on-primary: "#292524"
  surface: "#F9F7F2"
  surface-alt: "#FFFFFF"
  surface-muted: "#EFEBE6"
  surface-accent: "#FEF3C7"
  on-surface: "#44403C"
  on-surface-variant: "#78716C"
  on-accent: "#451A03"
  border: "#E7E5E4"
  muted: "#F5F5F4"
  error: "#EF4444"
  chart-1: "#ECAE36"
  chart-2: "#F4A261"
  chart-3: "#2A9D8F"
  chart-4: "#457B9D"
  chart-5: "#E76F51"
typography:
  display-md:
    fontFamily: "DM Serif Display"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "DM Serif Display"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "DM Serif Display"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "DM Serif Display"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0em
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.55
    letterSpacing: 0em
  body-sm:
    fontFamily: "Instrument Sans"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0em
  label-md:
    fontFamily: "Instrument Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0em
  label-uppercase-md:
    fontFamily: "Instrument Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2em
  label-uppercase-sm:
    fontFamily: "Instrument Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.15em
  caption:
    fontFamily: "Instrument Sans"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 14px
  lg: 16px
  xl: 24px
  2xl: 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  gutter: 24px
  card-padding: 24px
  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}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
  card-accent:
    backgroundColor: "{colors.surface-accent}"
    textColor: "{colors.on-accent}"
    borderColor: "{colors.primary}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    paddingX: 24px
    paddingY: 16px
    border: none
    boxShadow: "0 8px 20px rgba(236,174,54,0.20)"
    gap: 8px
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    paddingX: 24px
    paddingY: 16px
    border: none
    boxShadow: none
    gap: 8px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 0px
    paddingY: 0px
    border: none
    boxShadow: none
    gap: 4px
  button-icon-circular:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    size: 48px
    rounded: "{rounded.full}"
    border: none
    boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
    iconSize: 24px
  input-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "0px"
    paddingX: 8px
    paddingY: 12px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 6px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.md}"
    paddingX: 16px
    paddingY: 8px
    border: none
    boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
  badge-pill:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    rounded: "{rounded.full}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    size: 32px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  avatar:
    size: 48px
    rounded: "{rounded.full}"
    borderColor: "{colors.surface-alt}"
    borderWidth: 2px
    boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
  list-row:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    paddingX: 0px
    paddingY: 12px
    border: none
    boxShadow: none
    gap: 12px
  progress-bar:
    backgroundColor: "{colors.muted}"
    height: 8px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  segmented-control:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.xl}"
    padding: 4px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    paddingX: "{spacing.gutter}"
    paddingY: 16px
    border: none
    boxShadow: none
    height: 80px
  tab-bar:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    paddingX: 48px
    paddingY: 16px
    height: 80px
  tab-item-active:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 28px
    gap: 4px
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    iconSize: 28px
    gap: 4px
    border: none
    boxShadow: none
---

# Warm Cream Editorial Mobile

## Overview

**Warm, literary, and quietly optimistic.** A cream-paper canvas hosts crisp white cards bordered by a hairline. Headlines are set in a high-contrast didone serif (DM Serif Display) — generous and editorial — while everything else is a clean humanist sans (Instrument Sans), often locked into ALL-CAPS with wide tracking to act as kickers, captions, and labels. The single brand color is a warm honey-amber that reads as sunlight on paper rather than as a corporate accent.

The mood lands somewhere between a hardcover memoir, a boutique wellness brand, and a stationery aesthetic. Surfaces feel calm; type does the dramatic work. There is no glossy gradient, no neon, no glassy chrome — just paper, ink, and a single warm highlight.

## Colors

The palette is built around a warm-neutral system with one signal color.

- **Page surface** uses `{colors.surface}` (`#F9F7F2`) — a soft cream paper that warms the entire screen. All chrome sits on this.
- **Cards** use `{colors.surface-alt}` (`#FFFFFF`) with a 1px `{colors.border}` hairline plus a barely-there shadow — they read as printed cards laid on cream paper.
- **`{colors.primary}` (`#ECAE36`)** is the one saturated honey-amber. Reserved for: the primary CTA fill, the active-tab icon, key data emphasis, the focus ring, and the highlight chart bar. Never use it as a card background or page surface.
- **`{colors.surface-accent}` (`#FEF3C7`)** is a very soft butter tint, used only for "highlight" cards (insight callouts) that need to stand apart from white cards. Pair with `{colors.on-accent}` (`#451A03`), a deep warm brown, for body copy inside such cards.
- **`{colors.surface-muted}` (`#EFEBE6`)** is the warm taupe used for secondary buttons, low-emphasis chips, and segmented-control rails.
- **Foreground hierarchy**: `{colors.on-surface}` (`#44403C`) — warm graphite — is the primary text color (we deliberately avoid pure black). `{colors.on-surface-variant}` (`#78716C`) is the muted/metadata stone gray.
- **Categorical chart palette** (`chart-1`..`chart-5`) ranges from amber → coral → teal → blue → terracotta. Use only inside data visualizations (bars, distribution rows, calendar cell tints at low alpha). Never as UI chrome fills.

For low-attention secondary actions, render `button-primary` with `bg-{primary}/10` background and `text-{primary}` foreground — the amber tints down nicely on cream.

## Typography

Two typefaces, sharply role-separated.

- **DM Serif Display** is the *only* heading face. It carries every `display-*`, `headline-*` token. Set at weight 400 (the only weight available), it relies on its inherent high contrast and elegant stress for drama. Used for: greeting headlines, screen titles, mood labels, card titles, insight headers. Always set with negative tracking (`-0.01em` to `-0.02em`) to tighten the wide didone counters.
- **Instrument Sans** handles everything else: body, paragraph, labels, buttons, captions. Weight 500 is the workhorse for body, 700 for labels and emphasis. It never sets headings.

**The signature typographic move is wide-tracked uppercase labels.** `{typography.label-uppercase-md}` and `{typography.label-uppercase-sm}` (letter-spacing `0.2em` and `0.15em` respectively) are everywhere — kickers above headlines, calendar day initials, weekday axis labels, tab-bar captions, badge labels, "EDIT" CTAs. They function as small caps replacements and create a quiet typographic rhythm that pairs with the serif's elegance.

Body copy stays at `body-md` (14px / 500) for paragraphs and at `body-sm` for compressed contexts. Avoid stacking serif headlines within a paragraph — let one serif phrase anchor a card, then sans takes over.

## Spacing & Layout

Generous and breathing. Page gutter is `{spacing.gutter}` (24px). Cards pad inward another 24px (`{spacing.card-padding}`), so content inside a card sits ~48px from the screen edge. Sections separate with `{spacing.section-gap}` (32px) of vertical air.

The vertical rhythm is unhurried — short headlines, short paragraphs, lots of negative space below each section. Avoid dense list-stack layouts; this aesthetic falls apart when crammed. Two-column splits are rare; the dominant pattern is single-column cards stacked.

## Elevation & Depth

Depth is mostly *tonal*, not shadowed. The hierarchy goes:

1. **Page** — cream `{colors.surface}`.
2. **Cards** — white `{colors.surface-alt}` with 1px `{colors.border}` hairline and a whisper shadow `0 1px 2px rgba(0,0,0,0.04)`. The hairline does most of the separation work.
3. **Floating chrome** (icon buttons, the primary CTA, active segmented-control pill) — slightly stronger shadow `0 1px 2px rgba(0,0,0,0.05)` to lift them from the surface they sit on.
4. **Accent cards** — `{colors.surface-accent}` butter tint with a `{colors.primary}/5` border, no shadow.

Never reach for heavy drop shadows, glass blurs, or gradient elevation. The aesthetic depends on flat, paper-like surfaces.

## Shapes

Radii are generous and consistently soft. Cards use `{rounded.2xl}` (32px) — large, almost pillow-like. Buttons and segmented controls use `{rounded.xl}` (24px). Inner pills (chips, badges, calendar cells, the round nav buttons) use `{rounded.full}`. Small chips and the active segmented pill use `{rounded.md}` (14px).

A defining shape rule: **circular elements anchor moments of warmth.** The mood orb behind the hero emoji, the avatar, the round icon buttons, the calendar dots, the active-state circle in the mood selector — circles signal human, soft, organic. Rectangles are reserved for cards and bars.

## Components

### card

Tokens: see frontmatter `{components.card}`.

```html
<section class="bg-white rounded-[32px] p-6 border border-[#E7E5E4] shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-xs font-bold tracking-[0.2em] text-[#78716C] uppercase">[Section kicker]</h3>
    <button class="text-xs font-medium text-[#ECAE36]">[Action]</button>
  </div>
  <p class="text-[14px] font-medium text-[#44403C] leading-relaxed">[Body copy]</p>
</section>
```

### card-accent

For insight / highlight callouts that need to stand apart from the white-card stack.

```html
<div class="bg-[#FEF3C7]/40 rounded-[32px] p-6 border border-[#ECAE36]/10">
  <div class="flex items-center gap-3 mb-3">
    <div class="size-10 bg-[#ECAE36]/20 rounded-2xl flex items-center justify-center text-[#ECAE36]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-5"></iconify-icon>
    </div>
    <h4 class="font-['DM_Serif_Display'] text-lg text-[#451A03]">[Insight title]</h4>
  </div>
  <p class="text-[#451A03]/80 text-sm leading-relaxed">[Insight body with <span class="text-[#ECAE36] font-bold">[emphasized data]</span> woven in.]</p>
</div>
```

### button-primary

```html
<button class="py-4 px-6 bg-[#ECAE36] text-[#292524] rounded-2xl font-bold tracking-wide shadow-[0_8px_20px_rgba(236,174,54,0.20)] flex items-center justify-center gap-2 active:scale-95 transition-transform">
  <span>[Action]</span>
  <iconify-icon icon="solar:check-circle-bold" class="size-5"></iconify-icon>
</button>
```

### button-secondary

```html
<button class="py-4 px-6 bg-[#EFEBE6] text-[#57534E] rounded-2xl font-medium tracking-wide active:scale-95 transition-transform">
  [Action]
</button>
```

### button-icon-circular

The signature back/close button — a white pill on cream paper.

```html
<button class="flex items-center justify-center size-12 bg-white rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.05)] text-[#44403C] active:scale-95 transition-transform">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
</button>
```

### input-text

Inputs are intentionally minimal — bottom-rule only, no fill. They feel like writing on paper.

```html
<input
  type="text"
  class="w-full bg-transparent border-b border-[#E7E5E4] py-3 px-2 text-center text-[#44403C] placeholder:text-[#78716C]/50 focus:outline-none focus:border-[#ECAE36] transition-colors font-medium"
  placeholder="[Placeholder]"
/>
```

### chip / chip-active

```html
<span class="text-[10px] font-bold tracking-widest text-[#78716C] uppercase bg-[#EFEBE6] px-2 py-1 rounded-full">[Label]</span>
```

```html
<button class="flex-1 py-2 px-4 bg-white rounded-xl text-xs font-bold uppercase tracking-wider text-[#44403C] shadow-[0_1px_2px_rgba(0,0,0,0.05)]">[Active]</button>
```

### segmented-control (composition recipe)

A row of three or more `chip-active`/inactive buttons inside a `bg-[#EFEBE6]/50 p-1 rounded-2xl` rail. Active item gets a white pill with shadow; inactive items are transparent with `text-[#78716C]`.

### list-row

A list row in this aesthetic is rendered borderless with `{spacing.md}` of vertical padding and `{spacing.sm}` gap between an icon, a label, and a trailing value. Dividers are not drawn — the rhythm of card padding does the separation work.

### progress-bar

```html
<div class="h-2 w-full bg-[#F5F5F4] rounded-full overflow-hidden">
  <div class="h-full bg-[#ECAE36] w-[42%]"></div>
</div>
```

### avatar

```html
<div class="size-12 rounded-full overflow-hidden border-2 border-white shadow-[0_1px_2px_rgba(0,0,0,0.05)]">
  <img alt="[Person]" src="[url]" class="size-full object-cover" />
</div>
```

### top-app-bar (composition recipe)

A header row at `pt-12 pb-4 px-6` with three slots: left circular icon-button, center wide-tracked uppercase label (`{typography.label-uppercase-md}`), right circular icon-button. On home/feed screens, replace the slot system with a left-aligned greeting block (kicker + serif headline) and a single trailing avatar.

### tab-bar / tab-item

A bottom nav with hairline top border and translucent backdrop blur. Active item uses the icon set's `bold` variant in `{colors.on-surface}`; inactive uses `linear` in `{colors.on-surface-variant}`. Both label with `{typography.label-uppercase-sm}`.

```html
<nav class="fixed bottom-0 left-0 right-0 bg-[#F9F7F2]/80 backdrop-blur-lg border-t border-[#E7E5E4] py-4 flex items-center justify-between z-30 px-12">
  <button class="flex flex-col items-center gap-1">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-7"></iconify-icon>
    <span class="text-[10px] font-bold uppercase tracking-wider">[Tab]</span>
  </button>
  <button class="flex flex-col items-center gap-1 text-[#78716C]">
    <iconify-icon icon="solar:[icon-name]-linear" class="size-7"></iconify-icon>
    <span class="text-[10px] font-bold uppercase tracking-wider">[Tab]</span>
  </button>
</nav>
```

## Iconography

The icon set is **`solar`** at Iconify. Solar's two-variant system maps cleanly to active/inactive states:

- **Inactive / default** → `solar:[name]-linear` (clean line, ~1.5px stroke).
- **Active / emphasis** → `solar:[name]-bold` (filled, soft-cornered).

Default icon size in chrome contexts is **24px**; tab-bar icons step up to **28px**; small inline icons inside chips/list rows are **20px**. Icon color follows the surrounding text color rather than introducing its own.

For emoji-style accents (mood, reaction, expressive markers in stat rows or hero areas), use the **`fluent-emoji`** Iconify set — its softly-modeled, slightly-3D faces are a deliberate aesthetic counterpoint to the otherwise flat paper surfaces and are a signature ingredient of this look. Size them at 20–144px depending on context.

## Illustration & Imagery

**Style / Technique**: Soft naturalistic photography with shallow depth-of-field. Subjects are rendered sharp against gently blurred environmental backgrounds — landscapes, dunes, neutral terrain, ambient light. The aesthetic favors warm-grade portraiture and lifestyle photography that *feels* like ambient daylight on cream paper. Two distinct image vocabularies coexist: (1) realistic photographs as user/profile imagery, and (2) plump, slightly-dimensional emoji glyphs from the `fluent-emoji` set used as expressive markers.

**Palette**: Photography is warm-graded — soft creams, sunlit tans, sage greens, dusty blues, gentle terracottas. The grade should feel adjacent to the cream `{colors.surface}` so images don't fight the page. Avoid cool/blue casts, hard shadows, neon saturation. Emoji glyphs bring their inherent saturated palette and act as bright punctuation against the muted UI.

**Edge treatment**: No outlines. Photos are presented as continuous tone. Emoji glyphs carry their own subtle outline from the source set.

**Shading & light**: Soft natural light, no hard cast shadows. Subjects sit against an out-of-focus environmental gradient. Emoji glyphs use soft cel-shaded volume — a defining warmth-bringer.

**Composition & framing**: Portrait images crop tightly to head-and-shoulders, subject centered, eyes near the upper third. Plenty of background bokeh. Square or 1:1 crops dominate (avatars, profile thumbnails). Emoji glyphs are centered in their containers with generous breathing room.

**Background within the illustration**: Photographic backgrounds are environmental and blurred — never studio-stark, never cut-out. Emoji glyphs sit on a transparent background and are placed inside soft tonal circles (`{colors.surface-accent}/40` or `{colors.primary}/10`) for a halo effect.

**Container styling**: Profile photographs are presented inside a `rounded-full` mask with a 2px white (`{colors.surface-alt}`) ring and the standard `0 1px 2px rgba(0,0,0,0.05)` whisper shadow — a printed-locket feel. Emoji glyphs sit inside `rounded-full` halo circles tinted `bg-[#FEF3C7]/40` or `bg-[#ECAE36]/10` at 32–96px depending on context. Hero emoji moments may add an outer blurred bloom (a `bg-[#FEF3C7]/60 rounded-full blur-3xl` placed beneath via `-z-10`) — the signature warm-glow treatment.

**CSS treatment on the `<img>` element**: `class="size-full object-cover"` — always cover-cropped, never letterboxed. No `mix-blend-mode`, no `opacity` change, no CSS `filter`. Photographs are presented as-is with their natural warm grade.

**Box-shadow on the image or its frame**: Whisper only — `0 1px 2px rgba(0,0,0,0.05)` on the circular frame. Emoji halos may carry a `drop-shadow-xl` Tailwind utility on hero placements but flat halos elsewhere.

**Aspect ratio rule**: 1:1 square for all profile/avatar imagery. Cover-crop preserves the subject. For wider editorial photography (cover images, hero illustrations), use 4:5 portrait inside a `rounded-[32px]` frame.

**Anti-references**: NOT studio-stark, NOT high-contrast b&w, NOT cool/blue grade, NOT illustration, NOT 3D-rendered, NOT cartoon, NOT pixel, NOT line art, NOT pastel-only, NOT collage.

**Style recipe prompt**:
> *Warm-graded natural-light photograph of [SUBJECT], shallow depth-of-field with a softly blurred environmental background (open landscape, dunes, neutral terrain, ambient daylight). Subject sharp and centered, framed at portrait crop. Color grade leans cream, honey, sage, and dusty terracotta — adjacent to a warm cream-paper UI. Soft natural shadows only. No studio backdrop, no hard rim light, no cool/blue cast, no illustration or render — pure ambient photography that reads like a candid editorial moment.*

## Hierarchy & Emphasis

Emphasis is granted, in order, by: (1) DM Serif Display headline weight in `{colors.on-surface}`, (2) the warm-amber `{colors.primary}` reserved for the most actionable element on a screen, (3) wide-tracked uppercase labels which signal *scaffolding* rather than emphasis, and (4) `{colors.on-surface-variant}` for everything that whispers. Numerical highlights inside body copy are bolded and tinted `{colors.primary}` — a literary footnote technique.

## Distinctive Details

1. **The amber bloom.** A blurred warm halo (`bg-[#FEF3C7]/60 blur-3xl`) placed behind the hero element of a screen — it's the warmth radiating from beneath. Use sparingly, once per screen at most.
2. **Serif-and-sans pairing as a structural hierarchy.** Every screen-level statement (`headline-lg`, mood label, insight title) is set in DM Serif Display; its presence marks "this is the headline." Sans is everything that supports it. Never break this rule.
3. **Wide-tracked uppercase as decorative scaffolding.** Letter-spacing `0.2em` ALL-CAPS labels are everywhere — kickers, calendar headers, weekday axis labels, tab text, "EDIT" CTAs. They are the visual equivalent of a fine pinstripe and carry the editorial mood as much as the serif does.

## Do's and Don'ts

### Do
- Set every heading in DM Serif Display, weight 400, with negative tracking.
- Use `{colors.primary}` as a single highlight per screen — CTA, active tab, or one inline data emphasis.
- Render kickers, axis labels, badges, and tab labels in wide-tracked ALL-CAPS sans.
- Keep cards white with a hairline border on a cream page — let the paper tone do the warming.
- Anchor warmth moments with circular forms (avatars, mood orbs, icon buttons, calendar dots).
- Reach for the `fluent-emoji` set when you need expressive human warmth in a data or moment context.

### Don't
- Don't use `{colors.primary}` as a card or page background — it's an accent only.
- Don't apply heavy drop shadows or glassmorphism — separation is hairline + tonal.
- Don't set body or labels in DM Serif Display — serif is exclusively for headings and named values.
- Don't introduce a third typeface or a cool/blue palette — it breaks the warm-paper mood.
- Don't outline photographs or apply a CSS filter — let the natural warm grade carry.
- Don't densely stack rows; this aesthetic depends on generous vertical breathing room.
- Don't use the chart palette as UI chrome — those colors live inside data only.
- Don't pure-black any text — `{colors.on-surface}` (`#44403C`) is the darkest foreground.