Get started
How to use this system whether you design in Figma, build in code, or review both.
Who this is for
This site is the shared reference for every designer and engineer working across Woodruff Sawyer's internal applications. It documents the system at three levels, same as Carbon and Atlassian:
- Foundations — the raw tokens (color, type, space, elevation, motion) that everything else is built from.
- Components — the reusable UI building blocks assembled from those tokens, each with states, variants, and code.
- Patterns — full page layouts that show components working together in context.
How to use it
Design in Figma
Use the linked Figma library's variables and components directly — this site mirrors that library's structure so component names and token names always match 1:1. If a screen needs something that isn't here yet, check Principles before introducing a one-off.
Build in code
Every token lives as a CSS custom property in assets/css/tokens.css, and every component has a copy-pasteable markup snippet under its "View code" toggle. Class names are prefixed ws- and are framework-agnostic — port them to React/Vue/whatever your app uses.
Audit a screen
Cross-check spacing against the 4px scale, color against the semantic token table (not raw hex), and interactive states against the component's documented states — hover, focus, active, disabled, error, loading.
Token-first, always
Never hardcode a raw value in a product screen. Reference the semantic token instead — color-bg-brand, not #152C61; space-16, not 16px. This is what lets the whole system re-theme from one file, and it's how you can tell at a glance whether a screen is "on-system."
Click any color swatch anywhere on this site to copy its token value to your clipboard.