This is an example. Your team gets a page like it, kept current from Figma, the moment you publish.
Try your own tokensA made-up product's design system, published from Figma with the Basemode plugin. Every swatch, scale and contrast check below is generated from its tokens.
Reach for surface, text, border and action tokens. They carry the meaning and change with the theme. Use primitives only to define new semantic tokens.
If a color, space or radius isn't in the system, ask for it instead of typing it in. Run `basemode lint` before opening a pull request.
Body text needs 4.5:1 contrast against its surface, and large text 3:1. Check both the light and dark themes.
Primary color marks the most important thing to do. If everything is primary, nothing is.
Click a color for its details. The copy button copies its CSS variable.
Every text color on every surface, with its WCAG contrast.
Starts an action. Primary, secondary and ghost.
import { Button } from "@northwind/ui"Single-line text entry with a label and an error state.
import { Input } from "@northwind/ui"Picks one option from a list.
Turns an option on or off.
import { Checkbox } from "@northwind/ui"Groups related content on a raised surface.
import { Card } from "@northwind/ui"Asks for a decision on top of the page.
Confirms something that just happened.
Try it with sample tokens in a couple of minutes, then connect Figma, GitHub and your agents when you're ready. No card needed.