Tools
Design System
The workspace's component / pattern / token catalogue, link components to features for design-aware planning.
The Design System page is the workspace's catalogue of components, patterns, and tokens. It's both a reference for designers and an input to product planning, features get linked to the components they touch.
What you'll see
Three tabs:
- Components: name, category, status (
draft | review | stable | deprecated), Figma link, linked features (count) - Patterns: name, category, status, use case, linked components (count)
- Tokens: name, category (
color | spacing | typography | shadow | border-radius | breakpoint | other), value, CSS variable
Components and Patterns have a status filter.
Row drawer (components)
- Description, Figma URL, documentation URL
- Variants (list): visual variants the component supports
- Props (list): the component's prop interface
- Linked feature IDs: comma-separated IDs of the features that touch this component
- Sort order: settable through the API; drives the catalogue's display ordering
Patterns carry a use case, implementation notes, linked component IDs (comma-separated) and a Figma URL; tokens carry a description, the value and the CSS variable.
Common actions
- Add Component / Add Pattern / Add Token button in the toolbar of each tab
- Edit any field in the drawer
Syncing components from a connected repo and exporting tokens to JSON / CSS / Tailwind config are not implemented; use the API to load or extract the catalogue in bulk.
Why product cares about design system
Linking features to components answers "if I change this component, which features regress?" Nothing warns automatically when an in-progress feature touches a deprecated component; the link is there for you to query.