The palette below is ported from the website by way of the app's theme file, so the site, the app, and these documents stay one brand. The rule is simple: do not invent colours, and do not restyle the shared components per document.
Reference
Document style guide
Every Her Mood Mentor document is built from these pieces. Use what is here before inventing anything new.
Colour
Reach for the semantic names. The raw palette exists underneath them for the rare case that needs it.
--bg
#f9f1e9page ground--bg-card
#fffcf8cards--bg-sunk
#eadfd4callouts--ink
#593904body text--ink-muted
#8a7355secondary text--rule
#c8b19bborders--accent
#848241the olive--warn
#b85c00risk only
The one colour rule
Never fade a colour that carries meaning. Reducing opacity is a hue shift, not de-emphasis, and a faded olive reads as a different status entirely. Carry "inactive" with a dashed outline or a text label instead.
Type
Perfectly Nineties, headings
Headings set the tone
Perfectly Nineties Italic, emphasis
Emphasis is italic
Rethink Sans, body
Body copy runs in Rethink Sans at 17px with generous line height, because these documents are read, not skimmed.
Emphasis is italic, never bold
Wrap the emphasized word in <em> inside a heading. Lovelo and Alata were retired from the brand in May 2026 and should not appear anywhere.
Components
2
Type families
8
Semantic colours
1
Shared style block
Status pills
Live Draft Blocked Not started
Callouts
Normal
For something the reader must notice.
Warn
For genuine risk, not for emphasis.
Tables
| Component | Class | Use |
|---|---|---|
| Section card | .section-card | Landing page link through to a sub-view |
| Card | .card | A bordered content block |
| Checklist | .checklist | Progress, with li.done for complete |
Checklist
- Something finished
- Something still open
Code
wrangler pages deploy . --project-name=hmm-docs --branch=mainRules
- Overview first. The landing view is scannable in under a minute and links through to detail. Substantial documents are never one long scroll.
- No em-dashes. Anywhere, in any form. Use a comma, a period, parentheses, or two sentences.
- Never fade a colour that carries meaning. Opacity is a hue shift.
- Wide content scrolls in its own box. The page body never scrolls sideways.
- Client-facing copy stays in wellness-coach scope. No diagnosing, treating, or curing. Jes writing in her NTP voice on nutrition and lab content is the exception.
- Nothing personal on this site. There is no password here. Client-specific material goes through the platform built for it.