Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
From Users to Design System
How UX research — personas, empathy maps, and user journeys — informs design token choices and builds a design system grounded in real user needs.
Why UX Research Drives Design Systems
A design system is not just a set of colors and fonts. It is a visual language that communicates with specific people. The UX Planning Pack gives you tools to understand those people. The Design System Pack gives you tools to document the visual decisions. This guide connects the two.
Most design systems start with aesthetics — someone picks colors they like, fonts that look good, and spacing that feels right. This works until stakeholders ask why those choices were made. Without user research to ground the decisions, every design review becomes a battle of personal taste.
VB provides a complete pipeline: research your users with the UX Planning Pack, make informed design decisions, then document everything with the Design System Pack. Each step builds on the last.
| UX Planning Component | Informs | Design System Decision |
|---|---|---|
<user-persona> | → | Brand personality, typography tone, accessibility requirements |
<empathy-map> | → | Color psychology, content voice, interaction patterns |
<user-journey> | → | Information architecture, spacing density, motion intensity |
<user-story> | → | Component requirements, form patterns, data display needs |
<review-surface> | → | Design system validation, consistency audits |
From Personas to Design Tokens
User personas carry information that directly maps to design token choices.
Demographics → Accessibility Tokens
A persona’s age, location, and device preferences tell you about accessibility needs. Older users or users in bright-sunlight environments need higher contrast ratios. Mobile-first users need larger touch targets and more generous spacing.
Persona informing accessibility
<user-persona name="Maria Chen" role="Field Researcher" age="58" location="Rural Montana"> <p slot="goals">Quick data entry in bright sunlight</p> <p slot="frustrations">Small text, low contrast on mobile</p></user-persona> <!-- Maria's needs → token decisions: --><!-- --font-size-md: 1rem (not smaller) --color-text: oklch(15% ...) (high contrast) --size-touch-target: 44px minimum Compose with a11y-large-text theme -->Goals & Frustrations → Typography & Color
What users want to accomplish and what blocks them shapes the emotional tone of your interface. A financial dashboard needs trust and precision (serif headings, muted palette). A creative tool needs energy and inspiration (display fonts, vibrant accents).
| Persona Signal | Token Direction | Example |
|---|---|---|
| Needs trust, authority | Serif headings, deep blue/green primary | --font-heading: "Merriweather" |
| Wants speed, efficiency | Sans-serif throughout, tight spacing | --size-m: 0.75rem |
| Values creativity | Display fonts, vibrant accent colors | --color-accent: oklch(70% 0.2 30) |
| Frustrated by complexity | Generous whitespace, larger radius | --radius-m: 12px |
From Empathy Maps to Brand Voice
The four quadrants of an empathy map — Says, Thinks, Does, Feels — directly inform your design system’s voice and tone guidelines.
The Says quadrant reveals the vocabulary your users actually use. Mirror it in your UI copy. The Thinks quadrant exposes hidden concerns — address them proactively in error messages and empty states. Does shows behavioral patterns that inform interaction design. Feels maps directly to the emotional tone your color and typography should convey.
Empathy map informing voice and tone
<empathy-map title="Field Researcher Empathy"> <ul slot="says"> <li>"I need this to work offline"</li> <li>"Don't make me think about the UI"</li> </ul> <ul slot="feels"> <li>Anxious about data loss</li> <li>Proud of fieldwork contributions</li> </ul></empathy-map> <!-- Voice decisions from this empathy map: - Use direct, plain language (mirrors "Says") - Always show save status (addresses "Feels: anxious") - Celebrate milestones (addresses "Feels: proud") - Design System do/don't examples should reflect these -->From User Journeys to Information Architecture
Journey maps show where users experience friction and delight. These emotional inflection points tell you where your design system needs to invest the most attention.
High-emotion phases need expressive typography and generous spacing. Low-emotion utility phases need density and efficiency. The transition between phases needs motion tokens that match the emotional shift.
| Journey Phase | Emotion | Design Response |
|---|---|---|
| Discovery / First visit | Curiosity + uncertainty | Hero layouts, display fonts, generous whitespace, warm colors |
| Onboarding | Cautious optimism | Step indicators, progress bars, encouraging micro-copy |
| Core workflow | Focused concentration | Dense layouts, system fonts, minimal decoration, fast transitions |
| Error / Failure | Frustration | Clear error states, warm error colors, recovery actions, generous padding |
| Success / Completion | Satisfaction | Celebration motion, success colors, share prompts |
Embedding Research in Your Design System Page
Your design system page can include the research that justifies its decisions. This makes the system self-documenting and defensible.
The UX Planning components work inside design system documentation. Add your personas directly to the brand identity section. Show the empathy map next to your voice and tone guidelines. Reference user journey phases alongside your motion token decisions.
Personas in a design system page
<!-- In your design system page's Brand Identity section --><section> <h2>Who We Design For</h2> <layout-grid data-layout-min="16rem"> <user-persona name="Maria" role="Field Researcher" age="58" compact> <p slot="goals">Fast data entry in the field</p> </user-persona> <user-persona name="Alex" role="Lab Analyst" age="29" compact> <p slot="goals">Deep data exploration on desktop</p> </user-persona> </layout-grid> <h2>Color System</h2> <p>High contrast chosen for Maria's outdoor fieldwork needs. Vibrant accent for Alex's data visualization.</p> <color-palette colors="var(--color-primary),var(--color-accent)" names="Primary (trust),Accent (data)" show-values></color-palette></section>The Full Pipeline
From user research to production design system in five steps.
- Research — Create
<user-persona>cards and<empathy-map>quadrants from user interviews - Map — Build
<user-journey>maps that identify emotional peaks, valleys, and friction points - Decide — Translate research insights into design token choices (colors, fonts, spacing, motion)
- Build — Create a theme file (
.css) with your token overrides. Use palette-generator, font-pairer, and gradient-builder to explore options - Document — Generate a design system page with
/scaffold-design-system-pageor the Theme Lab export. Embed your personas and empathy maps alongside the token documentation
Next Steps
- UX Planning Pack — all research and planning components
- Design System Pack — documentation and token display components
- Building Design Systems — theme creation workflow and maturity model
- Meridian Labs Example — complete design system reference page
- Theme Lab — interactive playground with design system export