---
version: alpha
name: Museum of Money
description: Playful financial-education museum identity — bold orange-and-purple pairing on a warm cream canvas, rounded speech-bubble shapes, friendly geometric sans headlines, and oversized pill CTAs that turn money literacy into a theme-park experience.

colors:
  # Canvas + ink
  background: "#fdf6ec"
  surface: "#ffffff"
  surface-soft: "#f7ecdb"
  ink: "#1c1626"
  ink-secondary: "#5a5266"

  # Brand accents
  primary: "#ff6a13"        # museum orange — reception, primary CTA
  primary-soft: "#ffe2cc"
  secondary: "#7b3ff2"      # signage purple
  secondary-soft: "#e9defb"
  accent-pink: "#ff4d9d"
  accent-green: "#1fbf75"
  accent-yellow: "#ffc83d"

  # Functional / chrome
  border: "#e6dccb"
  muted: "#8a8194"

  # On-color
  on-primary: "#ffffff"
  on-secondary: "#ffffff"
  on-ink: "#fdf6ec"

typography:
  display-hero:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.2px
  caption:
    fontFamily: "Poppins, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 36px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.secondary-soft}"
    textColor: "{colors.secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

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

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

# Museum of Money Design System

## Overview

Museum of Money is an immersive, hands-on attraction that reframes financial literacy as a theme-park experience, and its visual identity refuses every convention of the buttoned-up financial sector. Where banks reach for navy, gray, and serif gravitas, this system leans into a warm cream canvas (`{colors.background}`), a high-energy museum orange (`{colors.primary}`), and a signage purple (`{colors.secondary}`). The result reads as joyful and approachable — money education for families, not a quarterly earnings deck.

The typographic voice is a rounded geometric sans (Poppins) carried at heavy weights. Headlines run large and tight (`{typography.display-hero}` at 64px / weight 700 / -1.6px tracking), giving the wayfinding-poster feel of a real exhibit space. Body copy stays generous and friendly with a 1.6 line-height, so dense topics like saving and investing breathe.

Shape language is the secret weapon. Everything rounds — CTAs are full pills (`{rounded.pill}`), feature panels use a soft 36px radius (`{rounded.xl}`), and the brand echoes literal speech-bubble doorways from the physical museum. Nothing has a hard corner; the whole interface feels inflatable and inviting.

Color is used confidently and playfully. Orange and purple are the load-bearing pair, with a supporting cast of pink (`{colors.accent-pink}`), green (`{colors.accent-green}`), and yellow (`{colors.accent-yellow}`) reserved for exhibit tags and illustration accents — never for body chrome. Contrast is kept safe: dark ink (`{colors.ink}`) on the cream/white surfaces, white text on the saturated brand fills.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of bank white or navy
- Bold orange + purple as the load-bearing brand pair
- Rounded geometric sans (Poppins) at heavy weights for poster-like headlines
- Full-pill CTAs and oversized rounded feature panels — no hard corners
- Playful multi-color accent set (pink/green/yellow) for exhibit tagging
- Primary CTA flips orange → purple on hover, doubling the brand pairing
- Friendly, generous body copy at 1.6 line-height

## Colors

### Canvas + Ink
- **Cream Canvas** (`{colors.background}`): Page background — warm, museum-lobby feel.
- **White Surface** (`{colors.surface}`): Cards, panels, inputs.
- **Soft Cream** (`{colors.surface-soft}`): Alternating section bands.
- **Ink** (`{colors.ink}`): Headlines and primary text — near-black with a violet undertone.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy.

### Brand Accents
- **Museum Orange** (`{colors.primary}`): Primary CTA, reception, energy.
- **Orange Soft** (`{colors.primary-soft}`): Feature-card tint background.
- **Signage Purple** (`{colors.secondary}`): Secondary brand color, hover state, badges.
- **Purple Soft** (`{colors.secondary-soft}`): Badge background.
- **Exhibit Pink** (`{colors.accent-pink}`): Illustration + exhibit tags.
- **Exhibit Green** (`{colors.accent-green}`): Positive/savings accents.
- **Exhibit Yellow** (`{colors.accent-yellow}`): Highlight accents.

### Functional
- **Border** (`{colors.border}`): Card and input outlines on cream.
- **Muted** (`{colors.muted}`): Disabled / metadata text.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks `system-ui, sans-serif` — a rounded geometric sans that carries the playful, friendly museum voice.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 64px poster headline — billboard impact |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large labels |
| `card-title` | Exhibit / feature cards |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, captions in inputs |
| `button-ui` | Buttons and nav links |
| `caption` | Tags, eyebrows, metadata (uppercase-friendly) |

### Principles
- **Heavy and rounded**: Headlines run weight 700, body 400 — the geometric roundness keeps even bold sizes friendly.
- **Tight display tracking**: -1.6px at 64px gives the compact wayfinding-poster feel; tracking relaxes to 0 at body size.
- **Generous reading**: 1.6 line-height on body keeps money topics approachable.

## Layout

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

### Grid & Container
- Max content width ~1200px, centered.
- Hero: single-column, oversized headline + pill CTA pair.
- Feature sections: 2–3 column rounded-panel grids.
- Alternating cream/soft-cream bands separate sections instead of hard rules.

### Whitespace Philosophy
- **Exhibit-hall airiness**: Large vertical padding between sections lets each "exhibit" stand alone.
- **Soft separation**: Section breaks come from tint bands (`{colors.surface-soft}`) and rounded panels, rarely from 1px lines.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline elements |
| `md` | 14px | Inputs, small cards |
| `lg` | 24px | Standard cards |
| `xl` | 36px | Feature panels, large containers |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Orange pill, white text, 16px/32px padding. Hovers to purple (`{colors.secondary}`), reinforcing the brand pair.
- **`button-secondary`** — White pill with a 1px ink outline.

### Badges
- **`badge`** — Purple-tinted pill, purple text, uppercase-friendly caption type.

### Cards
- **`card`** — White, 24px radius, soft cream border.
- **`card-feature`** — Orange-tinted (`{colors.primary-soft}`) panel at 36px radius for highlighted exhibits.

### Inputs
- **`input`** — White, 14px radius, cream border. Focus switches the border to orange (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Cream sticky header, Poppins weight 600 links, prominent orange "Book Tickets" pill CTA right-aligned.

## Do's and Don'ts

### Do
- Pair orange and purple as the two load-bearing brand colors
- Round everything — pills for CTAs, 24–36px radii for panels
- Use the warm cream canvas (`{colors.background}`), not bank white
- Keep accent pink/green/yellow for exhibit tags and illustration only
- Carry headlines heavy (700) and tight (-1.6px at display)

### Don't
- Don't introduce navy, gray gravitas, or serif "finance" cues
- Don't use hard corners on interactive elements
- Don't spread the pink/green/yellow accents into body chrome
- Don't drop body text below 1.5 line-height — keep it approachable
- Don't set CTAs to the cream background — orange is the action color

---

## 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 Museum of Money. Brand names and trademarks belong to their respective owners.