MaMile logo MaMileBrand Kit

Movement for every stage of motherhood.

The MaMile brand kit — logo, color, type, imagery, voice, and tokens. Built so any designer or AI can pick it up and stay on-brand. Toggle light/dark above.

🌸 Warm🫶 Kind🌿 Calm✓ EncouragingNo pace shaming

Philosophy

Kind consistency over performance

MaMile is a walking & running tracker for the whole motherhood arc — trying to conceive, pregnancy, and postpartum. Mainstream trackers reward speed, distance, and PRs. For moms, that's the wrong incentive. We reframe the win as showing up.

Mission

Help moms build a gentle movement habit and real connection through every stage — without bounce-back pressure.

Personality

Warm, calm, encouraging. Mom-coded, not saccharine. Honest empty states over fake hype. Never preachy.

Promise

Today counts — even if today is three minutes with the stroller. Your pace, your stage, your win.

Voice & tone

How MaMile talks

Plain and kind. Meet her where she is. Celebrate tiny wins. Never shame, never pressure, never compare.

Say this

  • “Showing up is the win.”
  • “Today counts.”
  • “At your stage, at your pace.”
  • “Gentle” · “tiny win” · “your crew/pod”
  • “No pace shaming, ever.”

Never this

  • “Bounce back” / “snap back”
  • “Crush it” / “no excuses” / “shred”
  • PRs, leaderboards framed as competition
  • Weigh-ins, calorie guilt
  • Streak-shame for missing a day

Taglines

“Movement for every stage of motherhood.”
“Today's the day — even if today is three minutes with the stroller.”
“Kind, consistent movement that meets you where you are.”

Logo

The mark

A continuous navy line forming a heart that flows into a mother's profile, on a warm peach rounded square. One solid background — never an inner border or box. Keep clear space ≈ 25% of the mark on all sides. Minimum size 24px.

MaMile icon on peach
App icon · peach BG (primary)
MaMile icon on light
On warm off-white
MaMile icon on dark
On warm dark
icon.png (1024) logo-128.png apple-touch (180) favicon-32 og image (1200×630)

Do

  • Keep the peach background solid & full-bleed
  • Use generous clear space
  • Pair with the Fraunces wordmark “MaMile”

Don't

  • Recolor the navy line or peach
  • Add shadows, borders, or an inner box
  • Stretch, rotate, or place on busy photos

Color

Palette · click any swatch to copy hex

Warm, low-saturation, grounded in terracotta + off-white. Accents do the work; neutrals stay quiet.

Brand & accent

Neutrals (light)

Neutrals (dark theme)

Supporting & semantic

Gradients

Warm Bloom · #E8C5BC → #F3DCD3 → #FBF7F2
Terracotta · #C97B6A → #A85B4A

Imagery

Custom photography — golden hour, real moms, no stock clichés

Every image in the kit is custom and on-palette: warm low sun, terracotta + sage + cream wardrobe, soft greenery, and moms who look like real people mid-habit — walking, resting, laughing. Faces are warm, never posed-corporate. No gym mirrors, no race bibs, no “bounce back” bodies.

Page heroes & section bands

Three moms walking a sunlit trail together — one pregnant, one carrying her newborn in a wrap, one postpartum.
hero-walk.webpHomepage & funnel heroes — the every-stage walk, all three stages side by side.
A pod of five moms laughing together on a picnic blanket in a park while a baby crawls in the middle.
pods-circle.webpCommunity & Pods sections — belonging, encouragement-only energy.
A pregnant mom and her birth-care professional walking arm in arm along a sunlit garden path.
partners-care.webpPartners page hero — professional care extended between appointments.
A woman on a quiet golden-hour neighborhood walk, tote bag over her shoulder.
stage-ttc.webpTTC stage pickers & cards — calm, hopeful, unhurried.
A pregnant woman walking a coastal path at sunset, one hand resting on her bump.
stage-pregnant.webpPregnancy stage pickers & cards — gentle movement, big sky.
A new mom pushing a stroller through soft woodland light.
stage-postpartum.webpPostpartum stage pickers & cards — stroller walks count.

Article heroes (match by slug meaning)

A mom stepping out her front door with her newborn snuggled in a terracotta sling.
art-newborn.webpNewborn-era articles — first steps out the door.
A smiling mom jogging at an easy pace on a tree-lined trail.
art-run-return.webpReturn-to-run articles — easy pace, real joy.
A woman stretching in a misty sunrise meadow beside a winding path.
art-ttc-movement.webpTTC & movement articles — soft mornings, open road ahead.
A postpartum mom on a gentle neighborhood walk with her baby in a front carrier.
art-safe-after-birth.webpWalking-after-birth articles — gentle, safe, close to home.
A pregnant woman pausing on a wooden footbridge to drink water beside a river.
art-trimester.webpTrimester-guide articles — pacing, hydration, listening to your body.
Two moms with strollers laughing together on an autumn sidewalk.
art-together.webpFriendship & accountability articles — movement is better with a mom friend.

Do

  • Use golden-hour warmth and the terracotta/sage/cream wardrobe
  • Ship the -sm variant in srcset for cards; full size for heroes
  • Always set width/height, loading="lazy" (below the fold), decoding="async", and honest alt text

Don't

  • No stock-fitness clichés — gyms, race bibs, weigh-ins, “bounce back” bodies
  • Don't place the logo or dense text over busy areas of a photo
  • Don't cool-shift or desaturate — imagery stays warm like the palette

Convention: every asset ships as name.webp (full, 1600w heroes / 1000w squares) + name-sm.webp (640w). Example: <img src="/assets/img/hero-walk.webp" srcset="/assets/img/hero-walk-sm.webp 640w, /assets/img/hero-walk.webp 1600w" sizes="…" width="1600" height="893" alt="…">

Typography

Fraunces + system sans

A warm high-contrast serif (Fraunces) for display & emotional lines; the native system sans for body & UI — fast, familiar, legible at every size.

Fraunces · 600 · display
Today's the day.
Fraunces · 500 italic · emotional accent
I show up for myself.
System sans · 400 · body
Gentle walks and real mom friends, matched to your stage. No pace shaming, no PRs you can't hit right now — just kind, consistent movement that meets you where you are.

Type scale

Display / Fraunces 600Aa
H2 / Fraunces 600Aa
H3 / Fraunces 600Aa
Body / sans 400 · 16–17Aa
Label / sans 600 capsLabel

Design tokens

Drop-in CSS variables

Copy these into any project. Light values shown; dark overrides included. Spacing runs on an 8px scale — use the steps, not arbitrary values, and keep section padding generous.

:root{
  --mm-ink:#2A2723;        /* text / headings        */
  --mm-bg:#FBF7F2;         /* warm off-white surface */
  --mm-cream:#F3ECE2;      /* section / card fill    */
  --mm-line:#EDE5DA;       /* hairline borders       */
  --mm-muted:#7A726A;      /* secondary text         */
  --mm-accent:#C97B6A;     /* terracotta rose (CTA)  */
  --mm-accent-deep:#A85B4A;/* hover / emphasis       */
  --mm-accent-soft:#E8C5BC;/* tints / chips          */
  --mm-sage:#9CAE9A;       /* calm secondary         */
  --mm-success:#7E9A6E; --mm-warning:#D4A574; --mm-danger:#B85C5C;
  --mm-navy:#16244A;       /* logo line only         */
  --mm-radius:18px; --mm-radius-pill:999px;
  --mm-shadow:0 18px 50px rgba(169,91,74,.16);
  --mm-serif:"Fraunces",Georgia,serif;
  --mm-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* spacing — 8px scale */
  --mm-s1:8px; --mm-s2:16px; --mm-s3:24px; --mm-s4:32px;
  --mm-s5:40px; --mm-s6:48px; --mm-s8:64px;
  --mm-sec-pad:clamp(72px,10vw,128px); /* section padding */
  /* motion — gentle, 200–300ms ease-out; honor reduced motion */
  --mm-ease:cubic-bezier(.22,.61,.36,1); --mm-dur:240ms;
}
[data-theme="dark"]{
  --mm-ink:#F4ECE4; --mm-bg:#201C19; --mm-cream:#2A2521;
  --mm-line:#3B342E; --mm-muted:#B5ADA3;
}
@media (prefers-reduced-motion:reduce){
  :root{ --mm-dur:1ms; }
}

Buttons

Primary = terracotta gradient pill, white text. Ghost = surface + hairline. Radius: pill for actions, 18px cards, warm shadow on lift.