---
version: alpha
name: Monarch Money
description: A warm parchment canvas where Copernicus's refined book serif sets the editorial tone, ABC Oracle's clean geometric sans carries the numbers, and a sun-fired vermilion-orange is the single CTA punch — personal finance designed like a thoughtful magazine, not a banking dashboard.

colors:
  # Surface / canvas
  background: "#f6f5f3"          # warm off-white parchment — the dominant canvas
  surface: "#ffffff"             # pure-white raised cards and form fields
  surface-warm: "#efece9"        # deeper warm tint for alternating panels

  # Ink / text
  ink: "#22201d"                 # warm near-black — all headlines and body
  ink-secondary: "#777573"       # muted warm gray for supporting copy
  ink-muted: "#bebbb8"           # captions, metadata, placeholder text
  on-primary: "#fefcfb"          # near-white text on the orange CTA

  # Brand accent — Monarch's vermilion-orange
  primary: "#ff692d"             # vermilion-orange — primary CTA fill
  primary-hover: "#f35b16"       # deepened orange on hover / focus
  primary-gradient-start: "#e5484d" # coral-red gradient start (hero gradient left stop)
  primary-gradient-end: "#ff692d"   # vermilion end (gradient right stop)

  # Semantic (app context — positional finance indicators)
  success: "#22c55e"             # gain / positive balance /* estimated */
  error: "#ef4444"               # loss / negative balance /* estimated */
  warning: "#ffbc0b"             # budget alert / chart accent — extracted from palette

  # Borders
  border: "#dcd9d6"              # warm hairline dividers and card edges
  border-subtle: "#efece9"       # softest inner dividers (dialog top line)

  # Interaction
  focus-ring: "#556bfc"          # was rgba(85,107,252,0.50) — Google format requires hex

  # Shadow tints (opaque stand-ins for the elevation table)
  shadow-soft: "#22201d"         # was rgba(34,32,29,0.05–0.10) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Copernicus, Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -3.2px
  display:
    fontFamily: "Copernicus, Georgia, 'Times New Roman', serif"
    fontSize: 40px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -2.4px
  heading-section:
    fontFamily: "Copernicus, Georgia, 'Times New Roman', serif"
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -1.6px
  heading-sub:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 350
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 350
    lineHeight: 1.4
    letterSpacing: -0.18px
  nav-link:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: 0px
  label-caps:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.7px
  caption:
    fontFamily: "ABC Oracle, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 350
    lineHeight: 1.3
    letterSpacing: -0.14px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 8px
  md: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  badge:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    border: "1px solid {colors.border}"

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
---

# Monarch Money Design System

## Overview

Monarch Money refuses the aesthetic of the fintech dashboard. Where most personal-finance apps open on cool whites and primary-blue pie charts, Monarch lands on warm parchment (`{colors.background}`) and lets a refined serif speak first. **Copernicus** — a book-weight, slightly warm serif — sets the editorial tone at every headline: 48px, weight 350, letter-spacing compressed to -3.2px. The choice is deliberate. By echoing a quality print magazine's feel rather than a trading terminal's urgency, Monarch positions household money as something calm and considered, not a source of daily stress. The canvas is always the same warm off-white; even white cards (`{colors.surface}`) sit in contrast against it, lifted softly by a hairline border and the faintest ink-tinted shadow.

The typographic pairing is a two-voice system engineered for trust. Copernicus (`{typography.display-hero}`) carries every emotional and aspirational statement — section headlines, feature claims, hero copy. **ABC Oracle**, a clean geometric sans at weights 350 and 500, handles every functional moment: navigation links, body paragraphs, button labels, and the uppercase-tracked labels (`{typography.label-caps}`) that organize data tables in the app. Oracle's mild negative tracking (-0.18px on body) and generous 1.4 line-heights give even dense explanatory paragraphs an unhurried quality. Weight 500 is used surgically for emphasis — the body-large lead paragraphs, the label caps — so hierarchy comes from contrast, not from shouting.

The color strategy is a study in restraint with one deliberate exception. The entire palette is warm neutrals: parchment canvas, warm near-black ink (`{colors.ink}`), muted stone secondary text (`{colors.ink-secondary}`), and a barely-there hairline border (`{colors.border}`). Into this calm field Monarch drops a single chromatic stake: a sun-fired vermilion-orange (`{colors.primary}`) that appears exclusively on primary CTAs — the "Get started" button, the "Sign up" pill. The orange never bleeds into decorative contexts; it reads as an unambiguous action signal against the warm neutrals. A coral-to-orange gradient (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`) appears in specific hero moments for warmth, but the solid vermilion is the CTA workhorse. The result is a design that feels like a calm financial planner's desk — warm materials, one decisive accent.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — never clinical white, always a hint of paper warmth
- **Copernicus** book serif (`{typography.display-hero}`) for all headlines, letter-spacing at -3.2px — the editorial signature
- **ABC Oracle** geometric sans for body and UI (`{typography.body}`); weight 350 resting, 500 for emphasis
- Uppercase-tracked label caps (`{typography.label-caps}`, +0.7px) as a tertiary typographic voice for data organization
- Vermilion-orange (`{colors.primary}`) appears exclusively on primary CTAs — scarcity preserves its signal strength
- Coral-to-orange gradient (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`) used in selective hero moments
- Warm near-black ink (`{colors.ink}`) instead of pure black — the palette has no pure `#000000`
- Fully-rounded pill buttons (`{rounded.pill}`) as the only interactive shape; cards use soft 12px corners (`{rounded.md}`)
- Feather-light ink-tinted shadow on cards — barely 1–2px of lift, warm-toned
- Generous section whitespace paced like a print spread — `{spacing.4xl}`–`{spacing.6xl}` between major sections
- Budget alert yellow (`{colors.warning}`) and gain green appear in-app charts — accent spectrum grounded in warmth
- Smooth, ease-out-tuned motion (0.15–0.3s) that feels considered, never flashy

## Colors

### Surface & Canvas
- **Warm Parchment** (`{colors.background}`): The dominant canvas. Paper-warm off-white that sets the editorial tone for every page.
- **Pure White** (`{colors.surface}`): Raised cards, modals, and form fields — a hair brighter than the canvas, separated by tone and a hairline border.
- **Warm Tint** (`{colors.surface-warm}`): Slightly deeper warm panels for alternating feature sections and padded containers.

### Ink / Text
- **Warm Near-Black** (`{colors.ink}`): All headlines, body copy, and UI labels. Warm-tinted, never pure black.
- **Stone Gray** (`{colors.ink-secondary}`): Supporting paragraph copy, secondary nav items, metadata.
- **Muted Stone** (`{colors.ink-muted}`): Captions, placeholder text, lowest-emphasis copy.
- **On-Primary** (`{colors.on-primary}`): Near-white text used on the orange CTA button fill.

### Brand Accent
- **Vermilion Orange** (`{colors.primary}`): The singular CTA accent. Appears only on primary action buttons — "Get started", "Sign up". Never decorative.
- **Deep Orange** (`{colors.primary-hover}`): Deepened orange for hover and active states on primary buttons.
- **Hero Gradient** (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`): Coral-red to vermilion used in selective hero background moments.

### Financial Semantic
- **Alert Yellow** (`{colors.warning}`): Budget warnings, chart accent; appears in-app. Warm-toned to stay in the palette family.
- **Gain Green** (`{colors.success}`) / **Loss Red** (`{colors.error}`): Standard positive/negative financial indicators for the app's data layer.

### Borders, Focus & Shadow
- **Hairline** (`{colors.border}`): Card edges, button outlines, input borders — warm stone, low contrast.
- **Subtle Inner** (`{colors.border-subtle}`): Softest inner panel dividers.
- **Focus Ring** (`{colors.focus-ring}`): Indigo-blue ring on focused inputs — intentionally distinct from the orange brand, signaling system control.
- **Shadow** (`{colors.shadow-soft}`): Opaque warm near-black stand-in for the faint ink-tinted ambient shadow on cards (original was rgba with 0.05–0.10 alpha).

## Typography

### Font Family
- **Serif display**: `Copernicus`, a refined book serif, with fallbacks `Georgia, 'Times New Roman', serif`. Carries every headline and editorial statement.
- **Body / UI sans**: `ABC Oracle`, a clean geometric sans, with fallbacks `Helvetica, system-ui, -apple-system, Arial, sans-serif`. Handles paragraphs, navigation, buttons, and data labels.
- **OpenType notes**: Copernicus runs at weight 350 — neither the conventional 400 "regular" nor a true light — giving headlines a refined, unhurried quality. Oracle's weight 350 body similarly sits between light and regular, reinforcing calm over authority.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / Copernicus 350 / -3.2px — hero headlines and marquee statements |
| `display` | 40px / Copernicus 350 / -2.4px — major section headings |
| `heading-section` | 32px / Copernicus 350 / -1.6px — feature section openers |
| `heading-sub` | 20px / ABC Oracle 350 / -0.2px — card titles, sub-section headers |
| `body-large` | 20px / ABC Oracle 500 — lead paragraphs, feature callouts |
| `body` | 18px / ABC Oracle 350 / -0.18px — standard flowing body copy |
| `nav-link` | 16px / ABC Oracle 400 — navigation labels |
| `button-ui` | 16px / ABC Oracle 350 — button and CTA labels |
| `label-caps` | 14px / ABC Oracle 500 / +0.7px / uppercase — data table headers, category labels |
| `caption` | 14px / ABC Oracle 350 / -0.14px — captions, metadata, fine print |

### Principles
- **Serif for feeling, sans for facts**: Copernicus makes the editorial claims; ABC Oracle carries the data and the fine print.
- **Weight 350 as the resting tone**: both the serif display and the sans body use sub-regular weights that read as confident lightness rather than tentative thinness.
- **Tracked uppercase labels as a third voice**: the `{typography.label-caps}` token adds data-organization clarity without introducing a new family.
- **Scale the serif deliberately**: Copernicus at 48px with -3.2px tracking compresses beautifully; don't reduce tracking at this size — the tightness is part of the elegance.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step at `{spacing.xs}`. Monarch is spacious at the macro scale — major section separations use `{spacing.4xl}`–`{spacing.6xl}` (64–128px), allowing the Copernicus serif and the warm canvas to breathe like pages in a quality print publication.

### Grid & Container
- Max content width: ~1280px, centered
- Common pattern: a Copernicus statement spanning full column width, with product UI screenshots in warm-radius containers below
- Cards are white surfaces (`{colors.surface}`) that sit on the parchment canvas, grouped in 2–3 column grids at desktop
- Breakpoints: 376px / 480px / 640px / 768px / 1024px / 1280px / 1536px — an 8-step ladder

### Whitespace Philosophy
- **Air is the trust signal**: generous vertical gaps communicate that Monarch isn't trying to overwhelm with features.
- **Editorial pacing**: each section makes one claim at a time, like a well-structured article spread.
- **Warmth over density**: even data-heavy sections maintain generous inner padding — the parchment canvas always shows at the edges.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; parchment canvas only | Most page sections, the canvas itself |
| Card (Level 1) | `rgba(34,32,29,0.05) 0px 1px 2px` + `{colors.border}` hairline | Resting cards lifted gently from the parchment |
| Raised (Level 2) | `rgba(34,32,29,0.10) 0px 10px 15px -3px, rgba(34,32,29,0.10) 0px 4px 6px -4px` | Floating panels, modal backdrops |
| Dialog (Level 3) | Ring shadow + large multi-layer lift | Modal overlays |
| Focus Ring | `{colors.focus-ring}` 3px ring | Keyboard focus on inputs and buttons |

**Shadow Philosophy**: Monarch's shadows are warm-tinted and deliberately slight. The dominant card shadow — just 1–2px of vertical rise — separates surfaces through tone rather than depth. The original source values were `rgba(34,32,29,...)` — the same warm near-black as `{colors.ink}` — ensuring shadows never feel cool or sterile. Elevation comes primarily from the canvas-to-surface tone jump (`{colors.background}` vs `{colors.surface}`) rather than from dramatic drops.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Cards at the softer end, input fields |
| `md` | 12px | Feature cards, larger panels, containers — the dominant container radius |
| `pill` | 9999px | All buttons and badges — the consistent interactive shape |

The system is intentionally binary at the interactive layer: containers use 8–12px corners while every actionable element (buttons, pills) is fully rounded. Nothing in between. This clarity — round if you can click it, gently cornered if you just look at it — creates a clean interactive vocabulary.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants
- **`button-primary`** — Vermilion orange (`{colors.primary}`) pill fill, near-white text (`{colors.on-primary}`), `{rounded.pill}`. The "Get started" and "Sign up" CTA. Hover deepens to `{colors.primary-hover}` at 0.2s ease-out.
- **`button-secondary`** — White (`{colors.surface}`) pill fill, warm-black text (`{colors.ink}`), `{colors.border}` 1px outline. Used for "Sign in" and secondary navigation actions. Hover fills to `{colors.background}`.
- **`button-ghost`** — White fill, no border, warm-black text. Lowest-emphasis inline action such as "Get started today" in section bodies.

### Cards
- **`card`** — Pure-white surface (`{colors.surface}`), 12px radius (`{rounded.md}`), 24px padding, faint ink-tinted shadow and a `{colors.border}` hairline edge.
- **`card-warm`** — Warm tint surface (`{colors.surface-warm}`), 12px radius, 32px padding. Used for feature highlights and padded content wells.

### Inputs
- **`input`** — White fill (`{colors.surface}`), warm-black text (`{colors.ink}`), 8px radius (`{rounded.sm}`), `{colors.border}` 1px outline. **`input-focus`** keeps the fill and swaps the border to `{colors.focus-ring}` indigo — intentionally distinct from the orange brand.

### Navigation
- **`nav-bar`** — Warm parchment (`{colors.background}`) background, warm-black links in `{typography.nav-link}` (400 weight), with an orange "Sign up" pill at the right and a bordered "Sign in" ghost pill beside it.

### Badges & Links
- **`badge`** — Warm surface (`{colors.surface-warm}`) fill, `{colors.border}` outline, `{rounded.pill}`, warm-black text in `{typography.caption}`. Used for plan labels and category chips.
- **`link`** — Warm-black default (`{colors.ink}`), no underline. **`link-hover`** shifts to orange (`{colors.primary}`) at 0.15s ease.

## Do's and Don'ts

### Do
- Keep the canvas warm parchment (`{colors.background}`) — never pure white or a cool gray page background
- Set every headline in **Copernicus** serif (`{typography.display-hero}`), tightly tracked at -3.2px at 48px scale
- Use **ABC Oracle** for all body and UI; run it at weight 350 for body copy, 500 only for emphasis and label-caps
- Reserve vermilion orange (`{colors.primary}`) exclusively for primary CTA buttons — its power comes from scarcity
- Keep all interactive elements (buttons, badges) as fully-rounded pills (`{rounded.pill}`) — never introduce mid-range radii on clickable elements
- Apply warm near-black ink (`{colors.ink}`) — never pure `#000000`
- Use ink-tinted, barely-there shadows — the source `rgba(34,32,29,0.05)` tone is the right baseline
- Maintain generous vertical spacing (`{spacing.4xl}`–`{spacing.6xl}`) between major sections for editorial pacing
- Use uppercase tracked label caps (`{typography.label-caps}`) for data table headers and category labels — not for decorative body copy

### Don't
- Don't use pure white (`#ffffff`) as the page canvas — the parchment `{colors.background}` is the Monarch warmth signal
- Don't apply the orange (`{colors.primary}`) to decorative elements, illustrations, or secondary text — it must remain exclusively a CTA signal
- Don't use Copernicus serif for body copy — it is a display-only voice; body belongs to ABC Oracle
- Don't introduce mid-range border-radius (4–7px or 16–24px) on interactive elements — the system is binary (8–12px containers, full pill CTAs)
- Don't use cool-gray or blue-shifted shadows — tint them warm to `{colors.shadow-soft}` or use the border-tone separation approach
- Don't crowd sections with multiple competing CTAs — one primary orange pill per section; secondary actions use the bordered or ghost style
- Don't bold Oracle past weight 500 — the maximum emphasis weight is 500; heavier weights break the calm-authority register
- Don't use the hero gradient (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`) as a button fill — reserve it for hero backgrounds and large graphic moments only

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column; Copernicus hero scales ~48px → ~28px; nav collapses to hamburger; CTA goes full-width pill |
| Mobile | 480–767px | Single column; tighter section padding; product screenshots stack below copy |
| Tablet | 768–1023px | Two-column feature rows emerge; hero text reduced; horizontal nav reappears |
| Desktop | 1024–1279px | Full layout; Copernicus statements paired with product UI screenshots |
| Large Desktop | ≥1280px | ~1280px max-width centered container; generous `{spacing.5xl}`–`{spacing.6xl}` section gaps |

### Touch Targets
- Pill buttons with `12px 24px` padding provide comfortable touch heights
- Oracle body text at 18px and 1.4 line-heights keeps tap rows naturally separated on small screens
- Navigation links have 12px vertical padding for comfortable finger targets

### Collapsing Strategy
- **Navigation**: full horizontal nav → hamburger toggle below 768px; the orange "Get started" pill persists in the drawer
- **Hero**: Copernicus headline scales from 48px toward ~28–32px while retaining its tight tracking and serif character; product screenshots move from side-by-side to stacked
- **Section spacing**: major gaps compress from ~128px toward 48–64px on mobile
- **Feature grids**: 2–3 column card layouts collapse to single stacked column below 768px

### Image Behavior
- Product UI screenshots are contained in `{rounded.md}` 12px frames that scale to full-width on mobile
- The hero gradient background (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`) extends edge-to-edge on all screen widths

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Parchment (`{colors.background}`)
- Text: Warm Near-Black (`{colors.ink}`)
- Brand accent / CTA: Vermilion Orange (`{colors.primary}`)
- Secondary text: Stone Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- CTA fill: Orange (`{colors.primary}`) with near-white (`{colors.on-primary}`) text

### Example Component Prompts

- "Create a hero section on warm parchment (`{colors.background}`) with a Copernicus serif headline (`{typography.display-hero}`, 48px, weight 350, letter-spacing -3.2px) in warm near-black (`{colors.ink}`). Below the headline place a lead paragraph in ABC Oracle body-large (`{typography.body-large}`, 20px, weight 500). At the bottom, one full-rounded orange pill CTA: `{colors.primary}` fill, near-white (`{colors.on-primary}`) text, `{rounded.pill}`, `12px 24px` padding."
- "Build the primary button: vermilion orange (`{colors.primary}`) fill, near-white (`{colors.on-primary}`) text in ABC Oracle `{typography.button-ui}`, `{rounded.pill}`, `12px 24px` padding. On hover, transition background to `{colors.primary-hover}` over 0.2s ease-out."
- "Design a secondary 'Sign in' button: white (`{colors.surface}`) fill, warm-black (`{colors.ink}`) text, 1px `{colors.border}` outline, `{rounded.pill}`, `12px 24px` padding. On hover, background shifts to `{colors.background}`."
- "Create a feature card: white surface (`{colors.surface}`), `{rounded.md}` 12px radius, 24px padding, `rgba(34,32,29,0.05) 0px 1px 2px` shadow and `{colors.border}` 1px hairline. Heading in Copernicus `{typography.heading-section}` (32px, -1.6px tracking) in `{colors.ink}`; body paragraph in ABC Oracle `{typography.body}` (18px) in `{colors.ink-secondary}`."
- "Build a navigation bar: warm parchment (`{colors.background}`) background, warm-black `{colors.ink}` links in `{typography.nav-link}` (16px, 400 weight). Right side: a bordered ghost 'Sign in' pill and an orange fill 'Get started' pill side by side."
- "Render a data category label: uppercase ABC Oracle (`{typography.label-caps}`, 14px, weight 500, letter-spacing +0.7px) in `{colors.ink-secondary}`. Use for table headers, chart legends, and section category chips."

### Iteration Guide

1. Start on warm parchment (`{colors.background}`). If you see pure white or a cool-tinted canvas, warm it — the paper feel is the brand's resting tone.
2. Headlines must be Copernicus serif (`{typography.display-hero}`), weight 350, with tight negative tracking. If the heading is in a sans or at weight 400+, reset it.
3. Body and UI are ABC Oracle. Use weight 350 for flowing copy, 500 only for lead paragraphs and uppercase data labels. Don't go heavier.
4. Orange (`{colors.primary}`) means one thing: primary CTA. If something other than the main button is orange, remove or recolor it.
5. All buttons and interactive pills stay at `{rounded.pill}` — full circle ends. Containers (cards, inputs) use `{rounded.sm}`–`{rounded.md}` (8–12px). Nothing between these two ranges on interactive elements.
6. Shadows are warm-tinted and barely-there: `rgba(34,32,29,0.05)` vertical rise, plus a `{colors.border}` hairline. If a shadow reads as cool gray or dramatic, flatten it.
7. Sections breathe — give major content blocks at least `{spacing.3xl}` (48px) vertical separation; flagship sections deserve `{spacing.5xl}` (96px) or more.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Monarch Money. Brand names and trademarks belong to their respective owners.