mamacool design
living styleguideSingle 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
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.
Radius
The theme's ramp: snap to the nearest step, never invent an in-between.
Components
.mc-wordmark · 16px tall, width free (1188:144 svg) · pages add spacing only
Redesigning postpartum recovery
.mc-tagline · .95rem / 1.5 · 75% ink · the sentence under the wordmarkSleep
Feeding
Know a mom who couldn't make it?
Your code DALLAS10 works until Monday, August 24.
Your mamalist is taking shape
Save your list so you can pick up where you left off on any device.
| slug | status | clicks |
|---|---|---|
| dallas | live | 1,204 |
| austin | draft | 87 |
| nyc | off | 12 |
Content section: survey phases, upload forms. 22/24 pad, 30 radius.
Top bar: customer pages that aren't the store (survey, upload) carry
.mc-topbar — 60px bar, logo at the theme's 100px logo_max_width,
linking home. Not on unlock (conversion interstitial), hq (it is the menu), or
store-embedded widgets.
Layout: every standalone page is body.mc-page +
one .mc-shell column (--content 640 · --linktree 480 ·
--interstitial 400 · --admin 860 · --media 1100,
tight gutters so a map or video runs near edge-to-edge on mobile — mamamap only for now). The admin menu is the shared
admin-nav.js; customer pages are deliberately menu-less.
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.
Reviews waiting for you
Reviews waiting for you
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.
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.
How many hours are you sleeping?
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.
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: ★☆ · × ✓. No arrows on labels — the theme only uses arrows as navigation controls (carousels, back), never decorating buttons, links, or cards.
- 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.