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.
Keywords: condensed, compact, dense, tight, narrow, reduced spacing
Figma:
vivid/density/condensed/100CSS:
--vivid-density-condensed-100Hello
Figma:
vivid/density/condensed/200CSS:
--vivid-density-condensed-200Hello
Figma:
vivid/density/condensed/300CSS:
--vivid-density-condensed-300Hello
Figma:
vivid/density/condensed/400CSS:
--vivid-density-condensed-400Hello
Figma:
vivid/density/condensed/500CSS:
--vivid-density-condensed-500Hello
Figma:
vivid/density/condensed/600CSS:
--vivid-density-condensed-600Hello
Figma:
vivid/density/condensed/700CSS:
--vivid-density-condensed-700Hello
Figma:
vivid/density/condensed/800CSS:
--vivid-density-condensed-800Hello
Figma:
vivid/density/condensed/900CSS:
--vivid-density-condensed-900Hello
Figma:
vivid/density/condensed/1000CSS:
--vivid-density-condensed-1000Hello
Figma:
vivid/density/condensed/1100CSS:
--vivid-density-condensed-1100Hello
Figma:
vivid/density/condensed/1200CSS:
--vivid-density-condensed-1200Hello
Figma:
vivid/density/condensed/1300CSS:
--vivid-density-condensed-1300Hello
Keywords: regular, default, standard, normal, base spacing
Figma:
vivid/density/regular/100CSS:
--vivid-density-regular-100Hello
Figma:
vivid/density/regular/200CSS:
--vivid-density-regular-200Hello
Figma:
vivid/density/regular/300CSS:
--vivid-density-regular-300Hello
Figma:
vivid/density/regular/400CSS:
--vivid-density-regular-400Hello
Figma:
vivid/density/regular/500CSS:
--vivid-density-regular-500Hello
Figma:
vivid/density/regular/600CSS:
--vivid-density-regular-600Hello
Figma:
vivid/density/regular/700CSS:
--vivid-density-regular-700Hello
Figma:
vivid/density/regular/800CSS:
--vivid-density-regular-800Hello
Figma:
vivid/density/regular/900CSS:
--vivid-density-regular-900Hello
Figma:
vivid/density/regular/1000CSS:
--vivid-density-regular-1000Hello
Figma:
vivid/density/regular/1100CSS:
--vivid-density-regular-1100Hello
Figma:
vivid/density/regular/1200CSS:
--vivid-density-regular-1200Hello
Figma:
vivid/density/regular/1300CSS:
--vivid-density-regular-1300Hello
Keywords: extended, spacious, loose, wide, generous, increased spacing
Figma:
vivid/density/extended/100CSS:
--vivid-density-extended-100Hello
Figma:
vivid/density/extended/200CSS:
--vivid-density-extended-200Hello
Figma:
vivid/density/extended/300CSS:
--vivid-density-extended-300Hello
Figma:
vivid/density/extended/400CSS:
--vivid-density-extended-400Hello
Figma:
vivid/density/extended/500CSS:
--vivid-density-extended-500Hello
Figma:
vivid/density/extended/600CSS:
--vivid-density-extended-600Hello
Figma:
vivid/density/extended/700CSS:
--vivid-density-extended-700Hello
Figma:
vivid/density/extended/800CSS:
--vivid-density-extended-800Hello
Figma:
vivid/density/extended/900CSS:
--vivid-density-extended-900Hello
Figma:
vivid/density/extended/1000CSS:
--vivid-density-extended-1000Hello
Figma:
vivid/density/extended/1100CSS:
--vivid-density-extended-1100Hello
Figma:
vivid/density/extended/1200CSS:
--vivid-density-extended-1200Hello
Figma:
vivid/density/extended/1300CSS:
--vivid-density-extended-1300Hello