MUR·MUR
Design System
Visual language · Component anatomy · Interaction states · Design tokens
v 1.0 · June 2026
Inter · Merriweather · Bay Area Theatre
01
Foundations
Colors · Type · Spacing · Grid · Radius · Shadows
02
Atoms
Buttons · Chips · Tags · Inputs · Checkbox · Divider
03
Molecules
Search Bar · Filter Row · Card Header · Nav Item · FAQ Row
04
Organisms
Navigation · Show Card · FAQ Block · Footer · Filter Panel
05–06
Templates + Principles
Grid · Container · Layout · Design Language
01
Foundations
The primitive building blocks that define Murmur’s visual identity.
BRAND COLORS
Navy — Action
#1D486A
CTA · Buy Tickets · Primary
Muted Blue
#68879B
Day pills active · Accents
Dark Orange
#E46F12
Checkboxes · Hover state
Orange — Interactive
#F67916
Filters · Selection · Active
Warm Paper
rgb(232, 228, 220)
Page background
Chip Background
rgba(17,24,39,0.07)
Genre chips · Tags · Filters
Text Primary
#111827
Headings · UI labels
Text Secondary
#747474
Body · Descriptions · Blurbs
Text Muted
#9CA3AF
Labels · County · Venue
White
#FFFFFF
Cards · Surfaces · Modals
TYPOGRAPHY
All type values reference Design Tokens page · type.heading.* and type.body.* · No hard-coded sizes in components
STYLE
TOKEN
SPECIMEN
H1
type.heading.h1
Bay Area Theatre
H2
type.heading.h2
Shows This Weekend
H3
type.heading.h3
Programme Notes
Body
type.body.default
Discover performances that fit your interests and mood.
Caption
type.body.caption
Card blurb · Venue · Date range
Chip
type.label.chip
Musical · All Ages · Uplifting
SPACING
4px base unit · All spacing via space.1–space.20 tokens · Semantic aliases: spacing.card, spacing.page, spacing.section, spacing.grid
4
8
12
16
20
24
32
40
48
64
80
BORDER RADIUS
4px
Small UI
8px
Inputs
10px
Buttons · CTA
12px
Small cards · Modals
18px
Show Card · Primary
999px
Chips · Pills · Tags
ELEVATION & SHADOWS
Elevation 0
none
Flat surface · Background
Elevation 1
0 1px 3px rgba(17,24,39,0.08)
Cards resting · Input fields
Elevation 2
0 4px 12px rgba(17,24,39,0.10)
Dropdown panels · Popovers
Elevation 3
0 12px 32px rgba(17,24,39,0.12)
Card hover lift · Tooltips
Elevation 4
0 24px 48px rgba(17,24,39,0.16)
Modals · Overlays · Drawers
LAYOUT GRID & BREAKPOINTS
BREAKPOINT
WIDTH
COLUMNS
GUTTER / MARGIN
Desktop
1200px+
Masonry 3–4
20px / 80px
Tablet
768–1199px
Masonry 2
16px / 20px
Phone
< 768px
1 column
12px / 16px
02
Atoms
Smallest UI building blocks — single-purpose, indivisible components.
BUTTONS
PRIMARY CTA
Buy tickets
Default
Buy tickets
Hover (#68879B)
Buy tickets
Disabled (40%)
SECONDARY CTA
Learn more
Default
Learn More
Hover
TERTIARY / GHOST
Back to search
Default
Back to search
Hover
TOKEN NOTE
Primary hover: #68879B (Muted Blue) · Primary active: darken orange 12% · All buttons: min-height 44px · Border radius: radius.card (18px on cards, 8px on buttons)
CHIPS & TAGS
Genre chips (show card)
Musical
Comedy
Drama
All Ages
Uplifting
Filter chips — selected / active state
Musical
San Francisco
This Weekend
DIVIDERS & SEPARATORS
LIGHT SURFACE (on cream #E8E4DC)
Section content above
Section content below
rgba(17,24,39,0.12) — 1px
DARK SURFACE (on navy #1D486A)
Section content above
Section content below
rgba(255,255,255,0.15) — 1px
03
Molecules
Combinations of atoms that form recognizable UI units.
NAVIGATION BAR
Navigation bar with search bar
Desktop — dropdown open
Phone — menu closed
Phone — menu open
FAQ / ACCORDION
What is murmur and who is it for?
murmur is a guide to Bay Area theatre - a place to see what’s playing across dozens of stages, all in one spot. It’s for anyone who loves theatre, is curious about it, or just wants to find something worth seeing on a Friday night. You don’t need to be a theatre insider to use it. In fact, it’s built specifically for the people in the seats.
Is murmur affiliated with any theatre or company?
No. murmur is independent - we’re not attached to any theatre, company, or venue. There are incredible artists across the Bay Area putting enormous care and hard work into creating theatre, and our goal is to support them by making their work more visible. That means covering the whole scene, not just part of it.
Does murmur sell tickets?
No - we’ll link you to where you can buy them, but the transaction happens directly with the theatre. We like it that way. It keeps the relationship between you and them.
First answer expanded
What is murmur and who is it for?
murmur is a guide to Bay Area theatre - a place to see what's playing across dozens of stages, all in one spot. It's for anyone who loves theatre, is curious about it, or just wants to find something worth seeing on a Friday night.
Is murmur affiliated with any theatre or company?
No. murmur is independent - we're not attached to any theatre, company, or venue. Our goal is to support artists by making their work more visible. That means covering the whole scene, not just part of it.
Does murmur sell tickets?
No - we'll link you to where you can buy them, but the transaction happens directly with the theatre. We like it that way.
04
Organisms
Complex, self-contained UI sections made of molecules and atoms.
SHOW CARD · PRIMARY & EXPANDED STATES
Component: MurmurShowCard.tsx · Tap collapsed card to expand · Chevron collapses · Resolves its own Airtable fields.
Primary State (collapsed)
The Two Gentlemen of Verona
Play
All Ages
Comedy
Uplifting
Professional
Shakespeare’s rom-com gets an 80s neon makeover. Two best friends navigate love, loyalty, and betrayal against a backdrop of big hair, bold fashions, and songs.
Silicon Valley Shakespeare
Santa Clara
Jun 11, 2026 – Jun 27, 2026
M
T
W
T
F
S
S
∨
Expanded State
We Will Rock You
Musical
All Ages
Energetic
Rock Musical
Professional
A post-apocalyptic rock spectacular. Music is banned, but rebels fight back using Queen anthems. Thunderous live music and stunning choreography bring the revolution to life.
Bay Area Musicals
San Francisco
May 30, 2026 – Jun 22, 2026
M
T
W
T
F
S
S
ABOUT
A post-apocalyptic rock spectacular set in a future where music is banned. A small group of rebels fights to bring back rock and roll using the power of Queen anthems. Featuring thunderous live music and stunning choreography.
Buy Tickets
VENUE
Roda Theatre
2015 Addison St, Berkeley, CA 94704
∧
FILTER SIDEBAR
Right panel coded component · SidebarFilterPanel.tsx · Collapsible filter groups · Day chips + genre chips + mood chips
FOOTER
Email to us: vera@the-murmur.com
TEMPLATES
Page Templates
Full-page layouts assembled from system Nav, Atoms, Molecules, and Organisms.
ARTICLE / EDITORIAL
← Back to search
ARTICLE
How to Choose a Show in Bay Area Theatre
Part 1 — Framing the experience
• Bay Area theatre runs short (3–6 weeks), which means reviews often aren’t available when you need them — unlike movies or TV where reviews and algorithms guide you
• Theatre is an educated guess, and that’s not a flaw — it’s the nature of the form. Unlike Netflix you can’t turn it off, you’re in a room with other people, it’s a commitment
• The positive case for that risk: the live experience is unrepeatable and ephemeral. A specific group of people — on both sides of the curtain — chose to be in that room together, and when the run ends, that’s it. That scarcity is part of what makes it matter.
• Even theatre that doesn’t fully work has value — experimentation requires an audience willing to witness it
Part 2 — The educated guess
Layer 1: The theatre as a signal
• The tier tells you about production scale and artistic ambition — before you even look at the show, the producing company tells you something about what to expect
• Touring productions — safest bet; someone already decided this work was worth significant investment to bring here; high production value, recognizable titles, large venues
• Top tier regional (ACT, Berkeley Rep) — national-caliber work, productions that sometimes travel beyond the Bay Area; serious artistic ambition at significant scale
• Professional regional — where most Bay Area theatre lives; serious and professional but primarily local in footprint; ranges widely in artistic approach and scale; getting to know individual companies over time is the best navigation tool, and Murmur will build that out
• Community theatre — amateur, variable quality, often produces well-known titles; warm entry point into familiar stories but harder to predict
Layer 2: Navigating within professional regional
• Since the company name alone doesn’t tell you enough, source material and production history become your tools
• Source material — is it classical (pre-award era, self-validating through time), award-winning text (Pulitzer, Drama Critics Circle), a world premiere, or a regional premiere? No tag means contemporary work without major recognition — the most common and the hardest to predict
• Production history — has it had a Broadway run, won a Tony, won an Olivier, been developed at a major festival? These are signals that the work has been validated beyond its first production
Email to us: vera@the-murmur.com
06
Design Principles
The values that guide every visual and UX decision.
01
Editorial
Murmur feels curated, not algorithmic. Every element should feel chosen, not generated. Hierarchy is clear and purposeful.
02
Calm
No urgency, no noise. Warm parchment background, generous whitespace, and muted tones create a reading-room quality.
03
Minimal
Remove everything that doesn’t earn its place. One primary action per card. Flat elevation by default. No decorative borders.
04
Warm
Theatre is a human, communal experience. The palette, typography, and tone reflect that — never clinical, never corporate.
05
Paper-Inspired
Warm parchment background evokes a printed programme. Flat whites for content surfaces. No gradients. Honest materials.
06
Accessible
WCAG AA contrast for all text. 44px minimum touch targets. Never use color alone to convey meaning. Legible at every size.
07
Slow Discovery
Murmur rewards browsing, not just searching. Cards reveal information progressively. There is no pressure to decide immediately.
08
Soft Hierarchy
Weight and scale create hierarchy — not color contrast alone. Section headings are gentle. Orange is used sparingly for interactive signals only.
09
Generous Whitespace
Every section breathes. Padding is never less than 20px. Cards are never crammed. The canvas feels open, not dense.
10
Museum-like
The interface steps back so the shows can speak. Typography is secondary to content. Murmur feels like a well-designed exhibition guide.
Design System Audit
Production-ready audit · June 2026 · Murmur v1
9
type styles
11
spacing tokens
5
motion patterns
7
components mapped
INCONSISTENCIES REMOVED
✕
Mixed font size values (px vs em)
✕
Timing tokens (200ms, 300ms) without easing or property specs
✕
Incomplete spacing scale (was 8 values, now 11)
✕
Typography scale missing responsive values
✕
UI Kit components with no token references documented
✕
No component states (hover/focus/active/disabled) documented
TOKENS AND SECTIONS ADDED
+
9-style typography scale with full token spec
+
Desktop/Tablet/Mobile responsive type table
+
Expanded spacing scale (4–80px, 11 values + semantic aliases)
+
Complete Motion System (5 patterns, 7 base tokens, 3 principles)
+
Component States: Hover · Focus · Active · Disabled (all components)
+
Mobile behavior rules (touch targets, hover removal, bottom sheet pattern)
+
Component Token Map (7 components cross-referenced)
COMPONENT STATUS
COMPONENT
TOKENS DOCUMENTED
STATES DOCUMENTED
NEEDS IN NEXT SPRINT
Show Card
Yes
Yes
Saved/Favorited state · Empty image fallback
Navigation
Yes
Yes
Mobile hamburger menu · Sticky scroll behavior
Filter Sidebar
Yes
Yes
Mobile bottom sheet variant · Applied filter count badge
Buttons
Yes
Yes
Loading state variant · Icon+label pattern
Chip / Tag
Yes
Yes
Removable / X variant · Count badge
Show Detail Page
Partial
Partial
Full token documentation · Theatre profile link
FAQ Accordion
Partial
Partial
Keyboard interaction spec · Motion token (Show Card Expand)
NEXT SPRINT
Framer Variables
Convert documented tokens into Framer Variable Sets for live component consumption.
Component Reconnect
Bind Framer canvas components to Variable Sets once created.
Customer Account
Design saved shows, favorites, preferences, account pages using this token system.
Mobile Nav
Hamburger menu + mobile filter bottom sheet · Token-referenced throughout.
Design Tokens page is the single source of truth. UI Kit references tokens exclusively. No hard-coded values in production components.