Heritage Fairway DESIGN.md

---
version: 1
name: Heritage Fairway Mobile
colors:
  primary: "#3A7D44"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-alt: "#FDFCF8"
  surface-muted: "#F2EEE6"
  on-surface: "#1A331C"
  on-surface-variant: "#5C6B5E"
  border: "#E6E0D4"
  secondary: "#E8DDCB"
  on-secondary: "#2F4F34"
  accent: "#DCB878"
  on-accent: "#1A331C"
  error: "#CF4444"
  chart-1: "#3A7D44"
  chart-2: "#DCB878"
  chart-3: "#8C9E8D"
  chart-4: "#C25E00"
  chart-5: "#5C7CFA"
typography:
  display-md:
    fontFamily: Libre Baskerville
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Libre Baskerville
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.005em
  headline-md:
    fontFamily: Libre Baskerville
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0em
  numeral-md:
    fontFamily: Libre Baskerville
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.08em
  caption:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0em
rounded:
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 16px
  section-gap: 32px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
    boxShadow: "0 1px 2px rgba(26,51,28,0.04)"
  card-grouped:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.2xl}"
    padding: 0px
    boxShadow: "0 1px 2px rgba(26,51,28,0.04)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.lg}"
    paddingX: 24px
    paddingY: 16px
    boxShadow: "0 8px 16px -4px rgba(58,125,68,0.20)"
    border: none
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    boxShadow: none
  button-text:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    paddingX: 0px
    paddingY: 0px
    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
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    focusRingColor: "{colors.primary}"
    border: none
    boxShadow: none
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    rounded: "{rounded.lg}"
    paddingX: 12px
    paddingY: 12px
    boxShadow: none
  chip-active:
    backgroundColor: "rgba(58,125,68,0.05)"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    rounded: "{rounded.lg}"
    paddingX: 12px
    paddingY: 12px
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    size: 20px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.full}"
    size: 112px
    borderColor: "{colors.surface-alt}"
    borderWidth: 4px
    boxShadow: "0 12px 24px -8px rgba(26,51,28,0.18)"
  list-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    paddingX: 20px
    paddingY: 16px
    gap: 16px
    border: none
    boxShadow: none
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 8px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    height: 96px
    paddingX: 24px
    boxShadow: none
  tab-bar:
    backgroundColor: "rgba(255,255,255,0.95)"
    borderColor: "{colors.border}"
    borderWidth: 1px
    height: 64px
    paddingX: 16px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase}"
    iconSize: 24px
    gap: 4px
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.caption}"
    iconSize: 24px
    gap: 4px
    border: none
    boxShadow: none
---

# Heritage Fairway Mobile

## Overview

**Heritage Fairway Mobile** is a calm, country-club-meets-modern-app aesthetic. The mood is **considered, traditional, slightly aspirational** — equal parts editorial gravitas and friendly utility. It feels like a well-bound paper journal that happens to be a phone screen: cream paper background, deep forest-green ink, restrained gold accents, and a tall serif heading face that signals "lineage" and "authority" without being stuffy.

The system pairs a **classic transitional serif** (Libre Baskerville) for every heading and numeric stat with a **neutral geometric sans** (Inter) for body and UI labels. That serif/sans pairing is the load-bearing aesthetic decision — borrow it carelessly and the whole feel collapses. Density is balanced (not airy, not cramped); whitespace is generous around section headers, and inside cards the rhythm is tight enough to feel substantial.

Surfaces are nearly flat. Cards rest on a warm cream page on a hairline border with the lightest possible shadow. Color is reserved: the forest-green primary appears for active state, brand identity, and progress fills; the gold accent is rare and ceremonial; everything else is paper, ink, and stone.

## Colors

The palette is split into three tiers with strict boundaries:

**Chrome / surface palette** — `{colors.surface-alt}` is the warm cream page; `{colors.surface}` is the cleaner white used for cards and the top app bar; `{colors.surface-muted}` is the inset fill used for inputs, icon-button backgrounds, and progress-bar troughs. `{colors.border}` is a warm taupe hairline that separates surfaces. Text uses `{colors.on-surface}` (deep forest-ink, near-black with green undertone) and `{colors.on-surface-variant}` (sage-stone) for secondary copy.

**Brand palette** — `{colors.primary}` (deep forest green) is reserved for: active tab, primary CTAs, key data emphasis (the most recent / most important number), checked checkbox fills, and the active-selection border on cards/chips. Use it sparingly; saturation is what makes it feel premium.

**Accent palette** — `{colors.accent}` (warm gold) and `{colors.secondary}` (champagne cream) are ceremonial: PRO badges, info callout backgrounds, secondary stat dots. Never use these as a primary CTA color.

**Categorical palette** — `chart-1` through `chart-5` are reserved for data viz only (bars, sparklines, category dots). They MUST NOT bleed into chrome roles. `chart-1` happens to equal `{colors.primary}` so the chart's "headline series" reads coherent with the brand.

`{colors.error}` is a muted brick-red — used only for destructive actions and negative deltas in stats; never as a decorative tint.

For low-attention secondary surfaces, render a tinted card with `bg-primary/5` background and a `text-primary` icon — the 5%-alpha primary wash is the canonical "soft brand" treatment seen on locker tiles and selected option cards.

## Typography

Two families, tight role assignment:

- **Libre Baskerville (serif, weight 400 & 700)** owns every heading (`{typography.display-md}`, `{typography.headline-lg}`, `{typography.headline-md}`) and every prominent **numeric stat** (`{typography.numeral-md}`). Numerals in serif at 400 weight are a signature move — a stat reads as a *figure in a journal* rather than a UI metric. Tracking is slightly tightened on display sizes (`-0.01em`) to keep the serif from feeling sprawling on a phone.
- **Inter (sans, weights 400/500/700)** owns every body, label, caption, button, and metadata role. `{typography.body-md}` at weight 500 is the workhorse for list-row labels and inline copy. `{typography.label-uppercase}` at weight 700 + `tracking-wider` (~0.08em) is the small-caps eyebrow used above sections in form-style screens — this tracked-out uppercase mini-label is a load-bearing rhythm device, paired with the serif headings to evoke editorial / printed-form layouts.

Weight rule: serif always 400 or 700, never the in-between weights — the contrast between regular numerals and bold headings is intentional. Sans defaults to 500; reserve 700 for buttons, active-tab labels, and uppercase eyebrows.

A composition recipe: **a stat tile** is rendered as `{typography.label-md}` (uppercase, muted) above a `{typography.numeral-md}` value, with an optional inline-`{typography.body-sm}` delta in `{colors.primary}` (positive) or `{colors.error}` (negative). No card needed — the typography alone carries the hierarchy.

## Spacing & Layout

Density is **balanced-leaning-considered**. Side gutters are generous at `{spacing.gutter}` (24px) on every screen. Between sections, `{spacing.section-gap}` (32px) gives editorial breathing room. Inside cards, padding is `{spacing.card-padding}` (16px) — tight enough to feel substantive, never crowded.

Vertical rhythm inside lists: rows are 56–64px tall with 16–20px horizontal padding and a hairline divider between rows. Stat grids use a 2-column layout with `{spacing.md}` gap between tiles.

## Elevation & Depth

Almost flat. Two depth tiers only:

1. **Page-on-paper** — cards sit on the page with a 1px `{colors.border}` hairline and the faintest shadow (`0 1px 2px rgba(26,51,28,0.04)`). The shadow is barely visible; the hairline does most of the separation work.
2. **Lifted action** — the primary CTA button uses a green-tinted glow (`0 8px 16px -4px rgba(58,125,68,0.20)`) to read as the page's most actionable element. The header avatar also lifts (`0 12px 24px -8px rgba(26,51,28,0.18)`) as the focal portrait.

No frosted glass except the bottom tab bar, which uses `bg-card/95` + `backdrop-blur-md` for a faint translucency over scrolled content.

## Shapes

Radii are moderate and consistent — never fully pill-shaped on rectangles, never sharp.

- `{rounded.sm}` (8px): badges, small inline tags.
- `{rounded.md}` (10px) / `{rounded.lg}` (12px): buttons, inputs, chips, individual cards.
- `{rounded.xl}` (16px): standard cards, list-tiles in the locker strip.
- `{rounded.2xl}` (20px): grouped section cards (the menu list, the form data-points list).
- `{rounded.full}`: avatar, icon buttons, progress bars, status dots, badge-circles.

Rule of thumb: the more "container-y" a shape, the larger the radius. Inline interactive elements stay at 10–12px to feel crisp.

## Components

**card** — white surface, hairline taupe border, 16px padding, gentle shadow. The default container.

**card-grouped** — multiple list-rows stacked inside one card, 20px radius, internal `divide-y divide-border` for hairlines between rows. Used for settings menus and option lists. The card itself has zero padding; rows handle their own.

**button-primary** — full-width forest-green block, white serif-bold label, 12px radius, with the signature green glow shadow. Often paired with a leading icon at 24px and 12px gap.

**button-secondary** — white card-style button, hairline border, sans medium label. For "Cancel" / alternative-option actions.

**button-text** — green text only, no chrome, used in section headers ("Edit Bag", "View All", "Export"). `{typography.label-md}` weight 700.

**button-icon** — 40px circle filled with `{colors.surface-muted}`, dark icon centered. Used for back / close / edit affordances.

**input-text** — cream-filled pill (10–12px radius), no visible border, focus ring in primary green at 2px.

**chip** vs **chip-active** — chips are option-card-shaped (rectangular, 12px radius), not pill-shaped. The active state thickens the border to 2px and tints the background `bg-primary/5`, switching the label to primary green. This rectangular "option card" chip pattern is used wherever the user picks one of a small set (time period, file format, data toggles).

**badge-pill** — small rectangular badge with 8px radius, champagne-cream fill, uppercase tracked-out label. The signature "PRO" / status badge.

**badge-circle** — solid forest-green circle with white numeral, used for counts / notifications.

**avatar** — large circular portrait (112px on the profile hero, 32–40px in inline contexts), 4px cream border that frames it against the page, plus a subtle shadow to lift it.

**list-row** — 20px horizontal / 16px vertical padding, leading icon-slot (32px square, no background by default — icon sits in muted color), 16px gap to label, optional trailing chevron in muted color. Rows are separated by `divide-y divide-border` inside their containing card.

**progress-bar** — 8px-tall pill in `{colors.surface-muted}`, fill in `{colors.primary}`. Always shown with a label/percentage above it (`{typography.body-md}` left, `{typography.label-md}` right in primary green).

**top-app-bar** — white surface, hairline bottom border, serif title, generous top padding (~48–56px to sit below the status bar). On detail screens, a 40px icon-button on each side (real or spacer) frames the centered title.

**tab-bar** — fixed bottom, 95% white with `backdrop-blur-md`, hairline top border, 64px tall + safe-area inset. Four icons evenly distributed.

**tab-item-active** vs **tab-item-inactive** — same bold-variant icon for both states; active swaps color to primary green and switches the label to `{typography.label-uppercase}`-style bold caps; inactive stays muted-foreground at regular weight.

### Composition recipes (not separate components)

- **A stat tile** (e.g. profile header stats): a `{typography.numeral-md}` value above a `{typography.label-uppercase}` caption in muted color, separated from neighboring tiles by an 8-px-tall vertical hairline rule (`w-px h-8 bg-border`). No card.
- **A chart** (bar, sparkline) lives inside a standard `card` with 24px internal padding. Bars use chart-palette colors with progressive alpha tiers (`/20`, `/40`, `/60`, `/80`, full) to convey time-series progression — the most recent / most emphasized bar is solid `{colors.primary}`.
- **A round / log entry**: card + flex row — left column is a serif title and `{typography.caption}` metadata, right column has 1–2 stat clusters each rendered as `{typography.label-md}` uppercase muted caption above a `{typography.numeral-md}` value.

### Snippets

```html
<!-- card -->
<div class="bg-white border border-[#E6E0D4] rounded-[16px] p-4 shadow-[0_1px_2px_rgba(26,51,28,0.04)]">
  <h3 class="font-['Libre_Baskerville'] text-[18px] font-bold text-[#1A331C]">[Card title]</h3>
  <p class="font-['Inter'] text-[14px] text-[#5C6B5E] mt-1">[Card body]</p>
</div>
```

```html
<!-- button-primary -->
<button class="w-full bg-[#3A7D44] text-white py-4 rounded-[12px] font-['Libre_Baskerville'] font-bold text-[18px] shadow-[0_8px_16px_-4px_rgba(58,125,68,0.20)] active:scale-[0.98] transition-all flex items-center justify-center gap-3">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [Primary action]
</button>
```

```html
<!-- button-secondary -->
<button class="bg-white border border-[#E6E0D4] text-[#1A331C] px-4 py-3 rounded-[12px] font-['Inter'] font-medium text-[14px]">
  [Secondary action]
</button>
```

```html
<!-- button-icon -->
<button class="size-10 rounded-full bg-[#F2EEE6] flex items-center justify-center text-[#1A331C] active:scale-95 transition-transform">
  <iconify-icon icon="solar:[icon-name]-linear" class="size-6"></iconify-icon>
</button>
```

```html
<!-- chip-active (option-card pattern) -->
<button class="p-3 rounded-[12px] border-2 border-[#3A7D44] bg-[#3A7D44]/5 text-[#3A7D44] text-[12px] font-['Inter'] font-bold">
  [Selected option]
</button>
<!-- chip (inactive) -->
<button class="p-3 rounded-[12px] border border-[#E6E0D4] bg-white text-[#1A331C] text-[14px] font-['Inter'] font-medium">
  [Unselected option]
</button>
```

```html
<!-- badge-pill -->
<span class="text-[10px] font-['Inter'] font-bold bg-[#DCB878]/20 text-[#DCB878] px-2 py-0.5 rounded-[8px] tracking-wider uppercase">[Status]</span>
```

```html
<!-- avatar -->
<div class="size-28 rounded-full overflow-hidden border-4 border-[#FDFCF8] shadow-[0_12px_24px_-8px_rgba(26,51,28,0.18)]">
  <img alt="[Subject]" src="[url]" class="w-full h-full object-cover" />
</div>
```

```html
<!-- list-row inside card-grouped -->
<button class="w-full px-5 py-4 flex items-center justify-between hover:bg-[#F2EEE6]/30 transition-colors">
  <div class="flex items-center gap-4">
    <div class="size-8 flex items-center justify-center">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-[#5C6B5E]"></iconify-icon>
    </div>
    <span class="text-[14px] font-['Inter'] font-medium text-[#1A331C]">[Row label]</span>
  </div>
  <iconify-icon icon="solar:arrow-right-linear" class="size-4 text-[#5C6B5E]"></iconify-icon>
</button>
```

```html
<!-- progress-bar with header -->
<div>
  <div class="flex justify-between items-center mb-2">
    <span class="text-[14px] font-['Inter'] font-medium text-[#1A331C]">[Metric label]</span>
    <span class="text-[14px] font-['Inter'] font-bold text-[#3A7D44]">[Value]%</span>
  </div>
  <div class="w-full bg-[#F2EEE6] rounded-full h-2">
    <div class="bg-[#3A7D44] h-full rounded-full" style="width: [N]%"></div>
  </div>
</div>
```

```html
<!-- tab-bar -->
<nav class="fixed bottom-0 w-full bg-white/95 backdrop-blur-md border-t border-[#E6E0D4] pb-safe pt-2">
  <div class="flex justify-around items-center px-4 h-16">
    <a href="#" class="flex flex-col items-center gap-1 text-[#3A7D44]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="text-[10px] font-['Inter'] font-bold tracking-wider">[Active]</span>
    </a>
    <a href="#" class="flex flex-col items-center gap-1 text-[#5C6B5E]">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      <span class="text-[10px] font-['Inter'] font-medium">[Inactive]</span>
    </a>
  </div>
</nav>
```

## Iconography

Icon set is **Solar** (Iconify), `bold` variant by default. Solar's bold variant has soft, rounded silhouettes that pair with the rounded radii and the friendly serif. Active/inactive tab states use the **same bold variant** and convey state via color, not variant swap. The exception is navigation chevrons and back arrows, which use the `linear` variant — directional indicators feel more refined as line icons.

Stroke / fill characteristics: bold solar icons are filled silhouettes with internal cutouts; their visual weight matches the bold serif headings. Default size 24px; 16–20px inline alongside body copy; 32px in option-card centers (file-format pickers, etc.).

## Illustration & Imagery

**Note**: only one image is referenced in the source HTMLs — a circular user portrait (`randomuser.me`) inside the avatar component. There are no illustrations. This section is therefore **largely inferred** from the aesthetic's type, color, and shape language. The portrait-treatment rules below are extracted; everything else is starting-point guidance, not ground truth.

**Style / Technique**: imagery in this aesthetic is **photographic**, not illustrative. Photos read as documentary / lifestyle / editorial — natural lighting, real grain, no heavy color grade. If illustration is ever needed, it would fit as **soft 2D vector with subtle gradient shading and a heritage-poster sensibility** (think mid-century travel poster crossed with editorial spot illustration) — limited palette pulled from the chart tokens, no outlines, gentle dimensional shading, never 3D and never cartoony.

**Palette**: photos retain their natural color but should harmonize with the cream/forest/gold system — favor images with warm light, greenery, and natural earth tones; avoid neon saturation or cool blue casts. Illustrations (if used) would draw 3–5 colors from `{colors.chart-1}`, `{colors.chart-2}`, `{colors.chart-3}`, `{colors.accent}`, and `{colors.secondary}`.

**Edge treatment**: photos crop with clean circular or rounded-rectangle masks, no outlines. Inferred illustrations: no outlines.

**Shading & light**: photos sit unfiltered. Inferred illustrations: soft directional light, single light source, gentle gradients — never hard cel-shading, never flat-flat.

**Composition & framing**: portraits are tightly cropped to head/shoulders, subject centered, eyes on the upper third. Hero contexts (large avatar 112px) use the subject as the focal element of the screen.

**Background within the image**: photos retain their natural background but should be visually quiet (out-of-focus environment is ideal). Inferred illustrations: solid page-cream background or transparent.

**Container styling** (extracted from HTML):
- Avatar frame: `rounded-full`, 4px solid border in `{colors.surface-alt}` (the cream page color — so the border looks like a printed mat surrounding the photo).
- Inline thumbnails would use `{rounded.xl}` (16px) frames with a 1px `{colors.border}` hairline matching cards.
- Background of the container: cream page or white card, never the photo bleeding edge-to-edge.

**CSS treatment on `<img>`** (extracted): `object-cover`, `w-full h-full`. No `mix-blend-mode`, no opacity reduction, no filter — photos sit at full fidelity.

**Box-shadow on the image / frame** (extracted for hero avatar): `0 12px 24px -8px rgba(26,51,28,0.18)` — a soft, slightly green-tinted lift that makes the portrait feel like a framed photograph on the page. Inline thumbnails would carry no shadow, just the hairline.

**Aspect ratio rule**: portraits are square (cropped circular). Other photo slots default to 4:5 portrait or 16:10 landscape; preserve subject-relevant aspect, never force-stretch.

**Anti-references**: NOT 3D-rendered, NOT claymation, NOT photoreal-with-heavy-grade, NOT pastel airbrush, NOT cartoon mascot, NOT line-art-only, NOT neon, NOT moody-dark.

**Style recipe prompt** (for any illustration need that arises):

> *Soft 2D vector illustration of [SUBJECT] in a heritage-editorial style. Limited 4-color palette of deep forest green, warm gold, sage, and champagne cream on a cream paper background. No outlines. Gentle directional shading with a single soft light source — subtle gradients suggest dimension without becoming volumetric. Composition is centered with generous negative space, subject occupies the middle 60% of the canvas. Mid-century-poster sensibility, considered and quiet, never cartoony or 3D. Texture is clean digital vector, not painterly. NOT 3D, NOT photoreal, NOT pastel, NOT outlined, NOT cartoon mascot.*

## Hierarchy & Emphasis

What gets visual weight, in order:

1. **Serif numerals** are the loudest element on any data screen — a stat in `{typography.numeral-md}` outranks a sans label of equivalent size by feel.
2. **Forest-green saturation** signals "this is the important / active / latest one." Reserve it.
3. **Bold uppercase tracked labels** anchor section starts and section eyebrows; they whisper compared to serif headings but command rhythmically.
4. **Body copy** in muted sage-stone whispers. Captions whisper further.

Rule: titles always carry the most weight; saturated color is reserved for active states and the single most important figure on the screen; metadata always whispers.

## Distinctive Details

1. **Serif numerals on stats.** Showing a number in Libre Baskerville 400 — not a heavier sans — is the single most identifying move. Every data point feels like a figure printed in a journal.
2. **Hairline rules between stat tiles.** The `w-px h-8 bg-border` vertical hairline separating stat tiles in the profile header is borrowed from print typography — it replaces the temptation to put each stat in its own card.
3. **Tracked-out uppercase eyebrows above sections in form contexts.** `{typography.label-uppercase}` in muted color sits above grids of option-cards like a printed-form caption ("TIME PERIOD", "FILE FORMAT") — directly invoking paper questionnaires.
4. **Cream-paper avatar mat.** The 4px border on the hero avatar in the page-cream color makes the portrait feel like a photo mounted on cardstock, reinforcing the journal/album metaphor.

## Do's and Don'ts

### Do

- Pair Libre Baskerville (serif) with Inter (sans) exactly. Use serif for headings AND prominent numerals.
- Use forest-green primary sparingly — for the single most active / important element per view.
- Render selectable options as rectangular `chip-active` cards with a 2px primary border and `bg-primary/5` tint.
- Use hairline `{colors.border}` separators inside grouped cards (`divide-y divide-border`) instead of inventing new dividers.
- Keep card shadows almost-invisible; let the hairline do the separation work.
- Reserve `{colors.accent}` (gold) and `{colors.secondary}` (champagne) for ceremonial badges and informational callouts.
- Apply the green glow shadow only to the page's primary CTA.

### Don't

- Don't render numerals in Inter when they're a stat — the serif numeral is the aesthetic.
- Don't use the gold accent as a primary CTA fill or as a body text color.
- Don't pill-ify rectangular buttons or chips; use 10–12px radii, not `rounded-full`, on rectangles.
- Don't introduce new shadow recipes — flat-with-hairline is the rule, with two opt-in lifts (CTA and hero avatar).
- Don't let chart-palette colors leak into chrome roles (text, borders, button fills outside of charts).
- Don't fill bottom-tab icons differently between active and inactive — keep the bold variant; switch only color and label weight.
- Don't add ad-hoc serif weights (italic, 500, 800) — stick to 400 and 700.
- Don't crowd cards: 16px internal padding minimum, 32px between major sections.