# Oatmeal Template Audit > Audit and refine an HTML page in `1-html/by-template-family/ml-templates/oatmeal/` against the canonical Oatmeal template fingerprint — tokens, primitives, components, layout vocabulary, decorative motifs. Use whenever a new page is built in the oatmeal directory, when a page is being refined for template fidelity, or when the user says "make this look like the oatmeal template," "audit this against oatmeal," "is this on-brand for oatmeal," or "apply oatmeal styling." Complements `movemental-page-auditor` (which judges narrative/proof) and `page-audit` (which judges DESIGN.md compliance) — this skill judges **template fidelity only**. - Skill: `joshuashepherd/oatmeal-template-audit` (Agent Skill) - Install (CLI): `npx skillmds@latest add joshuashepherd/oatmeal-template-audit` - Raw SKILL.md: https://api.skillmd.com/api/skills/joshuashepherd/oatmeal-template-audit/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: JoshuaShepherd (https://skillmd.com/u/joshuashepherd) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/joshuashepherd/oatmeal-template-audit --- # Oatmeal template audit A focused audit pass that confirms a single page is built from the Oatmeal template's design language as documented in `_reference/style-spec.md` and embodied in `css/tokens.css`, `css/base.css`, `css/components.css`, and the canonical demo pages `index.html` / `library.html` / `articles.html`. This skill does **not** judge content quality, narrative sequencing, or proof burden — only whether the page reads as Oatmeal-native at a glance and uses the template's primitives correctly. --- ## When this skill triggers - "Audit this page against oatmeal" - "Make this match the oatmeal template" - "Is this on-brand for oatmeal?" - "Apply oatmeal tokens / primitives / components / layouts" - "Run the oatmeal audit across these pages" - A new page lands in `1-html/by-template-family/ml-templates/oatmeal/` and the user wants it brought to template fidelity - Refining a movemental-specific page (sandbox/skills/solutions/pricing/etc.) that was built quickly and may have drifted Do **not** trigger for: - Content/copy review (use `movemental-page-auditor` or `alan-voice`) - React-component design questions (use `design-audit`) - Pages in other template families (`tides`, `terminal`, etc.) --- ## The Oatmeal fingerprint A page is "Oatmeal-native" when, looked at from across the room, you'd recognize it. The fingerprint has six load-bearing traits: ### 1. Palette discipline - **Cream `#EFEADC` is the dominant page surface.** ~70% of vertical pixels. - **Dark olive `#2D3A2A` is reserved for two roles only:** the hero bleed-overlay and the bottom CTA "midnight" band. Using it anywhere else dilutes its signal. - **`#F6F2E8` is the inset tint** for cards-on-cream and tinted bands. - **`#FFFFFF` appears for white surfaces ONLY on tinted sections** (not on the main cream). - **`#0E0E0E` near-black is the only ink color.** `#6B6358` for muted ink. Tokens: `--color-bg`, `--color-hero-dark`, `--color-surface`, `--color-surface-elevated`, `--color-ink`, `--color-ink-muted`, `--color-border`. Do not introduce new color values; if you find a hex literal in HTML that is not one of these tokens, that's a deviation. ### 2. Typography rules - **Display = Fraunces**, body = Inter, no third face. - **Sentence case** for both display and body. ALL-CAPS only for tiny eyebrow chips and stat labels. - **Display headlines tend to end with a terminal period.** This is the single most identifiable Oatmeal tic. (`Pricing.` not `Pricing`; `Customer support that feels like a conversation.`) - **Italics are rare.** Use the italic Fraunces variant sparingly — for one or two highlighted words inside a headline, or for an editorial pull quote. Do not italicize whole paragraphs or routine emphasis. - **Tracking:** display is tight (`-0.02em`); body is normal; eyebrows use `0.18em` letterspacing. ### 3. Layout & rhythm - Single container, `max-width: 72rem` (`var(--container-wide)`). - **Section pad-block = `var(--space-20)`** (canonical) or `var(--space-16)` for tighter bands. - Section dividers are **hairlines** (`1px solid var(--color-border)`), not heavy borders. - Three-up grids are the default for content blocks on desktop; collapse to one column under 860px. - **Generous whitespace.** Stat cards and section headers expect room around them. ### 4. Component vocabulary Pages should reuse these existing primitives before introducing new ones: | Pattern | Class | When to use | |---|---|---| | Sticky nav | `.ml-nav[data-sticky="true"]` | Every page | | Buttons | `.ml-button .ml-button-primary` / `-secondary` / `-ghost` | All CTAs — always pill, always one of three variants | | Hero (centered) | `.ml-hero--editorial-stack` or `.ml-hero--text-only` | Most pages | | Hero (dark) | `.ml-hero--bleed-overlay` | Home/index pages only | | Section header (centered) | `.ml-section-header > .ml-section-eyebrow + .ml-section-title + .ml-section-desc` | Default section intro | | Card | `.ml-card .ml-card--persona / --portal / --library / --article` | Content tiles | | Quote | `.ml-quote .ml-quote-text + .ml-quote-cite` | Cream-on-cream testimonials | | Stat | `.ml-stats .ml-stat-number + .ml-stat-label + .ml-stat-desc` | Numerical proof | | Q&A | `.ml-qa .ml-qa-item` (HTML `
`) | FAQ blocks | | Endorsements | `.ml-endorsements .ml-endorsements-grid` | Logo strip | | Footer | `.ml-footer .ml-footer-inner` | Every page | Movemental sub-language extensions (kept consistent across the family): | Pattern | Class prefix | Pages it lives on | |---|---|---| | Movemental home | `mh-*` | `movemental-home.html` | | Safety flow shared | `sf-*` | safety pages, pathway pages | | Field guide | `fg-*` | `field-guide-*.html`, pathway field guide blocks | | SafeStart | `ss-*` | `about-safestart.html` | | Five-Layer Read | `flr-*` | `pathway-safety.html` | | Pathway shared | `pw-*` | `pathway-sandbox.html`, `pathway-skills.html`, `pathway-solutions.html` | | Pricing | `mp-*` | `movemental-pricing.html` | Use the existing prefix that matches the page's role. **Do not introduce new namespaces** for one-off variations. ### 5. Decorative motifs (use) - Terminal period on display headlines - Hairline rules between major sections - Small tracked uppercase eyebrows — short phrases ("Why this work", "Movement Voices", "Pricing"), never sectioned with `§ 01 ·` or similar manuscript decorators - Stat callouts (big serif numeral + tiny uppercase label) - Italic em on one or two words in a headline for emphasis - Optional cream-on-cream pull quote (`.ml-quote`) for testimonials ### 6. Decorative motifs (avoid) - `§ NN ·` section numbering in eyebrows - Dark olive used for testimonials, callouts, or feature blocks — it's reserved for hero + bottom CTA band - Italic body paragraphs (one or two words is OK; whole sentences is a code smell) - Inline `style="color: #..."` overrides — use a class - Drop shadows or elevations beyond `translateY(-2px)` on hover - Aggressive borders (`2px`, dashed for primary structure, etc.) — hairlines or nothing - Tier badges, "Most popular" stickers, urgency pills - Color used for hierarchy (Oatmeal uses size + spacing contrast, not color contrast) --- ## How to run the audit For each target page: ### Pass 1 — Tokens Grep the HTML and any inline `