---
version: alpha
name: Make Good
description: Warm-cream editorial e-commerce — Athletics grotesque paired with Editorial New display serif, near-black ink on a #fffef7 paper canvas, electric chartreuse (#E9FF7C) as the single jolt of color, and sharp 0px corners that read like a printed lookbook.
colors:
  # Canvas + ink
  background: "#fffef7"      # warm paper cream — the signature canvas
  surface: "#ffffff"
  surface-soft: "#f4f4f4"
  ink: "#000000"             # near-pure black for type and chrome
  ink-secondary: "#6b7280"  # muted grey for captions / meta

  # Signature accent
  accent: "#e9ff7c"          # electric chartreuse — highlight, hover, eyebrow flag
  on-accent: "#000000"       # black text on the lime accent

  # Neutral scale
  neutral-100: "#f4f4f4"
  neutral-200: "#ededed"
  neutral-300: "#e5e5e5"
  neutral-400: "#d2d2d2"
  neutral-500: "#9ca3af"

  # On-color
  on-ink: "#fffef7"          # cream text on black
  on-surface: "#000000"

  # Borders
  border: "#e5e5e5"          # hairline dividers on cream

typography:
  display-serif:
    fontFamily: "Editorial New, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -1.5px
  hero:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.4px
  eyebrow:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Athletics, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

components:
  # Primary CTA — black block, sharp corners
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Accent CTA — lime jolt
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — outlined on cream
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Pill add-to-cart variant (where rounded is used)
  button-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Eyebrow flag — the lime tag above headings
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  # Product / editorial card — flat, no shadow
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Testimonial / quote card on soft surface
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 24px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.ink}"

  # Top nav bar — cream, hairline divider
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Make Good Design System

## Overview

Make Good is a plant-based footwear and goods brand whose website reads like a printed lookbook that learned to scroll. The whole canvas sits on `{colors.background}` — a warm paper cream (`#fffef7`) rather than clinical white — which immediately signals craft, sustainability, and the natural-materials story at the heart of the brand. Against that cream, near-black `{colors.ink}` type and full-bleed product photography carry the page, while a single electric chartreuse (`{colors.accent}`) supplies the only saturated color in the system. The restraint is the point: one warm neutral, one black, one acid-bright pop.

Typography is a deliberate two-voice conversation. **Athletics**, a contemporary grotesque, handles nearly everything — navigation, body copy, buttons, product names — with tight tracking and confident weight. **Editorial New**, a high-contrast display serif, steps in for the largest editorial moments, lending magazine-cover gravitas to headlines and pull quotes. The pairing of a no-nonsense grotesque with a refined fashion serif is the brand's typographic signature: utilitarian and aspirational at once.

The geometry is editorial-sharp. Corners default to `{rounded.none}` (0px) — product cards, buttons, image frames, and inputs all sit square, echoing the gridded rigor of print layout. Pill radius (`{rounded.pill}`) exists only for occasional commerce affordances like add-to-cart chips. There is almost no shadow or elevation; separation comes from hairline `{colors.border}` dividers, generous whitespace, and the contrast between cream and imagery. Nothing floats — everything is set, like type on a page.

The accent chartreuse is used as punctuation, not decoration. It flags eyebrows, highlights an active state, or charges a single CTA — a jolt of energy against the calm cream that keeps the otherwise quiet palette from feeling sleepy.

**Key Characteristics:**
- Warm paper-cream canvas (`{colors.background}` `#fffef7`) instead of pure white — craft and warmth
- Two-voice type: Athletics grotesque for UI/body, Editorial New serif for display headlines and quotes
- Single electric chartreuse accent (`{colors.accent}`) used as punctuation only
- Sharp 0px corners everywhere — editorial, print-grid rigor
- Near-zero shadow; separation via hairline dividers and whitespace
- Full-bleed product photography carrying the layout
- Tight negative tracking on large type for fashion-editorial tension

## Colors

### Canvas & Ink
- **Paper Cream** (`{colors.background}`): The signature canvas — warm off-white that grounds the whole brand.
- **White** (`{colors.surface}`): Product card and image surfaces where a cleaner base is needed.
- **Soft Surface** (`{colors.surface-soft}`): Testimonial and secondary blocks.
- **Ink Black** (`{colors.ink}`): Primary type, buttons, nav, dividers in heavy contexts.
- **Secondary Ink** (`{colors.ink-secondary}`): Muted grey for captions and meta text.

### Accent
- **Chartreuse** (`{colors.accent}`): The lone saturated color — eyebrow flags, highlights, energy CTAs. Always paired with `{colors.on-accent}` black text.

### Neutral Scale
- **Neutral 100** (`{colors.neutral-100}`): Soft section backgrounds.
- **Neutral 200** (`{colors.neutral-200}`): Subtle fills.
- **Neutral 300** (`{colors.neutral-300}`): Dividers, image frames.
- **Neutral 400** (`{colors.neutral-400}`): Disabled / muted borders.
- **Neutral 500** (`{colors.neutral-500}`): Placeholder text.

### On-Color & Borders
- **On Ink** (`{colors.on-ink}`): Cream text on black blocks.
- **Border** (`{colors.border}`): Hairline dividers on cream.

## Typography

### Font Family
- **Display**: `Editorial New` (high-contrast serif) — fallbacks `Georgia, serif`.
- **Primary**: `Athletics` (grotesque sans) — fallbacks `Arial, sans-serif`.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-serif` | Editorial New hero headlines, pull quotes |
| `hero` | Athletics large hero / campaign titles |
| `section-heading` | Section titles |
| `card-title` | Product names, card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized body, labels |
| `button-ui` | Buttons, nav links |
| `eyebrow` | Uppercase tracked eyebrows / tags |
| `caption` | Meta, fine print |

### Principles
- **Two voices, strict roles**: Editorial New only for the biggest display moments and quotes; Athletics for everything else.
- **Tight tracking at scale**: Large type uses negative letter-spacing (-0.8px to -1.5px) for editorial tension; body sits at 0.
- **Tracked eyebrows**: Small labels open up to +1.2px letter-spacing, often inside a chartreuse flag.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`–`{spacing.4xl}`) for the airy, lookbook-style section rhythm.

### Grid & Container
- Wide content container with full-bleed photographic breaks
- Product grids: 2–4 columns collapsing to single column on mobile
- Hairline `{colors.border}` dividers separate sections rather than color blocks
- Sharp, square framing on all media — no rounded image masks

### Whitespace Philosophy
- **Lookbook breathing room**: Heavy vertical padding between sections lets imagery dominate.
- **Cream as quiet**: The warm canvas does the calming; the chartreuse accent does the shouting — in small doses only.

## Components

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

### Buttons
- **`button-primary`** — Black block, cream text, sharp 0px corners. The default CTA.
- **`button-accent`** — Chartreuse fill with black text for high-energy moments.
- **`button-secondary`** — Cream surface, black 1px outline, square.
- **`button-pill`** — The rare pill variant for add-to-cart affordances.

### Badges & Eyebrows
- **`badge`** — Chartreuse flag with tracked uppercase eyebrow text.

### Cards
- **`card`** — Flat, square, no shadow; hairline border. Product photography leads.
- **`card-soft`** — Soft-surface testimonial/quote block.

### Inputs
- **`input`** — White surface, black 1px border, square corners.

### Navigation
- **`nav-bar`** — Cream header with hairline bottom divider, Athletics 14px links.

## Do's and Don'ts

### Do
- Keep the canvas warm cream (`{colors.background}`), not pure white
- Default every corner to 0px — square is the brand
- Reserve Editorial New for the largest display headlines and quotes only
- Use chartreuse as punctuation — eyebrows, highlights, one CTA
- Separate sections with hairline dividers and whitespace, not color blocks
- Let full-bleed product photography carry the page

### Don't
- Don't round corners on cards, buttons, or images (pill is for cart chips only)
- Don't add drop shadows or floating elevation
- Don't flood the page with chartreuse — it loses its jolt
- Don't set body copy in Editorial New
- Don't swap the cream canvas for clinical white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked photography, hamburger nav |
| Tablet | 600–1024px | 2-column product grids |
| Desktop | 1024–1400px | Full multi-column lookbook grid |
| Large | >1400px | Centered container, generous cream margins |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Nav links spaced for tap on mobile
- Square cart affordances sized for thumb

### Collapsing Strategy
- Hero serif scales down but keeps negative tracking
- Product grids: 4 → 2 → 1 column
- Full-bleed images maintain edge-to-edge treatment at all sizes
- Section padding compresses from `{spacing.4xl}` toward `{spacing.2xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper Cream `{colors.background}`
- Primary CTA: Ink Black `{colors.ink}`
- Accent / energy: Chartreuse `{colors.accent}` (black text on it)
- Heading text: Ink Black `{colors.ink}`
- Body text: Ink Black `{colors.ink}`
- Divider: Border `{colors.border}`

### Example Component Prompts
- "Create a hero on paper cream (`{colors.background}`). Headline in Editorial New 64px weight 400, line-height 1.02, letter-spacing -1.5px, black. Above it a chartreuse (`{colors.accent}`) eyebrow flag with uppercase tracked label. Black square CTA (`{colors.ink}`, 0px radius, 14px 28px padding)."
- "Design a product card: white surface, 0px corners, no shadow, hairline `{colors.border}`. Full-bleed image on top, product name in Athletics 22px weight 600 below."
- "Build an eyebrow badge: `{colors.accent}` background, black text, 0px radius, 12px Athletics weight 600 with +1.2px letter-spacing, uppercase."

### Iteration Guide
1. Square corners by default — only cart chips get pill radius
2. One accent only — chartreuse as punctuation, never as a field
3. Editorial New for display, Athletics for everything else
4. Cream not white; hairline dividers not boxes; whitespace not shadow

---

## 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 Make Good. Brand names and trademarks belong to their respective owners.