Oatmeal Editorial UI (movemental-html-template)
Use this skill whenever you create or restyle pages in this static template.
You are working inside a documented "design chain" — match it faithfully and
never hardcode values.
North Star
A premium editorial marketing site — warm cream paper, high-contrast serif
display, disciplined Inter UI chrome, and hierarchy built from size and spacing
rather than loud color. Depth comes from surface tiers, not shadows;
structure comes from warm hairlines, not boxes.
Stack
Static, framework-free, no build step. Plain HTML + hand-authored CSS + one
vanilla JS file. No Tailwind/Bootstrap/Vite. Deployed to Vercel (/ →
movemental-home.html).
The design chain — load order is load-bearing. Every marketing page is
<html lang="en" class="oat-page" data-theme="oatmeal"> and loads, in order:
<!-- Google Fonts: Playfair Display + Inter + Homemade Apple + IBM Plex Mono -->
<link rel="stylesheet" href="css/tokens.css" /> <!-- L1: tokens — the ONLY file with raw hex -->
<link rel="stylesheet" href="css/base.css" /> <!-- L2: reset, body type, .container, reduced-motion -->
<link rel="stylesheet" href="css/components.css" /> <!-- L3: ml-* primitives -->
<link rel="stylesheet" href="css/pages.css" /> <!-- L4–5: page namespaces home-*/mh-*/sf-*/pw-*/mp-*… -->
<script src="js/main.js" defer></script> <!-- L6: nav, sticky, reveal, mega-menu -->
Chain rule: changes flow downward only. Never retrofit a one-off hex from a
page back into a token; never hardcode a color/size — always var(--…).
Source of truth (read these, in order)
css/tokens.css — the token SSOT (the only file with raw hex).css/components.css — the ml-* primitive vocabulary.design-chain/design-chain.html — the living style guide / charter (north star + 7 principles + live swatches & demos)._reference/style-spec.json (+ .md) — machine-readable token/style twin, ideal for programmatic reference._reference/PAGE-MANIFEST.md — which pages are canonical (R0/R1) vs exemplar/draft.- Golden pages:
movemental-home.html, movemental-pricing.html, pathway-safety.html, field-guide-safety.html.
Color — tokens only (css/tokens.css)
Never hardcode hex in markup or page CSS — consume var(--color-*).
| Token |
Value |
Role |
--color-bg |
#FBFAF6 |
Warm oatmeal page background |
--color-surface |
#F8F6F1 |
Tinted card/panel surface |
--color-surface-elevated |
#FFFFFF |
White inner card layer |
--color-ink |
#1A1A1A |
Primary text / near-black CTA fill |
--color-ink-muted |
#5C5651 |
Secondary text, captions, meta |
--color-accent |
#1A1A1A |
Primary CTA fill (= ink) |
--color-accent-hover |
#12356E |
Button hover (navy) |
--color-hero-dark |
#0A0E1A |
Navy hero band |
--color-border |
#E5DFD2 |
Warm-tan hairline rules/dividers |
--color-on-hero |
cream #E8ECF5 @ .78 |
Text on dark hero (alpha ramp -muted/-subtle/-faint…) |
Audience accents --color-blue/-deep/-soft; status --color-rating-yes/-partial/-no.
Highlighter / blue-ballpoint / AI-dock tokens are Paper Edition only
(data-theme="paper"), not standard oatmeal chrome. Temperature warm, saturation muted.
Typography
- Display: Playfair Display →
--font-display — headlines, wordmarks, section titles, stat numerals, large quotes.
- Body/UI: Inter →
--font-body — nav, eyebrows, meta, footer, buttons.
- Hand: Homemade Apple →
--font-hand (Paper Edition marginalia only).
- Mono: IBM Plex Mono →
--font-mono (Paper Edition only).
Defaults (base.css): all h1–h6 → Playfair, weight 400, --lh-tight (1.05),
--tr-tight (-0.025em); body → Inter 400 / 16px / --lh-normal (1.5). Hero
headlines clamp(2.5rem, 7vw, 5.25rem). Type scale --fs-xs…--fs-6xl (16px base).
Eyebrows: ALL-CAPS, tracked --tr-eyebrow (0.18em).
Signature tic: display headlines often end with a terminal period
("Is this for you?", "Pricing."). Headlines are sentence-case; ALL-CAPS only for
tiny tracked eyebrow chips and meta.
Spacing, layout, radius, elevation, motion
- Spacing: 4pt grid,
--space-1…--space-32. Section rhythm .ml-section { padding-block: var(--space-20) } (5rem).
- Container:
.container = max-width: 72rem, centered, padding-inline: clamp(1rem, 4vw, 3rem). Narrow 42rem / default 64rem / wide 72rem.
- Grid: strict CSS Grid (3-col content, 4-col persona,
1fr 2fr footer, 3fr 9fr kicker splits). Primary desktop→stack breakpoint 860px (also 980/720/600/560/520/640).
- Radius:
--radius-chip 8px, --radius-input 12px, --radius-card / --radius-image 20px, --radius-pill 999px. Buttons/inputs are pills; cards/images 20px.
- Elevation — essentially no shadows by design. Depth = surface tiers (
bg → surface → surface-elevated). Cards lift on hover via transform: translateY(-2px) + border-tone shift, never box-shadow. (Only deliberate exceptions: the handbook book-cover and Paper Edition sheets.)
- Hairlines: section breaks are
1px solid var(--color-border) (warm tan), never gray.
- Motion: no libraries. Transition tokens
--t-fast/-med/-slow + --ease. .reveal → .is-revealed via IntersectionObserver (opacity + translateY(12px)→0); hero children stagger 0/80/160/240/320ms. Reduced motion fully honored (base.css + main.js).
Component patterns — compose ml-* (and page namespaces)
Build from css/components.css primitives; never reinvent in inline styles.
- Button —
<a class="ml-button ml-button-primary">Label →</a> (also -secondary, -ghost). Pill, near-black --color-accent fill / --color-bg text, hover → navy --color-accent-hover + translateY(-1px); inverts to cream on dark bands.
- Nav —
<header class="ml-nav" data-sticky="true"> → .container.ml-nav-inner with .ml-nav-logo (Playfair wordmark), .ml-nav-toggle (pill, ≤860px), .ml-nav-links. Bottom hairline appears on scroll (.is-scrolled).
- Hero —
.ml-hero with variants --bleed-overlay / --editorial-stack / --compact / --text-only. One hero drama per page (usually a navy --color-hero-dark band).
- Section header —
.ml-section-header (--left) → .ml-section-eyebrow (uppercase) + .ml-section-title (Playfair, terminal period) + .ml-section-desc.
- Card —
<a class="ml-card ml-card--library"> → .ml-card-media + .ml-card-body (.ml-card-meta eyebrow, .ml-card-title, .ml-card-desc). surface-elevated fill, 1px solid var(--color-border), 20px radius, hover translateY(-2px). Variants --persona/--portal/--library/--article/--featured-article.
- Dark CTA band —
.mh-cta-band on --color-hero-dark: centered Playfair title, cream lede, inverted CTAs.
- Footer —
.ml-footer (1fr 2fr brand/cols, tracked-uppercase column headings, © + data-year, legal nav, the .ml-footer-chain "Design chain" link on every page).
- Other primitives:
.ml-quote, .ml-filter-chip, .ml-endorsements (grayscale logo strip), .ml-stats/.ml-stat-number, .ml-qa (native <details>, +→×).
- Page-specific composition lives in
pages.css namespaces: home-*/mh-* (home), sf-*/fg-*/ss-*/flr-* (safety flow), pw-* (pathway), mp-* (pricing), sf-midnight (dark inner hero), sf-prose (editorial prose).
The 7 charter principles (always)
- Surface tiers, not shadows. 2. Typography is the hierarchy (+ optional terminal
period). 3. Pill CTAs, black fill, invert on dark. 4. One hero drama per page.
- Framed imagery, 16–20px radius. 6. Hairline structure (
1px var(--color-border)).
- Movement-leader semantics.
Avoid (drift — do not copy)
index.html, library.html, articles.html — the Alan-Hirsch leader exemplar (Tier R3, "never Movemental marketing patterns"). Different semantics; not canonical Movemental pages.movemental-paper-draft-v1.html — local-only draft with off-palette hex (--coffee etc.) and 26 inline styles. Ignore entirely.site-map.html — internal tooling with its own inline <style> and off-palette tints. Not a style reference.- Heavy inline
style= bodies on some pathway/audience pages — treat as drift to migrate, prefer namespaced classes.
- Highlighter / blue-ballpoint / marginalia vocabulary outside
data-theme="paper".
- Gray dividers (use warm
--color-border), box-shadows for depth (use surface tiers), and any hardcoded hex in page CSS/markup (resolve through tokens).
Workflow checklist
- Start every page as
class="oat-page" data-theme="oatmeal" loading the 4 CSS + JS in order.
- Compose only
ml-* / page-namespace classes; never hardcode hex — use var(--color-*).
- Playfair display headlines (sentence case, optional terminal period) + Inter UI; eyebrows ALL-CAPS tracked.
- Black pill CTAs that invert on navy bands; one hero drama per page; framed 20px imagery.
- Separate regions with warm hairlines + surface tiers; depth via
translateY(-2px) hover, not shadow.
- 4pt spacing, 72rem
.container, 860px primary breakpoint; --t-* transitions + .reveal.
- Verify against
design-chain/design-chain.html and _reference/style-spec.json; avoid the §drift pages.
1---2name: oatmeal-editorial-ui3description: Front-end UI design expert for the movemental-html-template "Oatmeal" static marketing template. Use when building or restyling any HTML page, hero, section, card, nav, CTA band, or footer to match the existing visual language. Anchors to css/tokens.css (the token SSOT), css/components.css (ml-* primitives), the design-chain/design-chain.html charter, and _reference/style-spec.json. Keywords: oatmeal, cream paper, Playfair Display, Inter, pill CTA, surface tiers, hairlines, terminal period, ml- components, design chain, static HTML, reveal-on-scroll, data-theme oatmeal.4---56# Oatmeal Editorial UI (movemental-html-template)78Use this skill whenever you create or restyle pages in this static template.9You are working inside a documented "design chain" — match it faithfully and10never hardcode values.1112## North Star1314A **premium editorial marketing site** — warm cream paper, high-contrast serif15display, disciplined Inter UI chrome, and hierarchy built from **size and spacing16rather than loud color**. Depth comes from **surface tiers, not shadows**;17structure comes from **warm hairlines**, not boxes.1819## Stack2021**Static, framework-free, no build step.** Plain HTML + hand-authored CSS + one22vanilla JS file. No Tailwind/Bootstrap/Vite. Deployed to Vercel (`/` →23`movemental-home.html`).2425**The design chain — load order is load-bearing.** Every marketing page is26`<html lang="en" class="oat-page" data-theme="oatmeal">` and loads, in order:2728```html29<!-- Google Fonts: Playfair Display + Inter + Homemade Apple + IBM Plex Mono -->30<link rel="stylesheet" href="css/tokens.css" /> <!-- L1: tokens — the ONLY file with raw hex -->31<link rel="stylesheet" href="css/base.css" /> <!-- L2: reset, body type, .container, reduced-motion -->32<link rel="stylesheet" href="css/components.css" /> <!-- L3: ml-* primitives -->33<link rel="stylesheet" href="css/pages.css" /> <!-- L4–5: page namespaces home-*/mh-*/sf-*/pw-*/mp-*… -->34<script src="js/main.js" defer></script> <!-- L6: nav, sticky, reveal, mega-menu -->35```3637**Chain rule:** changes flow downward only. Never retrofit a one-off hex from a38page back into a token; never hardcode a color/size — always `var(--…)`.3940## Source of truth (read these, in order)41421. `css/tokens.css` — **the token SSOT** (the only file with raw hex).432. `css/components.css` — the `ml-*` primitive vocabulary.443. `design-chain/design-chain.html` — the living style guide / charter (north star + 7 principles + live swatches & demos).454. `_reference/style-spec.json` (+ `.md`) — machine-readable token/style twin, ideal for programmatic reference.465. `_reference/PAGE-MANIFEST.md` — which pages are canonical (R0/R1) vs exemplar/draft.476. Golden pages: `movemental-home.html`, `movemental-pricing.html`, `pathway-safety.html`, `field-guide-safety.html`.4849## Color — tokens only (`css/tokens.css`)5051Never hardcode hex in markup or page CSS — consume `var(--color-*)`.5253| Token | Value | Role |54|---|---|---|55| `--color-bg` | `#FBFAF6` | Warm oatmeal page background |56| `--color-surface` | `#F8F6F1` | Tinted card/panel surface |57| `--color-surface-elevated` | `#FFFFFF` | White inner card layer |58| `--color-ink` | `#1A1A1A` | Primary text / near-black CTA fill |59| `--color-ink-muted` | `#5C5651` | Secondary text, captions, meta |60| `--color-accent` | `#1A1A1A` | Primary CTA fill (= ink) |61| `--color-accent-hover` | `#12356E` | Button hover (navy) |62| `--color-hero-dark` | `#0A0E1A` | Navy hero band |63| `--color-border` | `#E5DFD2` | Warm-tan hairline rules/dividers |64| `--color-on-hero` | cream `#E8ECF5` @ .78 | Text on dark hero (alpha ramp `-muted/-subtle/-faint…`) |6566Audience accents `--color-blue/-deep/-soft`; status `--color-rating-yes/-partial/-no`.67Highlighter / blue-ballpoint / AI-dock tokens are **Paper Edition only**68(`data-theme="paper"`), not standard oatmeal chrome. Temperature warm, saturation muted.6970## Typography7172- **Display:** Playfair Display → `--font-display` — headlines, wordmarks, section titles, stat numerals, large quotes.73- **Body/UI:** Inter → `--font-body` — nav, eyebrows, meta, footer, buttons.74- **Hand:** Homemade Apple → `--font-hand` (Paper Edition marginalia only).75- **Mono:** IBM Plex Mono → `--font-mono` (Paper Edition only).7677Defaults (`base.css`): all `h1–h6` → Playfair, weight 400, `--lh-tight` (1.05),78`--tr-tight` (-0.025em); body → Inter 400 / 16px / `--lh-normal` (1.5). Hero79headlines `clamp(2.5rem, 7vw, 5.25rem)`. Type scale `--fs-xs…--fs-6xl` (16px base).80Eyebrows: ALL-CAPS, tracked `--tr-eyebrow` (0.18em).8182**Signature tic:** display headlines often end with a **terminal period**83("Is this for you?", "Pricing."). Headlines are sentence-case; ALL-CAPS only for84tiny tracked eyebrow chips and meta.8586## Spacing, layout, radius, elevation, motion8788- **Spacing:** 4pt grid, `--space-1`…`--space-32`. Section rhythm `.ml-section { padding-block: var(--space-20) }` (5rem).89- **Container:** `.container` = `max-width: 72rem`, centered, `padding-inline: clamp(1rem, 4vw, 3rem)`. Narrow 42rem / default 64rem / wide 72rem.90- **Grid:** strict CSS Grid (3-col content, 4-col persona, `1fr 2fr` footer, `3fr 9fr` kicker splits). Primary desktop→stack breakpoint **860px** (also 980/720/600/560/520/640).91- **Radius:** `--radius-chip 8px`, `--radius-input 12px`, `--radius-card / --radius-image 20px`, `--radius-pill 999px`. Buttons/inputs are pills; cards/images 20px.92- **Elevation — essentially no shadows by design.** Depth = surface tiers (`bg` → `surface` → `surface-elevated`). Cards lift on hover via `transform: translateY(-2px)` + border-tone shift, never box-shadow. (Only deliberate exceptions: the handbook book-cover and Paper Edition sheets.)93- **Hairlines:** section breaks are `1px solid var(--color-border)` (warm tan), never gray.94- **Motion:** no libraries. Transition tokens `--t-fast/-med/-slow` + `--ease`. `.reveal → .is-revealed` via IntersectionObserver (opacity + `translateY(12px)→0`); hero children stagger 0/80/160/240/320ms. Reduced motion fully honored (`base.css` + `main.js`).9596## Component patterns — compose `ml-*` (and page namespaces)9798Build from `css/components.css` primitives; never reinvent in inline styles.99100- **Button** — `<a class="ml-button ml-button-primary">Label →</a>` (also `-secondary`, `-ghost`). Pill, near-black `--color-accent` fill / `--color-bg` text, hover → navy `--color-accent-hover` + `translateY(-1px)`; inverts to cream on dark bands.101- **Nav** — `<header class="ml-nav" data-sticky="true">` → `.container.ml-nav-inner` with `.ml-nav-logo` (Playfair wordmark), `.ml-nav-toggle` (pill, ≤860px), `.ml-nav-links`. Bottom hairline appears on scroll (`.is-scrolled`).102- **Hero** — `.ml-hero` with variants `--bleed-overlay` / `--editorial-stack` / `--compact` / `--text-only`. **One hero drama per page** (usually a navy `--color-hero-dark` band).103- **Section header** — `.ml-section-header` (`--left`) → `.ml-section-eyebrow` (uppercase) + `.ml-section-title` (Playfair, terminal period) + `.ml-section-desc`.104- **Card** — `<a class="ml-card ml-card--library">` → `.ml-card-media` + `.ml-card-body` (`.ml-card-meta` eyebrow, `.ml-card-title`, `.ml-card-desc`). `surface-elevated` fill, `1px solid var(--color-border)`, 20px radius, hover `translateY(-2px)`. Variants `--persona/--portal/--library/--article/--featured-article`.105- **Dark CTA band** — `.mh-cta-band` on `--color-hero-dark`: centered Playfair title, cream lede, inverted CTAs.106- **Footer** — `.ml-footer` (`1fr 2fr` brand/cols, tracked-uppercase column headings, `©` + `data-year`, legal nav, the `.ml-footer-chain` "Design chain" link on every page).107- Other primitives: `.ml-quote`, `.ml-filter-chip`, `.ml-endorsements` (grayscale logo strip), `.ml-stats`/`.ml-stat-number`, `.ml-qa` (native `<details>`, `+`→`×`).108- Page-specific composition lives in `pages.css` namespaces: `home-*`/`mh-*` (home), `sf-*`/`fg-*`/`ss-*`/`flr-*` (safety flow), `pw-*` (pathway), `mp-*` (pricing), `sf-midnight` (dark inner hero), `sf-prose` (editorial prose).109110## The 7 charter principles (always)1111121. Surface tiers, not shadows. 2. Typography is the hierarchy (+ optional terminal113period). 3. Pill CTAs, black fill, invert on dark. 4. One hero drama per page.1145. Framed imagery, 16–20px radius. 6. Hairline structure (`1px var(--color-border)`).1157. Movement-leader semantics.116117## Avoid (drift — do not copy)118119- **`index.html`, `library.html`, `articles.html`** — the Alan-Hirsch leader exemplar (Tier R3, "never Movemental marketing patterns"). Different semantics; not canonical Movemental pages.120- **`movemental-paper-draft-v1.html`** — local-only draft with off-palette hex (`--coffee` etc.) and 26 inline styles. Ignore entirely.121- **`site-map.html`** — internal tooling with its own inline `<style>` and off-palette tints. Not a style reference.122- **Heavy inline `style=` bodies** on some pathway/audience pages — treat as drift to migrate, prefer namespaced classes.123- Highlighter / blue-ballpoint / marginalia vocabulary outside `data-theme="paper"`.124- Gray dividers (use warm `--color-border`), box-shadows for depth (use surface tiers), and any hardcoded hex in page CSS/markup (resolve through tokens).125126## Workflow checklist1271281. Start every page as `class="oat-page" data-theme="oatmeal"` loading the 4 CSS + JS in order.1292. Compose only `ml-*` / page-namespace classes; **never** hardcode hex — use `var(--color-*)`.1303. Playfair display headlines (sentence case, optional terminal period) + Inter UI; eyebrows ALL-CAPS tracked.1314. Black pill CTAs that invert on navy bands; one hero drama per page; framed 20px imagery.1325. Separate regions with warm hairlines + surface tiers; depth via `translateY(-2px)` hover, not shadow.1336. 4pt spacing, 72rem `.container`, 860px primary breakpoint; `--t-*` transitions + `.reveal`.1347. Verify against `design-chain/design-chain.html` and `_reference/style-spec.json`; avoid the §drift pages.
JoshuaShepherd