# Oatmeal Editorial UI
> 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.
- Skill: `joshuashepherd/oatmeal-editorial-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add joshuashepherd/oatmeal-editorial-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/joshuashepherd/oatmeal-editorial-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: JoshuaShepherd (https://skillmd.com/u/joshuashepherd)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/joshuashepherd/oatmeal-editorial-ui
---
# 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
`` and loads, in order:
```html
```
**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)
1. `css/tokens.css` — **the token SSOT** (the only file with raw hex).
2. `css/components.css` — the `ml-*` primitive vocabulary.
3. `design-chain/design-chain.html` — the living style guide / charter (north star + 7 principles + live swatches & demos).
4. `_reference/style-spec.json` (+ `.md`) — machine-readable token/style twin, ideal for programmatic reference.
5. `_reference/PAGE-MANIFEST.md` — which pages are canonical (R0/R1) vs exemplar/draft.
6. 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** — `Label →` (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** — `` → `.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** — `` → `.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 ``, `+`→`×`).
- 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)
1. 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.
5. Framed imagery, 16–20px radius. 6. Hairline structure (`1px var(--color-border)`).
7. 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 `