Vivid Logo Vivid

Size

Details how size tokens help standardize icons, UI elements, and layout blocks, with a reference table for medium and large families.

Used for sizes of internal UI elements like text, icons, carets.

Do not use these tokens for any spacing, margins, paddings or external width or height definitions of elements. External widths and heights should always be defined dynamically by the size of the contents and their paddings, never statically by a token.

Medium

Used as a default, for most of the cases

Figma: vivid/size/medium/100
CSS: --vivid-size-medium-100
Flutter: vividSizeMedium100
Figma: vivid/size/medium/200
CSS: --vivid-size-medium-200
Flutter: vividSizeMedium200
Figma: vivid/size/medium/300
CSS: --vivid-size-medium-300
Flutter: vividSizeMedium300
Figma: vivid/size/medium/400
CSS: --vivid-size-medium-400
Flutter: vividSizeMedium400
Figma: vivid/size/medium/500
CSS: --vivid-size-medium-500
Flutter: vividSizeMedium500
Figma: vivid/size/medium/600
CSS: --vivid-size-medium-600
Flutter: vividSizeMedium600
Figma: vivid/size/medium/700
CSS: --vivid-size-medium-700
Flutter: vividSizeMedium700
Figma: vivid/size/medium/800
CSS: --vivid-size-medium-800
Flutter: vividSizeMedium800
Figma: vivid/size/medium/900
CSS: --vivid-size-medium-900
Flutter: vividSizeMedium900
Figma: vivid/size/medium/1000
CSS: --vivid-size-medium-1000
Flutter: vividSizeMedium1000
Figma: vivid/size/medium/1100
CSS: --vivid-size-medium-1100
Flutter: vividSizeMedium1100
Figma: vivid/size/medium/1200
CSS: --vivid-size-medium-1200
Flutter: vividSizeMedium1200
Figma: vivid/size/medium/1300
CSS: --vivid-size-medium-1300
Flutter: vividSizeMedium1300

Large

Used for elements that are semantically larger, or to create more emphasis. Examples include large icons, large buttons, and layout blocks.

Figma: vivid/size/large/100
CSS: --vivid-size-large-100
Flutter: vividSizeLarge100
Figma: vivid/size/large/200
CSS: --vivid-size-large-200
Flutter: vividSizeLarge200
Figma: vivid/size/large/300
CSS: --vivid-size-large-300
Flutter: vividSizeLarge300
Figma: vivid/size/large/400
CSS: --vivid-size-large-400
Flutter: vividSizeLarge400
Figma: vivid/size/large/500
CSS: --vivid-size-large-500
Flutter: vividSizeLarge500
Figma: vivid/size/large/600
CSS: --vivid-size-large-600
Flutter: vividSizeLarge600
Figma: vivid/size/large/700
CSS: --vivid-size-large-700
Flutter: vividSizeLarge700
Figma: vivid/size/large/800
CSS: --vivid-size-large-800
Flutter: vividSizeLarge800
Figma: vivid/size/large/900
CSS: --vivid-size-large-900
Flutter: vividSizeLarge900
Figma: vivid/size/large/1000
CSS: --vivid-size-large-1000
Flutter: vividSizeLarge1000
Figma: vivid/size/large/1100
CSS: --vivid-size-large-1100
Flutter: vividSizeLarge1100
Figma: vivid/size/large/1200
CSS: --vivid-size-large-1200
Flutter: vividSizeLarge1200
Figma: vivid/size/large/1300
CSS: --vivid-size-large-1300
Flutter: vividSizeLarge1300