design-taste-frontend-v1

# Golden Crumb — One-Page Site Design

## Hero Section Layout

A full-width hero, ~85vh tall, with a warm background image (fresh bread on a wooden counter) and a soft cream overlay gradient so text stays readable.

```
┌──────────────────────────────────────────────┐
│  [Logo: small wheat icon + "Golden Crumb"]   │
│                                    [Menu] →  │
│                                              │
│         Baked by hand, every morning.        │  ← H1, centered
│     Small-batch sourdough, pastries &        │  ← Subhead
│         treats from our corner bakery.       │
│                                              │
│           [ See Today's Bakes ]              │  ← CTA button
│                                              │
│  ⭐ 4.9 · 200+ happy neighbors               │  ← trust line
└──────────────────────────────────────────────┘
```

Implementation notes:
- Background: `background: linear-gradient(rgba(253,248,240,0.75), rgba(253,248,240,0.9)), url('hero.jpg') center/cover;`
- Content centered with flexbox, max-width ~640px.
- CTA button: rounded (8px), solid brown background, cream text, subtle hover lift.
- Trust line in small caps below the button.

## Color Palette

| Role | Hex | Use |
|---|---|---|
| Cream (background) | `#FDF8F0` | Page background, hero overlay |
| Warm Brown (primary) | `#6B4226` | Headings, buttons, footer |
| Golden Crust (accent) | `#D9A441` | CTA hover, highlights, icons |
| Soft Wheat (secondary) | `#EAD9C0` | Section dividers, card fills |
| Charcoal Cocoa (text) | `#3B2F2A` | Body text |
| Fresh Sage (optional) | `#8A9A5B` | Small accents (e.g., "organic" badges) |

## Type Pairing

- **Headings:** *Fraunces* (Google Fonts) — a warm, slightly retro serif that feels handmade and artisanal. Use weights 600–700.
- **Body/UI:** *Nunito Sans* — rounded, friendly, highly readable. Weights 400/600.

```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
```

```css
h1, h2, h3 { font-family: 'Fraunces', serif; }
body { font-family: 'Nunito Sans', sans-serif; }
```

This combo reads "trusted neighborhood bakery": warm neutrals, one golden accent, and a serif/sans pairing that's easy to implement with two font tags and a few CSS rules.

# Golden Crumb — One-Page Bakery Site

## Hero Section Layout

A warm, asymmetric split hero (left text, right image) — feels handmade, not corporate:

```
+--------------------------------------------------------------+
|  [Logo: small wheat icon + "Golden Crumb"]      Nav: Menu  About  Visit |
+--------------------------------------------------------------+
|                                                              |
|   LEFT COLUMN (~55%)              RIGHT COLUMN (~45%)        |
|                                                              |
|   Small eyebrow text:            Large photo of bread/       |
|   "Baked fresh every morning"    croissants, slightly        |
|                                  rounded corners (12px),     |
|   H1 (serif, large):             with a subtle 2px offset    |
|   "Golden Crumb"                 border in the accent color  |
|   "Bakery"                       behind it (paper-cut feel)  |
|                                                              |
|   One-sentence subtext:                                      |
|   "Sourdough, pastries, and cakes                            |
|    made by hand in small batches."                           |
|                                                              |
|   [ Button: "See Today's Bakes" ]  [ Text link: Visit us → ] |
|                                                              |
|   Bottom strip: hours + address, small text                  |
|   "Open Tue–Sun, 7am–3pm · 214 Alder Lane"                   |
+--------------------------------------------------------------+
```

Implementation notes:
- Use CSS Grid: `grid-template-columns: 1.2fr 1fr; gap: 3rem;` collapsing to one column under 768px.
- The offset-border photo trick: wrap the image in a div with `position: relative`, add a `::after` pseudo-element shifted `8px` right/down with the accent border color.
- Keep the hero on the cream background; no dark overlay needed.

## Color Palette

| Role | Hex | Use |
|---|---|---|
| Cream (background) | `#FAF3E7` | Page background |
| Warm Brown (text) | `#3E2C1B` | Headings, body text |
| Golden Amber (accent) | `#C98A2D` | Buttons, links, photo border |
| Soft Terracotta (secondary accent) | `#B4553A` | Hover states, small highlights |
| Warm Gray (muted text) | `#8A7A68` | Subtext, captions |

All warm-toned, desaturated enough to feel trustworthy rather than loud. Buttons: solid `#C98A2D` with `#3E2C1B` text or white text, `border-radius: 6px`, hover darkens to `#B4553A`.

## Type Pairing (Google Fonts)

- **Headings: Fraunces** (a warm, slightly quirky serif — perfect for "handmade"). Weights 500–700, use `font-optical-sizing` for extra character at large sizes.
- **Body: Work Sans** (clean, friendly humanist sans). Weights 400–600.

```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Work+Sans:wght@400;600&display=swap" rel="stylesheet">
```

```css
body { font-family: 'Work Sans', sans-serif; color: #3E2C1B; background: #FAF3E7; }
h1, h2 { font-family: 'Fraunces', serif; }
```

That's everything a developer needs — no frameworks, just one HTML file and one stylesheet.

# Loop — Landing Page Design Spec

**Vibe:** Confident, modern, slightly playful. Think Linear's polish with a wink — a warm off-white canvas, one electric accent, and motion that feels alive but never needy.

---

## 1. Design Tokens

- **Background:** `#FAF9F6` (warm paper white)
- **Ink:** `#141414`
- **Accent:** `#5B4DFF` (electric indigo) + secondary `#FFB443` (playful amber, used sparingly)
- **Type:** Display — "General Sans" or "Clash Display"; Body — "Inter"
- **Radii:** 16px cards, 999px pills
- **Grid:** 12-col, max-width 1200px, 24px gutters

---

## 2. Hero — Asymmetric Layout

**Structure:** A 7/5 split that deliberately breaks the grid.

- **Left column (7 cols, starts at col 1):**
  - Eyebrow pill: "Now in public beta" with a tiny pulsing dot (see animations).
  - H1: "Ship work that ships itself." — oversized (clamp 48–72px), tight leading (1.05), with the word *ships* in italic serif as a playful contrast, colored accent.
  - Subhead: one sentence, 18px, max-width 42ch.
  - CTA row: primary pill button "Start looping →" + ghost link "Watch the 90-sec tour" with a play icon.
  - Social proof strip: 4 grayscale logos + "4,200 teams loop daily."

- **Right column (5 cols, offset upward):**
  - A floating product mock (UI screenshot in a browser-chrome card) that **overflows the hero's bottom edge** into the section below by ~80px — this overlap is the asymmetry signature.
  - Behind it, an offset accent blob/rounded rectangle in `#FFB443` at 12% opacity, shifted +24px down-right, plus a small tilted "task card" sticker rotated 6° overlapping the mock's corner ("Deploy v2.1 ✅" with a checkmark that draws itself on load).
  - The mock card has a soft 3D tilt (perspective 1200px, rotateX 4°, rotateY -6°) that eases to flat on hover.

- **Below the fold line:** a marquee of customer logos scrolling perpetually (see §4).

---

## 3. Bento Grid — Features

**Layout:** 12-col grid, 4 rows, 16px gaps, cards with 1px `#E8E5DE` border, subtle inner shadow.

| Card | Span | Content |
|---|---|---|
| A — "The Loop" | 6 cols × 2 rows | Hero feature: animated diagram of tasks cycling through Plan → Do → Review → Ship, drawn as a circular path with a dot traveling it perpetually. |
| B — Velocity | 3 cols × 1 row | Big number "3.2×" that counts up on scroll-in; sparkline chart that draws itself. |
| C — Integrations | 3 cols × 1 row | Grid of 8 tool icons that gently float/bob in a staggered wave. |
| D — Automations | 3 cols × 1 row | Mini "if-this-then-that" chip stack; a toggle flips on loop every 6s. |
| E — Focus mode | 3 cols × 1 row | Dark card (inverted, `#141414` bg) with a timer ring animating. |
| F — Social quote | 6 cols × 1 row | Testimonial with avatar; quote marks in accent color. |
| G — CTA card | 12 cols × 1 row | Full-width: "Ready to close your first loop?" + button, with a slow-drifting dotted grid background. |

**Hover behavior (all cards):** border shifts to accent at 40% opacity, card lifts 4px, and the card's specific micro-animation speeds up 1.5×.

---

## 4. Micro-Animation Specs

**Global easing tokens:**
- `--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1)` — entrances
- `--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1)` — playful overshoot (buttons, stickers)
- `--ease-inout: cubic-bezier(0.65, 0, 0.35, 1)` — loops

**Perpetual loops (subtle — all under 8% opacity/scale change):**

| Element | Animation | Duration | Easing |
|---|---|---|---|
| Hero eyebrow dot | pulse (opacity 1→0.4→1, scale 1→1.3) | 2s | ease-inout, infinite |
| Hero mock card | float (translateY 0→-8px→0) | 6s | ease-inout, infinite |
| Amber blob | drift (translate 0,0 → 12px,-10px) | 10s | ease-inout, infinite alternate |
| Bento A loop dot | travels circular SVG path | 8s | linear, infinite |
| Bento C icons | bob (translateY ±4px), 8 icons staggered 150ms | 3s each | ease-inout, infinite |
| Bento D toggle | flips on/off | 6s | ease-spring (once per cycle) |
| Bento E timer ring | stroke-dashoffset sweep | 4s | linear, infinite |
| Logo marquee | translateX -50%→0 | 30s | linear, infinite |
| Bento G dotted grid | background-position drift | 20s | linear, infinite |

**Entrances (scroll-triggered, once, IntersectionObserver at 20% visibility):**
- Hero elements: staggered fade-up (opacity 0→1, translateY 24px→0), 600ms, ease-out-soft, 80ms stagger between eyebrow → H1 → sub → CTAs → mock.
- Bento cards: fade-up 500ms ease-out-soft, 60ms stagger by grid index.
- Bento B count-up: 1.2s ease-out; sparkline stroke-draw 1s ease-inout.
- Task-card sticker checkmark

# Loop — Landing Page Design Spec

**Vibe:** Confident, modern, slightly playful. Off-white canvas (`#FAFAF9`), charcoal ink (`#1C1C1B`), one desaturated accent: **Loop Green** `#3E9B6E` (used sparingly — status dots, one CTA, one bento tile). Type: **Satoshi** for display, **JetBrains Mono** for numbers/labels. No purple, no gradients, no glow.

---

## 1. Asymmetric Hero

**Structure (desktop, `min-h-[100dvh]`, grid `7fr / 5fr`):**

- **Left column (7fr):** Content pushed down and left with heavy asymmetric whitespace — `padding-left: 8vw`, content vertically offset ~`mt-[18vh]`.
  - Eyebrow: mono, uppercase, 11px, letter-spacing 0.12em, accent green: `● SHIPPED BY 4,200 TEAMS` (the dot is a live pulsing status dot — see animations).
  - H1, two lines, deliberately off-balance:
    - Line 1: "Projects that" (charcoal, weight 500)
    - Line 2: "run themselves." (weight 700, with the period in accent green)
  - Size: `text-5xl md:text-6xl tracking-tighter leading-[1.02]`. Confident, not screaming.
  - Subcopy: `max-w-[42ch]`, gray-600, one concrete sentence: "Loop turns messy task lists into a single rhythm — assign, track, and close work without the standup theater."
  - CTA row: primary button "Start free — no card" (charcoal fill, green hover-shift) + ghost link "Watch 90-sec demo →". Buttons get magnetic micro-physics (pull ≤6px toward cursor) and `scale-[0.98]` on `:active`.
  - Below CTA: a horizontal strip of 4 tiny avatar photos (picsum seeds, varied crops) + mono text "4,213 teams · last sync 2 min ago" — the "2 min" ticks live.

- **Right column (5fr):** A floating product mock — a stylized Loop board card, rotated `-2deg`, overlapping the hero's bottom edge by ~3rem (`margin-bottom: -3rem`), casting a tinted shadow (`shadow-[0_24px_60px_-20px_rgba(28,28,27,0.18)]`). Inside the mock: 3 task rows, one with a green "Done" check that cycles. Behind it, one large outlined circle (the "loop" motif) — a 1px charcoal/10 ring, ~480px, partially cropped off the right viewport edge.

- **Mobile (<768px):** collapses to single column, `px-4 py-8`, mock drops rotation to 0 and sits below copy at full width.

---

## 2. Bento Grid of Features

**Grid:** `grid-template-columns: repeat(4, 1fr)`, `gap-4`, `max-w-[1400px]`. Tiles have varied spans and heights — no equal cards:

| Tile | Span | Content |
|---|---|---|
| A — "Auto-pilot sprints" | 2×2 (hero tile) | Mini animated sprint board: task chips slide from "Todo" → "Doing" → "Done" column on a loop. Charcoal tile (dark on light page = confident contrast), white text. |
| B — "Loop Score" | 1×1 | Big mono number `87.4` that counts up on scroll-into-view, label "team velocity index". |
| C — "Integrations" | 1×1 | 5 tool logos (GitHub, Slack, Figma, Linear, Notion) in a slow vertical marquee inside the tile. |
| D — "Deadline radar" | 1×2 (tall) | A thin arc/ring with a dot orbiting it perpetually; 3 deadline rows with mono dates (`Mar 14`, `Mar 21`, `Apr 02`). |
| E — "Comments that close themselves" | 2×1 (wide) | Chat-bubble snippet where a reply auto-resolves the task — a strikethrough animates across the task title on loop. |
| F — "Keyboard-first" | 1×1 | Fake keystroke caps (`⌘ K`, `G D`) that light up in sequence. |

Tile styling: `rounded-2xl`, `border border-zinc-200`, white bg (tile A charcoal), hover: `translate-y-[-2px]` + shadow tinted `rgba(28,28,27,0.08)`, `transition 300ms cubic-bezier(0.16, 1, 0.3, 1)`. Section header sits left-aligned above the grid, offset from the grid's left edge by one column width (asymmetry echo).

---

## 3. Perpetual Micro-Animation Specs

All infinite loops use `transform`/`opacity` only. Global interactive easing: `cubic-bezier(0.16, 1, 0.3, 1)`, 300ms. Springs (Framer Motion): `type: "spring", stiffness: 100, damping: 20`.

| Element | Animation | Duration / Easing | Loop |
|---|---|---|---|
| Status dot (eyebrow) | scale 1→1.35 + opacity halo fade | 2s, `ease-out` | infinite, 2s delay between pulses |
| Hero mock card | float `translateY(0 → -8px → 0)` | 6s, `ease-in-out` | infinite |
| Background loop-ring | slow rotate 0→360° | 90s, `linear` | infinite |
| Bento A task chips | chip translates across columns, fades at "Done" | 4s per chip, staggered 1.2s, `cubic-bezier(0.16,1,0.3,1)` | infinite cycle |
| Bento C logo marquee | `translateY(-50%)` seamless duplicate | 18s, `linear` | infinite, pauses on hover |
| Bento D orbit dot | rotate around arc center | 8s, `linear` | infinite |
| Bento E strikethrough |

# Meridian — Dashboard Design Spec

## 1. Overall Grid

**12-column fluid grid, 1440px reference width.**

| Token | Value |
|---|---|
| Columns | 12 (fluid), collapses to 6 < 1024px, 4 < 640px |
| Gutter | 16px (24px ≥ 1440px) |
| Outer margin | 24px (32px ≥ 1440px) |
| Max content width | 1600px, centered |
| Row rhythm | 8px baseline; vertical gaps in multiples of 8 (8/16/24/32) |

**Panel spans (default layout):**
- Portfolio value hero: span 4, height 2 rows
- Allocation donut: span 4
- P&L chart: span 4, height 2 rows
- Watchlist: span 6, height 3 rows
- News/activity feed: span 6, height 3 rows
- Positions table: span 12

Panels use `border-radius: 12px`, `1px` hairline border (`rgba(255,255,255,0.08)` on dark), no drop shadows — separation comes from surface contrast (`#0E1116` page, `#141922` panel).

## 2. Density Rules

- **Base row height: 36px** for list rows (watchlist, activity). Table rows: 40px.
- Cell padding: `8px 12px` horizontal lists; `12px 16px` tables.
- Typography scale: 11px (labels/eyebrows, uppercase, tracking 0.5px), 13px (body/data), 15px (panel titles), 22px (hero number).
- Line-height locked at 1.2 for data, 1.4 for prose.
- Minimum touch target 36px even if visual row is shorter.
- No more than **two density levels** per screen; never mix 36px and 40px rows in the same panel.

## 3. Number Styling

- **Font:** tabular monospace for all figures — `"IBM Plex Mono"` or `"JetBrains Mono"`, fallback `ui-monospace, SFMono-Regular, Menlo`.
- **`font-variant-numeric: tabular-nums lining-nums slashed-zero;`** — mandatory so digits align in columns during live updates.
- Fixed decimal precision per metric type: prices 2dp, percentages 2dp with explicit `+`/`−` sign, volume abbreviated (`1.24M`), never scientific notation.
- **Right-align all numeric columns**; currency symbol in a muted 11px span preceding the value, not inside the mono run.
- Semantic colors: gain `#3DDC97`, loss `#FF6B6B`, neutral `#8B93A1`. Change values always render with sign glyph (`▲/▼` 10px) + signed number.
- Flash on update: background tint fades over 600ms (green/red at 12% alpha → transparent). No layout shift — reserve column width with `min-width` per column.
- Hero number uses `font-feature-settings: "tnum" 1` and animates via count-up (300ms, ease-out) — never re-renders with jittered width.

## 4. Watchlist Reordering — Spring Parameters

Use a spring on **translateY only**; width/opacity snap.

```
stiffness: 420
damping: 32        (ζ ≈ 0.78 — slight overshoot, one small bounce)
mass: 1
precision: 0.01    (px, settle threshold)
```

- **Dragged item:** scale 1.03, z-index raised, shadow `0 8px 24px rgba(0,0,0,0.4)`, follows pointer with spring `stiffness: 900, damping: 40` (near-critical, minimal lag).
- **Displaced siblings:** animate to their new slots with the 420/32 spring, staggered by 20ms per row index delta.
- **Drop:** dragged item springs to slot with 420/32; scale returns to 1 over 150ms ease-out.
- **Threshold:** reorder commits when dragged item's center crosses 50% of a neighbor's height (no hysteresis needed at this stiffness).
- Persist order optimistically; rollback animation on server failure: item springs back to original index with same params + 200ms delay.

## 5. Empty States

- Centered in panel, 48px icon (1.5px stroke, `#3A4150`), 13px title, 12px muted description, single ghost button.
- Watchlist empty: "No symbols tracked" / "Search to add your first position." + "Add symbol" button.
- No illustrations, no more than one CTA. Keep panel height fixed (don't collapse) so grid doesn't reflow.

## 6. Loading Skeletons

- Skeleton = `#1B212C` blocks, `border-radius: 6px`, shimmer via a translating gradient (`rgba(255,255,255,0.04)` band, 1.4s linear infinite).
- **Match final layout exactly** — same row heights, same column positions; numbers render as 64px-wide bars, labels as 40–80px bars, sparkline as a 100% × 24px bar.
- Show skeletons after 200ms latency delay (no flash for fast responses); fade out 150ms when data lands.
- Never skeleton the hero number independently — the whole panel loads as a unit to avoid partial-population flicker.

# Meridian — Dashboard Design Specification

## 1. Overall Grid

**Canvas:** `max-w-[1400px] mx-auto`, page padding `px-6 lg:px-10`, gutter `gap-4` (tight, not `gap-6` — this is a data product).

**12-column base grid, asymmetric by zone:**

```
┌─────────────────────────────────────────────────────┐
│ Topbar: fixed, h-14, border-b, no shadow            │
├───────────────┬─────────────────────────────────────┤
│               │  KPI Strip (cols 1–12)              │
│  Watchlist    │  grid-cols-2 xl:grid-cols-4         │
│  (cols 1–3)   ├─────────────────────────────────────┤
│  sticky,      │  Primary Chart (cols 1–8)           │
│  top-14,      │  Allocation/Positions (cols 9–12)   │
│  own scroll   ├─────────────────────────────────────┤
│               │  Activity Feed (cols 1–7)           │
│               │  News/Signals (cols 8–12)           │
└───────────────┴─────────────────────────────────────┘
```

- Desktop: `grid grid-cols-12 gap-4`. Watchlist rail is `col-span-3`, main area `col-span-9`.
- `< lg`: watchlist collapses to a horizontal scroll strip above the main grid.
- `< md`: strict single column, `px-4 py-6`, no horizontal scroll ever.
- Chart/panel pairs use fractional splits (`lg:grid-cols-[2fr_1fr]`), never equal thirds.
- Separation is done with `divide-y divide-zinc-200/60` and `border-t` — not boxed cards. Elevation only for the drag layer and modals.

## 2. Density Rules (Cockpit mode, ~8/10)

- **Row height:** watchlist/feed rows `h-11` (44px), KPI cells `h-20`, table rows `h-10`.
- **Padding:** panel headers `px-4 py-2.5`; cell padding `px-3`; list rows `px-3` horizontal only, vertical rhythm from fixed row height.
- **Typography scale:** panel titles `text-[13px] font-medium tracking-wide uppercase text-zinc-500`; data `text-sm`; hero KPI `text-2xl`. No oversized headings.
- **Type pairing:** Geist (UI) + Geist Mono (all numerics). Serif banned.
- **Color:** zinc neutrals only, one accent (desaturated emerald for positive, deep rose for negative — these are semantic, not decorative). Off-black `#18181b` text, never pure black.
- **Rules over boxes:** sections separated by 1px hairlines; cards only where drag/elevation is functionally required.
- **Max 2 density tiers:** "compact" (tables, watchlist) and "regular" (charts, empty states). Nothing in between.

## 3. Number Styling

```css
font-family: var(--font-geist-mono);
font-variant-numeric: tabular-nums; /* mandatory everywhere */
font-feature-settings: "tnum" 1, "zero" 1; /* slashed zero */
letter-spacing: -0.01em;
```

- **Tabular alignment:** every numeric column is right-aligned with `text-right` and a fixed `min-w` per column (e.g. price `w-24`, delta `w-20`) so digits never shift on live updates. Headers align to their columns.
- **Decimal discipline:** prices 2dp, percentages 2dp with explicit `+`/`−` sign always shown, volume abbreviated (`2.41M`, `18.7K`). Never round to "99.99%"-style fake values — show real precision.
- **Semantic color on deltas only:** `text-emerald-700` / `text-rose-700` for change values; base numbers stay `text-zinc-900`. No red/green backgrounds.
- **Live updates:** flash on change via a 400ms background tint (`bg-emerald-500/10` → transparent), never animate the digits themselves.
- Units (`$`, `%`) render at `text-xs text-zinc-400`, smaller than the digits.

## 4. Watchlist Reorder — Spring Parameters

Framer Motion, `Reorder`/`layout` animations:

```js
// Drag-follow (item tracking the pointer)
const dragSpring = { type: "spring", stiffness: 700, damping: 40, mass: 0.8 };

// Siblings yielding to make room
const yieldSpring = { type: "spring", stiffness: 400, damping: 32, mass: 1 };

// Drop settle (final snap into slot)
const settleSpring = { type: "spring", stiffness: 300, damping: 26, mass: 1 };
```

Behavior spec:
- Dragged item: `scale-[1.02]`, `shadow-lg shadow-zinc-900/10`, `z-20`, `bg-zinc-50`, slight rotation locked to 0.
- Siblings animate via `layout` with `yieldSpring`; no crossfade on rows (`layout` only, opacity stays 1).
- On drop, `settleSpring` resolves the last few px; a subtle `scale: 1 → 0.995 → 1` pulse confirms placement.
- Persist order optimistically; revert with the same springs if the API fails.
- All motion is transform/opacity only. `touch-action: none` on the drag handle (a 16px grip icon column, Phosphor `DotsSixVertical`), so rows still scroll normally by their body.

## 5. Empty States

- Composition: centered within the panel, `py-16`, icon in a `h-12 w-12 rounded-xl border border-zinc-200 bg-zinc-50` tile (Phosphor, `1.5` stroke), title `text-sm font-medium text-zinc-900`, one-line helper `text-[13px] text-zinc-500`, and a single primary action button (`h-9 px-4`,

# Legacy Checkout Page — Design Specification

## 1. Design Tokens (CSS Variables)

```css
:root {
  /* Color */
  --color-bg:            #FAF7F2;   /* warm off-white page background */
  --color-surface:       #FFFFFF;   /* card background */
  --color-surface-alt:   #F3EFE8;   /* summary panel / subtle fills */
  --color-text:          #2B2A26;   /* primary text, warm near-black */
  --color-text-muted:    #6E6A61;   /* secondary text, labels */
  --color-border:        #E4DED4;   /* hairlines, card borders */
  --color-accent:        #5F7A5A;   /* muted green — buttons, links, focus */
  --color-accent-hover:  #4E6649;
  --color-accent-soft:   #EAF0E8;   /* green tint: badges, selected states */
  --color-error:         #B4553F;
  --color-success:       #5F7A5A;   /* same as accent */

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans Pro", -apple-system, "Segoe UI", sans-serif;
  --text-xs:   0.75rem;    /* 12px — fine print, captions */
  --text-sm:   0.875rem;   /* 14px — labels, helper text */
  --text-base: 1rem;       /* 16px — body, inputs */
  --text-lg:   1.125rem;   /* 18px — card titles */
  --text-xl:   1.5rem;     /* 24px — section headings */
  --text-2xl:  2rem;      /* 32px — page title */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --line-tight: 1.2;
  --line-normal: 1.5;

  /* Spacing (4px base scale) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  /* Shape */
  --radius-sm: 6px;    /* inputs, badges */
  --radius-md: 12px;   /* cards */
  --radius-lg: 16px;   /* primary panel */
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 3px rgba(43, 42, 38, 0.06), 0 4px 12px rgba(43, 42, 38, 0.05);
  --shadow-raised: 0 4px 8px rgba(43, 42, 38, 0.08), 0 8px 24px rgba(43, 42, 38, 0.08);

  /* Layout */
  --container-max: 1120px;
  --grid-gap: 48px;
}
```

## 2. Page Structure

```
<header class="checkout-header">
  └─ logo (serif wordmark) + secure-checkout badge
<main class="checkout-page container">
  ├─ <h1 class="page-title">Checkout</h1>        ← serif display, 32px
  ├─ <div class="checkout-grid">                 ← 2-column, gap 48px
  │   ├─ <section class="checkout-main">         ← left, flexible
  │   │   ├─ ContactCard (email input)
  │   │   ├─ ShippingCard (address fields)
  │   │   ├─ PaymentCard (card fields + express buttons)
  │   │   └─ PlaceOrderButton
  │   └─ <aside class="order-summary">           ← right, 380px fixed
  │       ├─ SummaryHeader ("Order Summary", serif, 18px)
  │       ├─ LineItemList (thumb 64px, name, qty, price)
  │       ├─ Divider
  │       ├─ TotalsRow ×3 (subtotal, shipping, tax)
  │       ├─ Divider
  │       ├─ TotalRow (semibold, larger)
  │       └─ PromoCodeInput + Apply link
  └─ <footer class="checkout-footer"> fine print, muted 12px
```

## 3. Component Specs

**Card** — `background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-5);` Card title: serif, 18px, semibold, margin-bottom 16px.

**Page title** — `font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 var(--space-6);`

**Primary button (Place Order)** — full width, `background: var(--color-accent); color: #fff; border-radius: var(--radius-sm); padding: 14px 24px; font-weight: 600; font-size: 16px;` Hover: `--color-accent-hover`. Focus: `outline: 2px solid var(--color-accent); outline-offset: 2px;`

**Inputs** — `border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; font-size: 16px; background: #fff;` Focus: `border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft);` Labels: 14px, medium, muted color, 6px below.

**Line item** — 64×64 thumbnail, `border-radius: var(--radius-sm)`, object-fit cover; name 16px medium; qty/variant 14px muted; price right-aligned 16px

## Stillpoint Sign-Up Card — Design Direction

**Layout**
- A single centered card, ~360px wide, generous padding (32–40px), rounded corners (16px), soft shadow (low opacity, large blur).
- Vertical flow: small logo mark → heading → subheading → email field → button → tiny reassurance line ("No spam. Unsubscribe anytime.").
- Lots of whitespace; nothing cramped. Content left-aligned or centered — centered feels more meditative.

**Color Palette**
- Background behind card: warm off-white `#F6F4F0`
- Card surface: pure soft white `#FFFFFF`
- Primary text: deep charcoal `#2E2E2C`
- Secondary text: muted gray-green `#8A8F87`
- Accent (button): sage `#A8B5A2` with white text — or a deeper sage `#7C8B76` for better contrast
- Subtle hover state: one shade darker sage

**Typography**
- Headings: a light-weight humanist serif or rounded sans — e.g., *Fraunces Light* or *Nunito Light*, 28–32px, generous letter spacing on the heading.
- Body/subheading: *Inter* or *Nunito Regular*, 15–16px, line height 1.5.
- Button label: same sans, 15px, medium weight, sentence case.

**Copy**
- **Heading:** "Find your still point."
- **Subheading:** "Two minutes a day to breathe, reset, and return to yourself."
- **Button:** "Begin gently"

The tone stays soft and invitational throughout — no exclamation points, no urgency.

Here's the design direction for the Stillpoint sign-up card — calm, minimal, and airy.

## Card Layout
- A single centered card, ~400px wide, on a soft, quiet background (very light warm gray or pale sage-tinted off-white).
- Generous padding (~40–48px) inside the card; lots of breathing room above and below.
- Vertical stack, top to bottom:
  1. A small wordmark or simple lotus/breath icon (thin line, not filled) at the top
  2. Heading
  3. Subheading
  4. Email input (label above, subtle 1px border, soft rounded corners)
  5. Password input (same style)
  6. Full-width button
  7. A tiny, low-contrast line of helper text below ("Already have an account? Sign in")
- No shadows or very subtle ones only — elevation should barely register. A 1px hairline border in a slightly darker neutral works better than a drop shadow here.
- Corner radius: soft but not pill-shaped, ~16px.

## Color Palette
- **Background:** `#F4F2EE` (warm off-white)
- **Card surface:** `#FFFFFF`
- **Primary text:** `#2E2E2B` (soft charcoal, never pure black)
- **Secondary text:** `#8A8A82` (muted warm gray)
- **Accent (button + focus states):** `#5C7466` (desaturated deep sage green)
- **Button hover:** `#4E6357`
- **Borders/dividers:** `#E5E2DC`
- One accent only. Everything else stays neutral and warm.

## Typography
- **Heading:** A humanist sans with gentle character — *Satoshi* or *Outfit*, medium weight (500), slightly tight tracking. Not oversized; ~28–32px.
- **Body/subheading:** Same family, regular weight, ~15–16px, relaxed line height.
- **Button label:** Same sans, medium weight, ~15px, letter-spacing +0.02em.
- Avoid Inter. Keep it to one family throughout — calm comes from consistency.

## Copy
- **Heading:** "Begin where you are."
- **Subheading:** "A few quiet minutes a day. No streaks, no pressure — just space to breathe."
- **Button:** "Start your first session"

## Interaction Notes
- Button: solid sage, white text, gentle 200ms ease on hover (slightly darker), subtle scale-down on press.
- Inputs: border warms to the sage accent on focus, with a soft outer ring at low opacity.
- Optional: a very slow, subtle "breathing" animation on the top icon (scale 1 → 1.04 → 1 over ~6s). Nothing faster — motion should feel like exhaling.