MUR·MUR
Design Tokens
All named values that power the Murmur visual system — colors, type, spacing, radius, shadows, borders, opacity, motion.
v 1.0 · June 2026
Source of truth for all coded assets and Framer components
01
Brand Foundation
TOKEN NAME
VALUE
SWATCH
USAGE
color.brand.warmPaper
#e7e4dd
Page canvas · Body background
color.brand.navy
#264767
Primary CTA · Buy Tickets button · Nav (future dark)
color.brand.mutedBlue
#68889C
Day pills active tint · Muted accents
color.brand.orange
#E6863C
Active filter · Day pill selected · Eyebrow accent
02
Semantic Colors
Role-based aliases. Use these in component code — not brand tokens.
SEMANTIC TOKEN
RESOLVES TO
SWATCH
WHERE USED
color.ui.background
→ color.brand.warmPaper
<body> background · page fill
color.ui.surface
→ color.brand.white
Cards · Inputs · Sidebar panels
color.ui.actionPrimary
→ color.brand.navy
Buy Tickets btn fill · Header section fill
color.ui.interactive
→ color.brand.orange
Active filter chip · Day pill · Section accent labels
color.text.primary
#121826
Headings · Titles · UI labels · Card title
color.text.secondary
#747474
Body text · Card blurb · Descriptions
color.text.tertiary
#444444
Top menu sections
color.text.muted
#9DA3AE
Venue / county labels · Placeholder text · Metadata
color.ui.chipBackground
#EEEFF0
Genre chips · Tags (default unselected state)
03
Typography Scale
9 styles · 3 breakpoints · Source of truth for all type in coded assets
TOKEN
FAMILY
SIZE
WEIGHT
TRACKING
LINE-H
SPECIMEN & USAGE
type.heading.h1
Inter
40px
400
-0.04em
Bay Area Theatre
Page titles · Hero headlines
type.heading.h2
Inter
32px
400
-0.04em
1.25em
Shows this weekend
Section headings · Major UI titles
type.heading.h3
Inter
26px
700
-0.03em
1.3em
Programme Notes
Sub-section labels · Card category titles
type.heading.h4
Inter
22px
700
-0.03em
1.4em
Comedy · Drama · Musical
Filter group labels · Modal headers
type.heading.h5
Inter
18px
700
-0.02em
1.4em
San Francisco · East Bay
County labels · Sidebar section titles
type.heading.h6
Inter
16px
600
-0.02em
1.4em
Genre · Mood · Audience
UI labels · Nav items · Form labels
type.body.default
Inter
16px
400
-0.02em
1.6em
Discover performances that fit your interests.
Show descriptions · FAQ answers · General copy
type.body.caption
Inter
14px
400
-0.01em
1.5em
Card Blurb · Venue detail · Date range
Card blurb · Secondary metadata · Dates
type.label.chip
Inter
12px
500
-0.01em
1em
Musical · All Ages · Uplifting
Genre chips · Filter tags · Mood labels
RESPONSIVE VALUES
STYLE
DESKTOP (1200px+)
TABLET (768–1199px)
MOBILE (<768px)
H1
40px / 400 / -0.04em
34px / 400 / -0.04em
28px / 400 / -0.03em
H2
32px / 400 / -0.04em
26px / 400 / -0.04em
22px / 400 / -0.03em
H3
26px / 700 / -0.03em
22px / 700 / -0.03em
20px / 700 / -0.02em
Body
16px / 400 / -0.02em
16px / 400 / -0.02em
15px / 400 / -0.01em
Caption / Chip
14px / 12px — no change
14px / 12px — no change
13px / 12px — no change
04
Spacing Scale
11 values · 4px base unit · Used across padding, gap, margin, inset
TOKEN
VALUE
VISUAL
USAGE
space.1
4px
Chip padding · Divider insets · Icon-to-label gap
space.2
8px
Button inner gap · Tag padding · Tight element spacing
space.3
12px
Card inner padding (compact) · Small list gaps
space.4
16px
Body text line gap · Filter row gap · Card content padding
space.5
20px
Page side padding (mobile) · Nav item gap
space.6
24px
Card padding · Section content gap · Button padding
space.8
32px
Grid column gap · Show card grid gap · Sidebar section gap
space.10
40px
Section top padding · Nav height · Filter header
space.12
48px
Large section padding · Footer content inset
space.16
64px
Between page sections · Hero top margin
space.20
80px
Page max-width padding · Top section clearance · Major layout breaks
SEMANTIC ALIASES
spacing.card
= space.6 (24px)
Show card inner padding
spacing.page
= space.5 (20px)
Page horizontal gutter
spacing.section
= space.16 (64px)
Between page sections
spacing.grid
= space.8 (32px)
Show card grid gap
05
Radius · Shadow · Border · Opacity
TOKEN
VALUE
PREVIEW
USAGE
radius.button
10px
Primary + secondary buttons
radius.card.show
20px
Show card — primary container radius
radius.chip
20px
Chips · Tags · Pill buttons · Filter items
shadow.card
none (border)
Show card default — no shadow, 1px border for flat lift
border.divider.light
#f1f1f2
Section dividers on white · Table row separators
06
Motion System
5 interaction patterns · Easing curves · Component mapping
BASE TOKENS
motion.duration.fast
150ms
Icon state, toggle
motion.duration.base
200ms
Hover states, dropdown open
motion.duration.moderate
250ms
Filter expand, search reveal
motion.duration.slow
300ms
Card expand, content reveal
motion.duration.page
350ms
Page transitions, major state
motion.ease.out
cubic-bezier(0,0,0.2,1)
Elements entering the screen
motion.ease.in-out
cubic-bezier(0.4,0,0.2,1)
Elements shifting position
INTERACTION PATTERNS
Dropdown Menu
Nav · Filter dropdowns
PROPERTIES
opacity: 0 → 1
transform: translateY(-4px) → 0
DURATION
200ms
motion.duration.base
EASING
Ease Out
motion.ease.out
Search Filter Dropdown
Filter sidebar · Mobile filter sheet
PROPERTIES
max-height: 0 → auto
opacity: 0 → 1
overflow: clip
DURATION
250ms
motion.duration.moderate
EASING
Ease In-Out
motion.ease.in-out
Show Card Hover
Desktop only · ShowBrowserDesktop
PROPERTIES
transform: translateY(-4px)
box-shadow: 0 12px 32px rgba(17,24,39,0.1)
will-change: transform
DURATION
220ms
~motion.duration.base
EASING
Ease / linear
GPU-accelerated via CSS will-change
Show Card Expand
ShowBrowserDesktop · Mobile card
PROPERTIES
height: collapsed → expanded
opacity: content 0 → 1
overflow: hidden → visible
DURATION
300ms
motion.duration.slow
EASING
Ease In-Out
motion.ease.in-out
Page Transition
All page navigations
PROPERTIES
opacity: 0 → 1
(outgoing page: opacity 1 → 0)
DURATION
300–350ms
motion.duration.page
EASING
Ease Out
motion.ease.out
MOTION PRINCIPLES
Purposeful
Every animation communicates something. No decorative motion.
Subtle
Under 350ms. Theatre content is the focus, not the UI.
Accessible
Respect prefers-reduced-motion. All interactions work without animation.
Mur-Mur Design Tokens · v 1.0 · June 2026 · Source of truth for all coded components and Framer assets
See also: Mur-Mur UI Kit →