Try the Studio →
designesy.

Contract

Components

Every component the design system defines, with the states it may enter and the token each state binds. Machine-readable, so an agent can check a component against the contract instead of guessing at it.

Version 0.1.0 · derived from the design system contract vv0.4.0

Why this file exists

A token file tells an agent which values are legal. It does not tell it which combinations are legal — that a card presses at 0.985 while a button presses at 0.96, or that a sound toggle carries an aria-pressed obligation a nav link does not. Those rules lived in prose on the human contract page, where a machine could not use them. This export is the same rules in a shape a checker can read.

Components

ComponentStates
Primary buttondefault signal fill · hover signal-light · active scale(0.97) · focus-visible 2px signal-light
Ghost buttontransparent + line-strong · hover surface-hover · active scale(0.97)
Nav linkmuted · hover ink + surface-hover · sticky topbar blur when scrolled
Card / pillarsurface + line · hover raised + line-strong · active scale(0.985); lift only on fine pointer hover
Sound togglearia-pressed sync · pressed shows signal-light · Cuelume setEnabled(true|false)
Definition blockbordered surface · hover line-strong · label uppercase muted-dim