---
version: alpha
name: Molo
description: Scandinavian kidswear playfulness — crisp white canvas, near-black ink, a bold sunshine-yellow brand accent and joyful secondary brights (sky, coral, leaf), generous editorial imagery, soft-rounded buttons and clean uppercase navigation. Retail e-commerce clarity with a childlike spark.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f4f0"
  ink: "#1a1a1a"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8c8c8c"

  # Brand accent — Molo sunshine yellow
  primary: "#ffd200"
  primary-hover: "#f0c400"
  on-primary: "#1a1a1a"

  # Joyful secondary brights
  sky: "#4aa8d8"
  coral: "#ff6f61"
  leaf: "#7cb342"
  berry: "#d6336c"

  # Sale / promo
  sale-red: "#e02424"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-600: "#5c5c5c"
  gray-400: "#8c8c8c"
  gray-200: "#e2e0db"
  gray-100: "#efedea"
  gray-50: "#f6f4f0"

  # On-color
  on-ink: "#ffffff"

  # Lines + dividers
  border: "#e2e0db"

typography:
  display-hero:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  nav-label:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.8px
  body-large:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.5px
  price:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  caption:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  badge-sale:
    backgroundColor: "{colors.sale-red}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-new:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  promo-banner:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    padding: 8px 16px
---

# Molo Design System

## Overview

Molo is a Danish kidswear label, and its storefront translates that heritage into a design system built around joyful clarity. The canvas is crisp white (`{colors.background}`) with near-black ink (`{colors.ink}`), giving product photography all the room it needs to do the talking. Against that calm neutral base, a single bold sunshine yellow (`{colors.primary}`) carries the brand spark — appearing on primary CTAs, promo banners, and "new" badges — while a small family of joyful secondary brights (sky blue, coral, leaf green, berry) shows up in editorial moments and seasonal storytelling.

The layout is unmistakably e-commerce: a clean uppercase navigation rail, large lifestyle hero imagery sourced from a headless CMS, and dense responsive product grids where each tile is mostly photograph with a quiet title and a confident price below. Chrome stays out of the way. Borders are thin and warm-gray (`{colors.border}`), dividers are subtle, and the visual energy comes from the children, the clothes, and the prints — not from heavy UI decoration.

Typography leans on a friendly geometric sans (Poppins as the closest Google match) with rounded letterforms that feel approachable and child-appropriate without tipping into novelty. Headings carry weight (600–700) and a touch of negative tracking for a tidy editorial feel; navigation and labels use light positive tracking in small uppercase for a boutique-retail rhythm. Body copy stays comfortable and readable at 16px.

Shapes are soft. Buttons are full pills, cards have a gentle radius, and the overall geometry rounds off the corners of an otherwise structured grid — a quiet nod to the playfulness of the products inside.

**Key Characteristics:**
- Crisp white canvas with near-black `{colors.ink}` — photography-first retail clarity
- Single bold brand accent: Molo sunshine yellow (`{colors.primary}`) for CTAs, banners, and "new" badges
- Joyful secondary brights (sky, coral, leaf, berry) reserved for editorial and seasonal moments
- Friendly rounded geometric sans (Poppins) — approachable but tidy
- Pill-shaped buttons and softly rounded cards
- Uppercase, lightly tracked navigation and labels — boutique retail rhythm
- Warm-gray thin borders and subtle dividers, never heavy chrome
- Dense, photograph-led product grids with quiet titles and confident prices

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page and card surface — lets product imagery lead.
- **Soft Stone** (`{colors.surface-soft}`): Warm off-white for alternating sections and quiet panels.
- **Ink** (`{colors.ink}`): Primary text, headings, dark buttons. Soft near-black, not pure.
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, placeholders, meta.

### Brand Accent
- **Sunshine Yellow** (`{colors.primary}`): The Molo brand spark — primary CTAs, promo banner, "new" badges.
- **Yellow Hover** (`{colors.primary-hover}`): Deeper yellow on hover/active.

### Joyful Secondaries
- **Sky** (`{colors.sky}`): Editorial accents, seasonal moments.
- **Coral** (`{colors.coral}`): Playful highlights, illustration.
- **Leaf** (`{colors.leaf}`): Eco / material storytelling.
- **Berry** (`{colors.berry}`): Girls / collection accents.

### Sale & Promo
- **Sale Red** (`{colors.sale-red}`): Discount badges and sale pricing.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted text, placeholders.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle fills.
- **Gray 50** (`{colors.gray-50}`): Section tint.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — friendly geometric sans with rounded letterforms, the closest Google match to Molo's approachable boutique-retail face.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headline — bold, slight negative tracking |
| `section-heading` | Section / category titles |
| `sub-heading` | Sub-sections, feature blocks |
| `card-title` | Product names in grid tiles |
| `nav-label` | Uppercase navigation + small labels |
| `body-large` | Editorial intros |
| `body` | Standard reading copy |
| `body-small` | Meta, secondary copy, inputs |
| `button-ui` | Buttons, CTAs |
| `price` | Product prices |
| `caption` | Badges, tags, micro-labels |

### Principles
- **Friendly but tidy**: Rounded geometric letterforms keep it child-appropriate; weight and negative tracking on headings keep it editorial, not cartoonish.
- **Uppercase navigation**: Nav and labels use small uppercase with light positive tracking (0.5–0.8px) for a boutique-retail feel.
- **Weight roles**: 400 (reading), 500 (labels/titles), 600 (headings/buttons/prices), 700 (hero).
- **Price confidence**: Prices sit at weight 600 — quietly assertive beneath the photograph.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. Product grids and section rhythm use the larger steps (`{spacing.3xl}`–`{spacing.4xl}`) for airy separation.

### Grid & Container
- Photography-led hero sections, full-bleed lifestyle imagery from a headless CMS
- Responsive product grids: 4 columns desktop → 3 → 2 on mobile
- Each tile is mostly image with a quiet title and price below
- Generous vertical rhythm between merchandising sections

### Whitespace Philosophy
- **Let the photo breathe**: White surrounds imagery; chrome stays minimal.
- **Warm neutral base**: Soft stone panels break up long pages without competing with product color.
- **Accent restraint**: Yellow and brights appear in small, deliberate doses — the products carry the color.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, product tiles |
| Hairline (Level 1) | `1px solid {colors.border}` | Inputs, dividers, nav bottom |
| Lift (Level 2) | `0 4px 16px rgba(0,0,0,0.08)` | Dropdown menus, cart drawer, hover cards |

**Shadow Philosophy**: Depth is whisper-level. Most of the interface is flat with hairline borders; shadows appear only on overlays (mega-menu dropdowns, the cart drawer) where a clear floating layer is needed. Product tiles rely on the photograph and a thin border, never a shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, alignment edges |
| `xs` | 4px | Small chips, inline tags |
| `sm` | 8px | Cards, inputs, image containers |
| `md` | 12px | Larger panels, drawers |
| `lg` | 20px | Feature cards, callouts |
| `pill` | 9999px | Buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-product}`).

### Buttons
- **`button-primary`** — Sunshine yellow fill, ink text, full pill. The headline CTA.
- **`button-dark`** — Ink fill, white text, full pill. Used in checkout / strong actions.
- **`button-secondary`** — White with ink outline, full pill. Quiet secondary action.

### Badges
- **`badge-sale`** — Sale red, white text, pill.
- **`badge-new`** — Yellow, ink text, pill — marks new arrivals.

### Cards
- **`card-product`** — White, gentle radius, thin warm-gray border. Photograph leads; title and price below.

### Inputs
- **`input`** — White surface, hairline border, soft radius. Focus deepens the border to ink.

### Navigation
- **`nav-bar`** — White sticky header, uppercase lightly tracked labels, hairline bottom border. Mega-menu dropdowns use a soft lift shadow.

### Promo
- **`promo-banner`** — Full-width yellow strip, ink text — shipping/promo messaging at the top of the page.

## Do's and Don'ts

### Do
- Keep the canvas white and let product photography lead
- Reserve yellow (`{colors.primary}`) for primary CTAs, the promo banner, and "new" badges
- Use the joyful secondaries (sky, coral, leaf, berry) for editorial and seasonal accents only
- Use full pills for buttons and badges
- Keep navigation uppercase with light positive tracking
- Use hairline warm-gray borders, not heavy chrome
- Put the price at weight 600 under each product tile

### Don't
- Don't flood the UI with the secondary brights — they're seasonal accents, not chrome
- Don't put yellow text on white (fails contrast) — yellow is a fill behind ink
- Don't add heavy shadows to product tiles — borders + photography carry them
- Don't use pure black for text — `{colors.ink}` is a soft near-black
- Don't tighten body tracking — keep reading copy relaxed at 16px
- Don't square off the buttons — the soft pill geometry is part of the playfulness

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | 2-column product grid, hamburger nav, stacked hero |
| Tablet | 600–1024px | 3-column grid, condensed nav |
| Desktop | 1024–1400px | 4-column grid, full mega-menu |
| Large Desktop | >1400px | Centered max-width, generous margins |

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav links and badges keep adequate tap spacing
- Cart and wishlist icons sit at touch-friendly sizes in the header

### Collapsing Strategy
- Navigation: full mega-menu → hamburger drawer
- Product grid: 4 → 3 → 2 columns
- Hero: side-by-side imagery → stacked full-bleed
- Footer: multi-column → stacked single column

### Image Behavior
- Full-bleed lifestyle imagery scales edge-to-edge; product photography maintains aspect ratio and thin border at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Sunshine Yellow `{colors.primary}` with ink text
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `{colors.border}` hairline
- Sale: `{colors.sale-red}`

### Example Component Prompts
- "Create a hero on white. Headline at 56px Poppins weight 700, letter-spacing -1px, color `{colors.ink}`. Yellow pill CTA (`{colors.primary}` fill, ink text, 9999px radius, 14px 28px padding) and an outline secondary pill."
- "Design a product tile: white, 8px radius, 1px `{colors.border}` outline. Full-bleed photo on top, product name at 18px Poppins weight 500, price below at 15px weight 600. Optional yellow 'NEW' pill badge top-left."
- "Build a top promo banner: full-width `{colors.primary}` strip, ink text at 12px Poppins weight 500, light letter-spacing."
- "Create navigation: white sticky header, uppercase labels 13px Poppins weight 500 with 0.8px tracking, hairline bottom border, soft-lift mega-menu dropdown."

### Iteration Guide
1. White canvas first — photography is the hero, chrome recedes
2. One brand accent: yellow for action, everything else neutral
3. Secondary brights are seasonal/editorial only, never UI chrome
4. Full pills for buttons and badges; soft radius for cards
5. Uppercase, lightly tracked nav for the boutique-retail rhythm
6. Hairline warm-gray borders, whisper-level shadows on overlays only

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Molo. Brand names and trademarks belong to their respective owners.