Not Every Mom
Design System

How tokens, dark mode, feel modes, and persona themes compose. This section is the engineering contract — read it before touching any component code.

Every surface in the product is determined by three composing layers. Higher layers override lower ones. Components should read semantic tokens — never hardcode hex values.

When a persona is active, set [data-theme="rose|vera|betsy|hazel"] on the root or a scoped container. This remaps --primary, --secondary, and --ring to the persona's palette. Works in both light and dark — the .dark class includes adjusted persona values.

The brand mark is a wreath of barbed wire intertwined with forget-me-not flowers — thorns and beauty held together. A small bee nestles in the blossoms. The wordmark sits center in Playfair Display.

Light surface · #F8F4ED

Dark surface · #2D1309

The photographic direction is warm, analog, and intimate. Ceramic mugs, wooden tables, natural light, handwritten journals. Never clinical, never stock. People are shown in private moments of quiet courage — reading, writing, reaching across a table.

Cycle-Breaker Buddy Peer matching, connection moments buddy.webp

Story Circle Group sessions, facilitated spaces circle.webp

Milestone Achievement moments, journaling milestone.webp

Most Witnessed Community highlights, reflection most-witnessed.webp

Daily Reflection Daily prompts, personal writing reflection.webp

Thread Grew Notifications, evening engagement thread-grew.webp

Hero — Mother & Daughter Landing page hero, onboarding hero-mother.jpg

Emotional Journey Feature section, about page emotional-journey-hero.jpg

Single-stroke organic illustrations in brand colors. Used as decorative accents, section dividers, and persona identifiers. Never fill — always line weight only.

Birch Leaf

Crescent Moon

Mother & Child

Heart in Hand

Flowing Waves

Chat Pattern chat-pattern.png

Photo direction rules

Do: Warm natural light, wooden surfaces, ceramic objects, handwritten text, green plants, linen textures, candlelight, steam rising from mugs.

Don't: Stock smiles, clinical settings, bright studio lighting, pristine surfaces, group shots facing camera, children's faces.

Palette range: Amber → sage → warm brown. The photography should feel like it lives inside the "Kitchen Table" feel mode.

Five brand colors anchor the system. The palette is pulled from the photography — warm wood, old parchment, pressed sage, the blue of forget-me-nots. Every color should feel like it could exist in a cabin kitchen.

Colors derived from the Village photography. These warm the base palette toward the paper-tinted, parchment aesthetic.

The whole product ships five mood variants. Same IA, different texture. Each shifts card backgrounds, paper tints, accent lines, and page warmth. Not a recolor — a mood. Set via tweaks.feel. The Library mood is the default.

Library

Hushed reverence. Parchment, warm gold. "From today's reading."

page #f8f4ed accent #d99f60

Kitchen

Warm table. Deeper amber, toasted borders. "Around the kitchen table."

page #f9f2e6 accent #c88548

Grove

Held by earth. Sage-green, mossy edges. "In the grove."

page #f2f6ef accent #5b8a63

Shore

Quiet blue calm. Powder blue, sea-glass. "At the water's edge."

page #eff7fa accent #7daebe

Dusk

Soft lavender. Purple stillness. "When the light goes low."

page #f5f1f9 accent #9882b0

Four AI personas, each with a distinct color gradient, specialty, and voice. Personas don't post in the Village — they read it to surface relevant threads in 1:1 chat.

Playfair Display for headings — literate warmth, editorial weight. Inter for body — clean, readable, unhurried. The pairing reads like a private journal: handset titles, careful running text.

Surfaces draw from the Village's analog world — linen, parchment, pressed paper. Cards sit on warm paper with soft borders. Backgrounds use subtle vertical gradients from cream to warm white.

Movement is unhurried. Two easing curves: gentle for most transitions (0.4s ease-out) and bounce for small interactive affordances. Hover to preview.

A moderated peer community for cycle-breakers. Anonymous by default. The Village ships three feel modes, four validation-only reactions, content warning veils, and a trauma-informed moderation desk. M.O.M personas don't post — they read to surface relevant threads in 1:1 chat.

Dark mode isn't an afterthought — it's a first-class skin. For a product that people use late at night, in bed, processing hard feelings, the dark surface should feel like a held space: warm dark browns, never blue-black. Core dark mode uses the repo's .dark class (Layer 2 in tokens.css). Every feel mode layers its own dark variant on top (Layer 3 via theme-system.js).

Not a library. Not a content feed. A reflective surface — what the oracles know about you, expressed as the things placed in front of you today. Mneme is felt, not seen: the hero reading wasn't chosen by category, it was placed by oracle state.

The top card is always a single article placed by the oracle engine based on emotional arc, topic salience, and life season.

A quiet "Crisis lines · 24/7" button is always visible in the Resources masthead.

A small embedded control lets users choose their skin: 5 feel modes × 2 brightness levels = 10 skins. The choice persists to localStorage. The switcher lives inline in the page header — a subtle dot that expands to reveal color choices and a light/dark toggle.

Each dot × light/dark = 10 total skins. Try it now — the switcher is in the header above. ↑