You’re viewing documentation for our new design tokens, which are currently in Alpha. Some components may not fully support them yet, and parts of the documentation may still be incomplete as we continue development.
Thanks for your patience and understanding.
If you have feedback, we’d love to hear it—please reach out in the #ask-vivid Slack channel.
heading
Figma:
❌ [WIP] vivid/typography/heading/100
CSS:
--❌ [WIP] vivid/typography/heading/100
Flutter:
❌ [WIP] vividTypographyHeading100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/200
CSS:
--❌ [WIP] vivid/typography/heading/200
Flutter:
❌ [WIP] vividTypographyHeading200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/300
CSS:
--❌ [WIP] vivid/typography/heading/300
Flutter:
❌ [WIP] vividTypographyHeading300
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/400
CSS:
--❌ [WIP] vivid/typography/heading/400
Flutter:
❌ [WIP] vividTypographyHeading400
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/500
CSS:
--❌ [WIP] vivid/typography/heading/500
Flutter:
❌ [WIP] vividTypographyHeading500
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/600
CSS:
--❌ [WIP] vivid/typography/heading/600
Flutter:
❌ [WIP] vividTypographyHeading600
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/700
CSS:
--❌ [WIP] vivid/typography/heading/700
Flutter:
❌ [WIP] vividTypographyHeading700
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/800
CSS:
--❌ [WIP] vivid/typography/heading/800
Flutter:
❌ [WIP] vividTypographyHeading800
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/900
CSS:
--❌ [WIP] vivid/typography/heading/900
Flutter:
❌ [WIP] vividTypographyHeading900
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/1000
CSS:
--❌ [WIP] vivid/typography/heading/1000
Flutter:
❌ [WIP] vividTypographyHeading1000
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/1100
CSS:
--❌ [WIP] vivid/typography/heading/1100
Flutter:
❌ [WIP] vividTypographyHeading1100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/1200
CSS:
--❌ [WIP] vivid/typography/heading/1200
Flutter:
❌ [WIP] vividTypographyHeading1200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/heading/1300
CSS:
--❌ [WIP] vivid/typography/heading/1300
Flutter:
❌ [WIP] vividTypographyHeading1300
The quick brown fox jumps over the lazy dog
body
Figma:
❌ [WIP] vivid/typography/body/100
CSS:
--❌ [WIP] vivid/typography/body/100
Flutter:
❌ [WIP] vividTypographyBody100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/200
CSS:
--❌ [WIP] vivid/typography/body/200
Flutter:
❌ [WIP] vividTypographyBody200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/300
CSS:
--❌ [WIP] vivid/typography/body/300
Flutter:
❌ [WIP] vividTypographyBody300
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/400
CSS:
--❌ [WIP] vivid/typography/body/400
Flutter:
❌ [WIP] vividTypographyBody400
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/500
CSS:
--❌ [WIP] vivid/typography/body/500
Flutter:
❌ [WIP] vividTypographyBody500
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/600
CSS:
--❌ [WIP] vivid/typography/body/600
Flutter:
❌ [WIP] vividTypographyBody600
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/700
CSS:
--❌ [WIP] vivid/typography/body/700
Flutter:
❌ [WIP] vividTypographyBody700
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/800
CSS:
--❌ [WIP] vivid/typography/body/800
Flutter:
❌ [WIP] vividTypographyBody800
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/900
CSS:
--❌ [WIP] vivid/typography/body/900
Flutter:
❌ [WIP] vividTypographyBody900
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/1000
CSS:
--❌ [WIP] vivid/typography/body/1000
Flutter:
❌ [WIP] vividTypographyBody1000
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/1100
CSS:
--❌ [WIP] vivid/typography/body/1100
Flutter:
❌ [WIP] vividTypographyBody1100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/1200
CSS:
--❌ [WIP] vivid/typography/body/1200
Flutter:
❌ [WIP] vividTypographyBody1200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/body/1300
CSS:
--❌ [WIP] vivid/typography/body/1300
Flutter:
❌ [WIP] vividTypographyBody1300
The quick brown fox jumps over the lazy dog
caption
Figma:
❌ [WIP] vivid/typography/caption/100
CSS:
--❌ [WIP] vivid/typography/caption/100
Flutter:
❌ [WIP] vividTypographyCaption100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/200
CSS:
--❌ [WIP] vivid/typography/caption/200
Flutter:
❌ [WIP] vividTypographyCaption200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/300
CSS:
--❌ [WIP] vivid/typography/caption/300
Flutter:
❌ [WIP] vividTypographyCaption300
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/400
CSS:
--❌ [WIP] vivid/typography/caption/400
Flutter:
❌ [WIP] vividTypographyCaption400
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/500
CSS:
--❌ [WIP] vivid/typography/caption/500
Flutter:
❌ [WIP] vividTypographyCaption500
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/600
CSS:
--❌ [WIP] vivid/typography/caption/600
Flutter:
❌ [WIP] vividTypographyCaption600
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/700
CSS:
--❌ [WIP] vivid/typography/caption/700
Flutter:
❌ [WIP] vividTypographyCaption700
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/800
CSS:
--❌ [WIP] vivid/typography/caption/800
Flutter:
❌ [WIP] vividTypographyCaption800
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/900
CSS:
--❌ [WIP] vivid/typography/caption/900
Flutter:
❌ [WIP] vividTypographyCaption900
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/1000
CSS:
--❌ [WIP] vivid/typography/caption/1000
Flutter:
❌ [WIP] vividTypographyCaption1000
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/1100
CSS:
--❌ [WIP] vivid/typography/caption/1100
Flutter:
❌ [WIP] vividTypographyCaption1100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/1200
CSS:
--❌ [WIP] vivid/typography/caption/1200
Flutter:
❌ [WIP] vividTypographyCaption1200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/caption/1300
CSS:
--❌ [WIP] vivid/typography/caption/1300
Flutter:
❌ [WIP] vividTypographyCaption1300
The quick brown fox jumps over the lazy dog
input
Figma:
❌ [WIP] vivid/typography/input/100
CSS:
--❌ [WIP] vivid/typography/input/100
Flutter:
❌ [WIP] vividTypographyInput100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/200
CSS:
--❌ [WIP] vivid/typography/input/200
Flutter:
❌ [WIP] vividTypographyInput200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/300
CSS:
--❌ [WIP] vivid/typography/input/300
Flutter:
❌ [WIP] vividTypographyInput300
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/400
CSS:
--❌ [WIP] vivid/typography/input/400
Flutter:
❌ [WIP] vividTypographyInput400
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/500
CSS:
--❌ [WIP] vivid/typography/input/500
Flutter:
❌ [WIP] vividTypographyInput500
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/600
CSS:
--❌ [WIP] vivid/typography/input/600
Flutter:
❌ [WIP] vividTypographyInput600
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/700
CSS:
--❌ [WIP] vivid/typography/input/700
Flutter:
❌ [WIP] vividTypographyInput700
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/800
CSS:
--❌ [WIP] vivid/typography/input/800
Flutter:
❌ [WIP] vividTypographyInput800
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/900
CSS:
--❌ [WIP] vivid/typography/input/900
Flutter:
❌ [WIP] vividTypographyInput900
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/1000
CSS:
--❌ [WIP] vivid/typography/input/1000
Flutter:
❌ [WIP] vividTypographyInput1000
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/1100
CSS:
--❌ [WIP] vivid/typography/input/1100
Flutter:
❌ [WIP] vividTypographyInput1100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/1200
CSS:
--❌ [WIP] vivid/typography/input/1200
Flutter:
❌ [WIP] vividTypographyInput1200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/input/1300
CSS:
--❌ [WIP] vivid/typography/input/1300
Flutter:
❌ [WIP] vividTypographyInput1300
The quick brown fox jumps over the lazy dog
code
Figma:
❌ [WIP] vivid/typography/code/100
CSS:
--❌ [WIP] vivid/typography/code/100
Flutter:
❌ [WIP] vividTypographyCode100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/200
CSS:
--❌ [WIP] vivid/typography/code/200
Flutter:
❌ [WIP] vividTypographyCode200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/300
CSS:
--❌ [WIP] vivid/typography/code/300
Flutter:
❌ [WIP] vividTypographyCode300
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/400
CSS:
--❌ [WIP] vivid/typography/code/400
Flutter:
❌ [WIP] vividTypographyCode400
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/500
CSS:
--❌ [WIP] vivid/typography/code/500
Flutter:
❌ [WIP] vividTypographyCode500
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/600
CSS:
--❌ [WIP] vivid/typography/code/600
Flutter:
❌ [WIP] vividTypographyCode600
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/700
CSS:
--❌ [WIP] vivid/typography/code/700
Flutter:
❌ [WIP] vividTypographyCode700
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/800
CSS:
--❌ [WIP] vivid/typography/code/800
Flutter:
❌ [WIP] vividTypographyCode800
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/900
CSS:
--❌ [WIP] vivid/typography/code/900
Flutter:
❌ [WIP] vividTypographyCode900
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/1000
CSS:
--❌ [WIP] vivid/typography/code/1000
Flutter:
❌ [WIP] vividTypographyCode1000
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/1100
CSS:
--❌ [WIP] vivid/typography/code/1100
Flutter:
❌ [WIP] vividTypographyCode1100
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/1200
CSS:
--❌ [WIP] vivid/typography/code/1200
Flutter:
❌ [WIP] vividTypographyCode1200
The quick brown fox jumps over the lazy dog
Figma:
❌ [WIP] vivid/typography/code/1300
CSS:
--❌ [WIP] vivid/typography/code/1300
Flutter:
❌ [WIP] vividTypographyCode1300
The quick brown fox jumps over the lazy dog