Vivid API

Density

Explains how spacing works. These tokens affect the inner and outer spacing between the UI elements. It provides the regular, condensed, and extended semantic sets.

Used for properties like paddings, margins and gaps.

Condensed

Keywords: condensed, compact, dense, tight, narrow, reduced spacing

Figma: vivid/density/condensed/100
CSS: --vivid-density-condensed-100
Hello
Figma: vivid/density/condensed/200
CSS: --vivid-density-condensed-200
Hello
Figma: vivid/density/condensed/300
CSS: --vivid-density-condensed-300
Hello
Figma: vivid/density/condensed/400
CSS: --vivid-density-condensed-400
Hello
Figma: vivid/density/condensed/500
CSS: --vivid-density-condensed-500
Hello
Figma: vivid/density/condensed/600
CSS: --vivid-density-condensed-600
Hello
Figma: vivid/density/condensed/700
CSS: --vivid-density-condensed-700
Hello
Figma: vivid/density/condensed/800
CSS: --vivid-density-condensed-800
Hello
Figma: vivid/density/condensed/900
CSS: --vivid-density-condensed-900
Hello
Figma: vivid/density/condensed/1000
CSS: --vivid-density-condensed-1000
Hello
Figma: vivid/density/condensed/1100
CSS: --vivid-density-condensed-1100
Hello
Figma: vivid/density/condensed/1200
CSS: --vivid-density-condensed-1200
Hello
Figma: vivid/density/condensed/1300
CSS: --vivid-density-condensed-1300
Hello

Regular

Keywords: regular, default, standard, normal, base spacing

Figma: vivid/density/regular/100
CSS: --vivid-density-regular-100
Hello
Figma: vivid/density/regular/200
CSS: --vivid-density-regular-200
Hello
Figma: vivid/density/regular/300
CSS: --vivid-density-regular-300
Hello
Figma: vivid/density/regular/400
CSS: --vivid-density-regular-400
Hello
Figma: vivid/density/regular/500
CSS: --vivid-density-regular-500
Hello
Figma: vivid/density/regular/600
CSS: --vivid-density-regular-600
Hello
Figma: vivid/density/regular/700
CSS: --vivid-density-regular-700
Hello
Figma: vivid/density/regular/800
CSS: --vivid-density-regular-800
Hello
Figma: vivid/density/regular/900
CSS: --vivid-density-regular-900
Hello
Figma: vivid/density/regular/1000
CSS: --vivid-density-regular-1000
Hello
Figma: vivid/density/regular/1100
CSS: --vivid-density-regular-1100
Hello
Figma: vivid/density/regular/1200
CSS: --vivid-density-regular-1200
Hello
Figma: vivid/density/regular/1300
CSS: --vivid-density-regular-1300
Hello

Extended

Keywords: extended, spacious, loose, wide, generous, increased spacing

Figma: vivid/density/extended/100
CSS: --vivid-density-extended-100
Hello
Figma: vivid/density/extended/200
CSS: --vivid-density-extended-200
Hello
Figma: vivid/density/extended/300
CSS: --vivid-density-extended-300
Hello
Figma: vivid/density/extended/400
CSS: --vivid-density-extended-400
Hello
Figma: vivid/density/extended/500
CSS: --vivid-density-extended-500
Hello
Figma: vivid/density/extended/600
CSS: --vivid-density-extended-600
Hello
Figma: vivid/density/extended/700
CSS: --vivid-density-extended-700
Hello
Figma: vivid/density/extended/800
CSS: --vivid-density-extended-800
Hello
Figma: vivid/density/extended/900
CSS: --vivid-density-extended-900
Hello
Figma: vivid/density/extended/1000
CSS: --vivid-density-extended-1000
Hello
Figma: vivid/density/extended/1100
CSS: --vivid-density-extended-1100
Hello
Figma: vivid/density/extended/1200
CSS: --vivid-density-extended-1200
Hello
Figma: vivid/density/extended/1300
CSS: --vivid-density-extended-1300
Hello