Vivid API

Radius

Covers shape families (rectangle, pill, circle), when each is appropriate, and the full scale for each radius group.

Used for properties like border radii that affect the shape of the element.

Rectangle

Tokens used for rectangular elements.

Figma: vivid/radius/rectangle/100
CSS: --vivid-radius-rectangle-100
Figma: vivid/radius/rectangle/200
CSS: --vivid-radius-rectangle-200
Figma: vivid/radius/rectangle/300
CSS: --vivid-radius-rectangle-300
Figma: vivid/radius/rectangle/400
CSS: --vivid-radius-rectangle-400
Figma: vivid/radius/rectangle/500
CSS: --vivid-radius-rectangle-500
Figma: vivid/radius/rectangle/600
CSS: --vivid-radius-rectangle-600
Figma: vivid/radius/rectangle/700
CSS: --vivid-radius-rectangle-700
Figma: vivid/radius/rectangle/800
CSS: --vivid-radius-rectangle-800
Figma: vivid/radius/rectangle/900
CSS: --vivid-radius-rectangle-900
Figma: vivid/radius/rectangle/1000
CSS: --vivid-radius-rectangle-1000
Figma: vivid/radius/rectangle/1100
CSS: --vivid-radius-rectangle-1100
Figma: vivid/radius/rectangle/1200
CSS: --vivid-radius-rectangle-1200
Figma: vivid/radius/rectangle/1300
CSS: --vivid-radius-rectangle-1300

Pill

Token used for pill-shaped elements.

Figma: vivid/radius/pill/700
CSS: --vivid-radius-pill-700

Circle

Token used for circle-shaped elements.

Figma: vivid/radius/circle/700
CSS: --vivid-radius-circle-700