Perspective Design System
A themeable React component library whose tokens are generated from Figma variables, so design and code share one set of names and a new theme is a change to raw values only.
Core challengeKeep a Figma file and a coded component library from drifting apart. In Perspective the code names are the Figma variable names, the token files are generated from Figma instead of hand-edited, and re-theming never means touching a component.
Tokens
Three tiers, each with one job. Primitives hold the raw values and are the only place a hex code lives. Component tokens (--token-*) point at primitives, and dark mode is defined here. Components read --token-* only, never a primitive and never a hard-coded value.
Token names are the Figma variable names with / turned into -, so surface/page becomes --token-surface-page-default. Fills that carry text come with a named partner, such as text/on-action on action/default, so the pairing is never guesswork.
Theming
Brand and mode are separate axes: data-theme picks the brand and data-mode picks light or dark, set as attributes on <html>. A theme is one small CSS file that overrides primitives and nothing else, which keeps light and dark working without touching a component. A teal theme ships as the working example, and every theme file appears in the Storybook toolbar automatically.
Each new brand color has to be checked for contrast: button text sits on the brand color in both modes and needs 4.5:1.
Components
Button, input field, chip, checkbox, radio, switch, dropdown, card, table and icons, each with a Storybook story that documents its variants. Components expose a small, consistent API: buttons take a variant (solid, outline, ghost), an intent (default, destructive, warning) and a state; chips take an intent and a style; the checkbox, radio and switch manage their own state. Variants are named default, never standard.
Tooling
Built on React, TypeScript, Vite and Tailwind v4, with Storybook as the workbench. The Storybook setup includes the accessibility addon, a theme switcher, Vitest browser tests and Chromatic for visual review.