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

Flutter: vividDensityCondensed100

Hello

Figma: vivid/density/condensed/200

CSS: --vivid-density-condensed-200

Flutter: vividDensityCondensed200

Hello

Figma: vivid/density/condensed/300

CSS: --vivid-density-condensed-300

Flutter: vividDensityCondensed300

Hello

Figma: vivid/density/condensed/400

CSS: --vivid-density-condensed-400

Flutter: vividDensityCondensed400

Hello

Figma: vivid/density/condensed/500

CSS: --vivid-density-condensed-500

Flutter: vividDensityCondensed500

Hello

Figma: vivid/density/condensed/600

CSS: --vivid-density-condensed-600

Flutter: vividDensityCondensed600

Hello

Figma: vivid/density/condensed/700

CSS: --vivid-density-condensed-700

Flutter: vividDensityCondensed700

Hello

Figma: vivid/density/condensed/800

CSS: --vivid-density-condensed-800

Flutter: vividDensityCondensed800

Hello

Figma: vivid/density/condensed/900

CSS: --vivid-density-condensed-900

Flutter: vividDensityCondensed900

Hello

Figma: vivid/density/condensed/1000

CSS: --vivid-density-condensed-1000

Flutter: vividDensityCondensed1000

Hello

Figma: vivid/density/condensed/1100

CSS: --vivid-density-condensed-1100

Flutter: vividDensityCondensed1100

Hello

Figma: vivid/density/condensed/1200

CSS: --vivid-density-condensed-1200

Flutter: vividDensityCondensed1200

Hello

Figma: vivid/density/condensed/1300

CSS: --vivid-density-condensed-1300

Flutter: vividDensityCondensed1300

Hello

Regular

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

Figma: vivid/density/regular/100

CSS: --vivid-density-regular-100

Flutter: vividDensityRegular100

Hello

Figma: vivid/density/regular/200

CSS: --vivid-density-regular-200

Flutter: vividDensityRegular200

Hello

Figma: vivid/density/regular/300

CSS: --vivid-density-regular-300

Flutter: vividDensityRegular300

Hello

Figma: vivid/density/regular/400

CSS: --vivid-density-regular-400

Flutter: vividDensityRegular400

Hello

Figma: vivid/density/regular/500

CSS: --vivid-density-regular-500

Flutter: vividDensityRegular500

Hello

Figma: vivid/density/regular/600

CSS: --vivid-density-regular-600

Flutter: vividDensityRegular600

Hello

Figma: vivid/density/regular/700

CSS: --vivid-density-regular-700

Flutter: vividDensityRegular700

Hello

Figma: vivid/density/regular/800

CSS: --vivid-density-regular-800

Flutter: vividDensityRegular800

Hello

Figma: vivid/density/regular/900

CSS: --vivid-density-regular-900

Flutter: vividDensityRegular900

Hello

Figma: vivid/density/regular/1000

CSS: --vivid-density-regular-1000

Flutter: vividDensityRegular1000

Hello

Figma: vivid/density/regular/1100

CSS: --vivid-density-regular-1100

Flutter: vividDensityRegular1100

Hello

Figma: vivid/density/regular/1200

CSS: --vivid-density-regular-1200

Flutter: vividDensityRegular1200

Hello

Figma: vivid/density/regular/1300

CSS: --vivid-density-regular-1300

Flutter: vividDensityRegular1300

Hello

Extended

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

Figma: vivid/density/extended/100

CSS: --vivid-density-extended-100

Flutter: vividDensityExtended100

Hello

Figma: vivid/density/extended/200

CSS: --vivid-density-extended-200

Flutter: vividDensityExtended200

Hello

Figma: vivid/density/extended/300

CSS: --vivid-density-extended-300

Flutter: vividDensityExtended300

Hello

Figma: vivid/density/extended/400

CSS: --vivid-density-extended-400

Flutter: vividDensityExtended400

Hello

Figma: vivid/density/extended/500

CSS: --vivid-density-extended-500

Flutter: vividDensityExtended500

Hello

Figma: vivid/density/extended/600

CSS: --vivid-density-extended-600

Flutter: vividDensityExtended600

Hello

Figma: vivid/density/extended/700

CSS: --vivid-density-extended-700

Flutter: vividDensityExtended700

Hello

Figma: vivid/density/extended/800

CSS: --vivid-density-extended-800

Flutter: vividDensityExtended800

Hello

Figma: vivid/density/extended/900

CSS: --vivid-density-extended-900

Flutter: vividDensityExtended900

Hello

Figma: vivid/density/extended/1000

CSS: --vivid-density-extended-1000

Flutter: vividDensityExtended1000

Hello

Figma: vivid/density/extended/1100

CSS: --vivid-density-extended-1100

Flutter: vividDensityExtended1100

Hello

Figma: vivid/density/extended/1200

CSS: --vivid-density-extended-1200

Flutter: vividDensityExtended1200

Hello

Figma: vivid/density/extended/1300

CSS: --vivid-density-extended-1300

Flutter: vividDensityExtended1300

Hello