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
#E8E4DC
Page canvas · Body background
color.brand.navy
#1D486A
Primary CTA · Buy Tickets button · Nav (future dark)
color.brand.mutedBlue
#5C7A8C
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
#111827
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
#9CA3AF
Venue / county labels · Placeholder text · Metadata
color.ui.chipBackground
rgba(17,24,39,0.07)
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
26px
400
-0.04em
Bay Area Theatre
Page titles · Hero headlines
type.heading.h2
Inter
20px
400
-0.04em
1.25em
Shows this weekend
Section headings · Major UI titles
type.heading.h3
Inter
17px
400
-0.03em
1.3em
Programme Notes
Sub-section labels · Card category titles
type.body.default
Inter
16px
400
-0.02em
1.6em
Discover performances that fit your interests.
Show descriptions · FAQ answers · General copy
type.body.strong
Inter
16px
600
-0.02em
1.5em
Get your own ticket
Step titles · Field values · Emphasised copy
type.body.caption
Inter
14px
400
-0.01em
1.5em
Card Blurb · Venue detail · Date range
Card blurb · Secondary metadata · Dates
type.label.eyebrow
Inter
12px
600
0.04em
1.4em
MURMUR · GUIDE
Section eyebrow · Accent label above a heading
type.label.default
Inter
12px
600
0.04em
1.4em
SAFEST BET · HIGH · VARIES
Qualifier under a sub-heading · Status badge
type.label.chip
Inter
13px
600
-0.01em
1em
Musical · All Ages · Uplifting
Genre chips · Filter tags · Mood labels
RESPONSIVE VALUES
STYLE
DESKTOP (1200px+)
TABLET (1080–1199px)
PHONE (<1080px)
H1
26px / 400 / -0.04em
22px / 400 / -0.03em
22px / 400 / -0.03em
H2
20px / 400 / -0.04em
18px / 400 / -0.03em
18px / 400 / -0.03em
H3
17px / 400 / -0.03em
16px / 400 / -0.02em
16px / 400 / -0.02em
Body
16px / 400 / -0.02em
16px / 400 / -0.02em
16px / 400 / -0.02em
Caption / Chip
14px / 13px — no change
14px / 13px — 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
13px
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 →