Foundations · Color
Color.
A warm cream foundation and charcoal for type. Stage-specific hues that do the wayfinding work.
The full color family.
Every brand color in one read. Row by row: the warm-neutral base, then sage as the secondary neutral (carrying a light step, a deep step, and a saturated POP for General Wellness), then the three life-stage families — each carrying a light step, a mid step, a deep step, and a saturated POP for emphasis. Extensions close the system with the powder/snow surfaces used in flavor and clinical contexts.
Base
Cream
F2EDE4
Linen
E3DDCC
Charcoal
2A2820
Moody Plum
4F4050
Sage—General Wellness, e-comm chrome
Sage Light
E7EDE9
Sage Deep
BAC9BF
POP
6FEDBF
Lilac—Pregnancy stages
Bleached
FBEDF7
Mid Lilac
E3CBE3
Moody Lilac
9C8DB5
POP
E6A6E6
Coral—Postpartum, Mom Multi, Women’s Daily
Petal
FFCECA
Melon
FF8080
Clay
EE857D
POP
FF5C7A
Yellow—TTC, Conception, Recovery, Egg Freeze
Parchment
F5F0D8
Buttercup
F3E58A
Warm Straw
E8DB84
POP
F5D000
Extensions—Hydration, flavor cues, clinical surfaces
Powder
C8DEE5
Peach
FFBBA5
Snow
EFF2F3
Base neutrals.
Use warm neutrals for backgrounds, surfaces, and type. Layouts start here before life-stage color is added.
| Token | Hex | Use | |
|---|---|---|---|
| --p-bone | #FCFAF8 | Page background. Default canvas. | |
| --p-cream | #F2EDE4 | System foundation. Surface fill, packaging. | |
| --p-ivory | #F7F4EF | Frame tint, secondary surface. | |
| --p-linen | #E3DDCC | Warm taupe. Secondary neutral. | |
| --p-charcoal | #2A2820 | All type. Logotype. Warm-toned. |
Sage.
Sage is the secondary neutral: it sits alongside the warm neutrals and keeps the palette from skewing overly beige. Two steps: a light tone for the top nav on e-comm, a deeper tone for the footer bookend.
| Token | Hex | Use | |
|---|---|---|---|
| --p-sage-light | #E7EDE9 | Top nav background on e-comm. | |
| --p-sage-deep | #BAC9BF | Footer background on e-comm. Deeper sibling, used as a quiet bookend. |
Life-stage colors.
Each life stage has its own family of three tones: a light step for tinted backgrounds, a mid step for fills, a deep step for accents. Use a single family per surface. The exception is a deliberate cross-stage hero zone, like the home-page accordion that shows every life stage together.
| Token | Hex | Use | |
|---|---|---|---|
| --p-bleached-lilac | #FBEDF7 | Pregnancy. 1st Trimester surface and tinted backgrounds. | |
| --p-mid-lilac | #E3CBE3 | Pregnancy. 2nd Trimester fill. | |
| --p-moody-lilac | #9C8DB5 | Pregnancy. 3rd Trimester accent, deepest lilac. | |
| --p-petal | #FFCECA | Motherhood. Soft surfaces and tinted backgrounds. | |
| --p-melon | #FF8080 | Motherhood. Hero life-stage primary, locked CTA fill (charcoal type, WCAG AA / AAA large). | |
| --p-clay | #EE857D | Motherhood. Deeper fills and accents. | |
| --p-parchment | #F5F0D8 | TTC. Tinted backgrounds. | |
| --p-buttercup | #F3E58A | TTC. Fills and cards. | |
| --p-warm-straw | #E8DB84 | TTC. Hero life-stage primary. |
Flavor & clinical cues.
| Token | Hex | Use | |
|---|---|---|---|
| --p-powder | #C8DEE5 | Pea powder. Vanilla-flavored protein accent. | |
| --p-peach | #FFBBA5 | Flavor-specific cue. | |
| --p-snow | #EFF2F3 | Clinical card backgrounds. |
Hero family compositions.
Each family carries three tones working together: a light step that opens space, a mid step that does the heavy lifting, a deep step that grounds and accents.
Lilac family · Pregnancy
The pregnancy family. Bleached lilac for 1st Trimester surfaces and tinted backgrounds; mid lilac for 2nd Trimester fills; moody lilac for 3rd Trimester accents and pregnancy-end depth.
Coral family · Motherhood
The motherhood family, carried across Mom Multi and Women's Daily. Petal for soft tinted surfaces; melon as the hero life-stage primary and locked CTA fill; clay for deeper fills and accents. Type sits in charcoal across the family (brand-aligned, WCAG-compliant): see the Coral CTA review for the math.
Yellow family · Trying to conceive
The TTC family, carried across Egg Freeze and Recovery. Parchment for tinted backgrounds; buttercup for fills and cards; warm straw as the hero life-stage primary.
Highlight.
One saturated pop per color family — the three life stages plus sage for General Wellness — tuned for screens. Highlights are the deliberate exception to the quiet palette: reach for them only where a muted tint can't perform, like an accent on a dark surface, an active state, or a point of data-viz emphasis. They are rare by design. Used sparingly they carry weight; used broadly they undo the system.
| Token | Hex | Use | |
|---|---|---|---|
| --p-highlight-lilac | #E6A6E6 | Pregnancy pop. Charcoal type. Lilac family. | |
| --p-highlight-coral | #FF5C7A | Motherhood pop. Cream type. Coral family. | |
| --p-highlight-yellow | #F5D000 | TTC pop. Charcoal type. Yellow family. | |
| --p-highlight-sage | #6FEDBF | General Wellness pop. Charcoal type. Sage family. |
Highlight in use.
Each example shows a moment where a highlight earns its place: the signal needs to register immediately, or it sits on a dark or photographic surface where the muted palette can't carry it.
Do — the cart count badge on the top-nav cart icon, over the live homepage.
Do — status dot, coral (Motherhood), on petal (lightest coral).
Do — status dot, lilac (Pregnancy).
Do — status dot, yellow (TTC), on parchment.
Do — status dot, sage (General Wellness), on sage-light.
Do — a verified or clinical signal on a dark surface.
Do — a real-time signal over a dark or photographic surface.
On light — the lilac dims to ~1.6:1; reads as ambient, not as a pop.
Do — a drop or sale tag over a busy image; the yellow holds where text wouldn't.
Do — the playhead on a dark media scrubber.
On light — the lilac playhead recedes into the surface; coral is the more legible choice on light backgrounds.
Do — a trend delta over a darkened image; the coral still cuts through.
Do — today/fertile marker on the deepest lilac.
Do — a pulsing honing signal on a dark map.
Do — a toggle in its on state on a dark UI.
Do — a numbered hotspot over an editorial image.
Do — an active reaction or like over a community photo.
Do — a progress ring on a dark dashboard.
Pop across surfaces.
Badge, status, tag, delta, and check — five highlight use cases tested on cream, each family's own tint, sage, and plum. On any light or mid surface, none clears WCAG's 3:1 bar: coral holds the most at about 2.5:1 on cream (dipping to 2.1:1 on its own petal tint), sage sits around 1.9:1, while lilac (1.6:1) and yellow (1.3:1) all but vanish. On plum, every one reads instantly — confirming these are dark-surface colors.
Usage Rules.
- Family disciplineOne life-stage family per surface. The exception is a deliberate cross-stage hero zone, like the home-page accordion that shows every life stage together.
- CTA legibilityCharcoal type on every Coral family fill (Petal, Melon, Clay). Pure black is never used; white type fails AA on all three. See Legibility Testing for the math.
- Sage as chromeSage is the secondary neutral: top-nav and footer bookends. Not a content fill or hero color.
- Colors stay flatAll colors are flat tokens. Do not tint, shade, or gradient them.
- Highlight disciplineHighlight colors are digital-only and screen-optimized. Accents on dark surfaces, active states, and data-viz emphasis only. Never on product, large fields, print, body, CTAs, or wayfinding. One per surface, at most.
Color in use.
A reference composition showing how each family meets type across surfaces.
