One design system for every application Woodruff Sawyer builds.
Foundations, components, and patterns — documented at the depth so every designer and engineer can build consistent, accessible, on-brand experiences at a glance.
This site was scaffolded without live access to the source Figma library (no Figma connection was available). Every color, type, and spacing value here is a reasoned placeholder — swap them out in assets/css/tokens.css once the real tokens are exported, and the entire site updates automatically.
2.1 AAAccessibility target
Foundations
The primitives every component and pattern is built from — color, type, space, elevation, motion, and iconography.
Principles
The values that guide every design decision.
Color
Brand, neutral, and semantic color scales.
Typography
Type scale, weights, and usage guidance.
Spacing & layout
The 4px scale, grid, and breakpoints.
Elevation
Shadow tokens that express hierarchy.
Motion
Durations and easing for purposeful movement.
Iconography
Grid, stroke weight, and icon usage rules.
Accessibility
Contrast, focus, and inclusive-design rules.
Content
Voice, tone, clarity, and UX writing guidelines.
Components
Production-ready UI building blocks — each with live demos, states, code snippets, and usage guidance.
Buttons
Primary, secondary, tertiary, danger, sizes & states.
Forms & inputs
Text fields, selects, checkboxes, switches, validation.
Cards
Content containers for grids, lists, and dashboards.
Tables
Sortable, striped, dense data tables.
Navigation
Tabs, breadcrumbs, pagination, side nav.
Feedback & status
Alerts, badges, toasts, progress, spinners.
Overlays
Modals, tooltips, popovers.
Avatars & media
User avatars, avatar groups, media objects.
Patterns
Real screens assembled entirely from the components above, showing how the pieces fit together.
Guiding principles
Read the full rationale on the Principles page.
Clarity over decoration
Insurance decisions carry real financial weight. Every screen should reduce ambiguity, not add visual noise.
Consistent by default
A component behaves the same way in every business line. Divergence should be a deliberate, documented exception.
Accessible from the start
WCAG 2.1 AA is the floor, not the goal — every token and component is built to pass before it ships.