mamacool design

living styleguide

Single source of truth for every mamacool page. Tokens come from the live Shopify theme (settings_data.json + css-variables.liquid) via public/brand.css; the rules live in DESIGN.md. Never sample colors from screenshots.

Color

bg#fee2c7theme menu/section bg

surface#fff5eatheme scheme-1 · cards, inputs

ink#0b0b0btext + borders · never #000

peach#ffbe98theme accent · focus, hovers

pink#ffb1betheme accent · pills, badges

maroon#752329theme scheme-3 · stats, emphasis

error#d02e2etheme sale/checkout error

success#56ad6atheme --COLOR-SUCCESS

status · pending#ffe9b3our extension

status · published#bfe3c5our extension

status · rejected#f4c7bbour extension

muted / track#dcc7b1our extension

Type

Petrona 500 headings (theme: petrona_n5) · Space Mono 400 body (theme: space_mono_n4) · Kalam accent (theme: kalam_n4). Self-hosted woff2 in /fonts — no third-party requests. Admin data tables may drop to system-ui for density; chrome stays on brand.

h1 · petrona 500 · 2.4remRedesigning postpartum recovery

h2 · petrona 500 · 1.7remReviews waiting for you

h3 · petrona 500 · 1.35remThe soothe pad

h4 · petrona 500 · 1.15remShipping and returns

body · space mono 400 · 1rem / 1.5625No one warns you about this stuff — so we ask real mamas and share what they say.

accent · kalam 400 · sparinglyyou've got this, mama

label ramp · .8 / .68 / .62 / .58 · caps · +.075em label large label medium label small label tiny

Radius

The theme's ramp: snap to the nearest step, never invent an in-between.

pill 999

card 30

panel 22

dense 14

subtle 8

tick 4

Components

default accent selected pending published rejected hidden

148answers so far

slug	status	clicks
dallas	live	1,204
austin	draft	87
nyc	off	12

nothing here yet

Accent direction standard: option B

Picked 2026-08-02. Buttons stay ink; pink/peach live in the details (pills, focus rings, selection, hovers); maroon is for stats and emphasis only.

Option A — bold (not picked)

Reviews waiting for you

12 pending reviews

approve all 5★ view queue

soothe pad peri bottle the kit

Option B — details · standard

Reviews waiting for you

12 pending reviews

approve all 5★ view queue

soothe pad peri bottle the kit

Data hierarchy standard: option 1

Picked 2026-08-02: serif-led. Questions in Petrona 600 (~1.05rem, .95rem in dense admin lists), answers in .85rem Space Mono, meta as .62rem caps at 55% ink. Applied on the reviews wall, moderation queues and survey results.

Option 1 — serif-led · standard

Amy R · verified · the soothe pad · ★★★★★

How was the cooling relief?

Instant. I kept two in the freezer and rotated them all week.

Would you recommend it to another mama?

Already have — my sister got the kit before her due date.

Survey · sleep, week 3 · 148 answers

How many hours are you sleeping?

under 4h38%

4–6h47%

6h+15%

Option 2 — weight-led (not picked)

Amy R · verified · the soothe pad · ★★★★★

How was the cooling relief?

Instant. I kept two in the freezer and rotated them all week.

Would you recommend it to another mama?

Already have — my sister got the kit before her due date.

Option 3 — label-led (not picked)

Amy R · verified · the soothe pad · ★★★★★

How was the cooling relief?

Instant. I kept two in the freezer and rotated them all week.

Would you recommend it to another mama?

Already have — my sister got the kit before her due date.

The rules

No emojis. Anywhere. UI, emails, notifications. Functional glyphs are fine: ★☆ · × → ✓.
Ink is #0b0b0b, never #000. Backgrounds/surfaces come from the token sheet — never resample from screenshots.
Headings are Petrona. Fraunces was never the brand font.
Customer pages: Space Mono body. Admin data tables may use system-ui — the chrome stays on brand fonts.
Labels come in four sizes only: .58 / .62 / .68 / .8rem, uppercase, +.075em (subheads +.1em).
Radii snap to the ramp: 999 / 30 / 22 / 14 / 8 / 4.
Titles read mamacool — thing; admin pages carry noindex.
Widget CSS reads theme vars first, brand values as fallbacks — keep that order.
Copy follows TONE.md. Styling follows DESIGN.md.

To edit in Figma: open this page and import it with the html.to.design plugin — it lands as editable frames with the real fonts and tokens. Tokens: public/brand.css · rules: DESIGN.md · this page: public/brand.html.