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

Flutter: vividRadiusRectangle100

Figma: vivid/radius/rectangle/200

CSS: --vivid-radius-rectangle-200

Flutter: vividRadiusRectangle200

Figma: vivid/radius/rectangle/300

CSS: --vivid-radius-rectangle-300

Flutter: vividRadiusRectangle300

Figma: vivid/radius/rectangle/400

CSS: --vivid-radius-rectangle-400

Flutter: vividRadiusRectangle400

Figma: vivid/radius/rectangle/500

CSS: --vivid-radius-rectangle-500

Flutter: vividRadiusRectangle500

Figma: vivid/radius/rectangle/600

CSS: --vivid-radius-rectangle-600

Flutter: vividRadiusRectangle600

Figma: vivid/radius/rectangle/700

CSS: --vivid-radius-rectangle-700

Flutter: vividRadiusRectangle700

Figma: vivid/radius/rectangle/800

CSS: --vivid-radius-rectangle-800

Flutter: vividRadiusRectangle800

Figma: vivid/radius/rectangle/900

CSS: --vivid-radius-rectangle-900

Flutter: vividRadiusRectangle900

Figma: vivid/radius/rectangle/1000

CSS: --vivid-radius-rectangle-1000

Flutter: vividRadiusRectangle1000

Figma: vivid/radius/rectangle/1100

CSS: --vivid-radius-rectangle-1100

Flutter: vividRadiusRectangle1100

Figma: vivid/radius/rectangle/1200

CSS: --vivid-radius-rectangle-1200

Flutter: vividRadiusRectangle1200

Figma: vivid/radius/rectangle/1300

CSS: --vivid-radius-rectangle-1300

Flutter: vividRadiusRectangle1300

Pill

Token used for pill-shaped elements.

Figma: vivid/radius/pill/700

CSS: --vivid-radius-pill-700

Flutter: vividRadiusPill700

Circle

Token used for circle-shaped elements.

Figma: vivid/radius/circle/700

CSS: --vivid-radius-circle-700

Flutter: vividRadiusCircle700