# Design System

> The workspace's component / pattern / token catalogue, link components to features for design-aware planning.

Source: https://productos.ca/documentation/pages/tools/design-system (last reviewed 2026-09-22)

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.

## Related

- [DS Components API](https://productos.ca/documentation/api/v1/reference/ds-components)
- [DS Patterns API](https://productos.ca/documentation/api/v1/reference/ds-patterns)
- [DS Tokens API](https://productos.ca/documentation/api/v1/reference/ds-tokens)