Vivid API

Typography

Describes the concept of typography as a compound token (font size, line height, weight, and family), explains style roles, and lists all heading, body, caption, input, and code tokens.

Used for properties like font, text styles, etc.

Heading

Tokens used for headings and titles, such as page titles, section titles, and headlines.

Keywords: heading, title, headline, display, section title, page title

Figma: ❌ [WIP] vivid/typography/heading/100
CSS: --❌ [WIP] vivid/typography/heading/100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/200
CSS: --❌ [WIP] vivid/typography/heading/200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/300
CSS: --❌ [WIP] vivid/typography/heading/300
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/400
CSS: --❌ [WIP] vivid/typography/heading/400
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/500
CSS: --❌ [WIP] vivid/typography/heading/500
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/600
CSS: --❌ [WIP] vivid/typography/heading/600
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/700
CSS: --❌ [WIP] vivid/typography/heading/700
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/800
CSS: --❌ [WIP] vivid/typography/heading/800
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/900
CSS: --❌ [WIP] vivid/typography/heading/900
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/1000
CSS: --❌ [WIP] vivid/typography/heading/1000
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/1100
CSS: --❌ [WIP] vivid/typography/heading/1100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/1200
CSS: --❌ [WIP] vivid/typography/heading/1200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/heading/1300
CSS: --❌ [WIP] vivid/typography/heading/1300
The quick brown fox jumps over the lazy dog

Body

Tokens used for body text, such as paragraphs, lists, and general content.

Keywords: body, text, paragraph, content, copy, description

Figma: ❌ [WIP] vivid/typography/body/100
CSS: --❌ [WIP] vivid/typography/body/100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/200
CSS: --❌ [WIP] vivid/typography/body/200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/300
CSS: --❌ [WIP] vivid/typography/body/300
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/400
CSS: --❌ [WIP] vivid/typography/body/400
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/500
CSS: --❌ [WIP] vivid/typography/body/500
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/600
CSS: --❌ [WIP] vivid/typography/body/600
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/700
CSS: --❌ [WIP] vivid/typography/body/700
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/800
CSS: --❌ [WIP] vivid/typography/body/800
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/900
CSS: --❌ [WIP] vivid/typography/body/900
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/1000
CSS: --❌ [WIP] vivid/typography/body/1000
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/1100
CSS: --❌ [WIP] vivid/typography/body/1100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/1200
CSS: --❌ [WIP] vivid/typography/body/1200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/body/1300
CSS: --❌ [WIP] vivid/typography/body/1300
The quick brown fox jumps over the lazy dog

Caption

Tokens used for captions, such as image captions, figure captions, form field labels, and other secondary text.

Keywords: caption, label, secondary text, image caption, figure caption, helper text

Figma: ❌ [WIP] vivid/typography/caption/100
CSS: --❌ [WIP] vivid/typography/caption/100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/200
CSS: --❌ [WIP] vivid/typography/caption/200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/300
CSS: --❌ [WIP] vivid/typography/caption/300
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/400
CSS: --❌ [WIP] vivid/typography/caption/400
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/500
CSS: --❌ [WIP] vivid/typography/caption/500
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/600
CSS: --❌ [WIP] vivid/typography/caption/600
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/700
CSS: --❌ [WIP] vivid/typography/caption/700
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/800
CSS: --❌ [WIP] vivid/typography/caption/800
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/900
CSS: --❌ [WIP] vivid/typography/caption/900
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/1000
CSS: --❌ [WIP] vivid/typography/caption/1000
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/1100
CSS: --❌ [WIP] vivid/typography/caption/1100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/1200
CSS: --❌ [WIP] vivid/typography/caption/1200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/caption/1300
CSS: --❌ [WIP] vivid/typography/caption/1300
The quick brown fox jumps over the lazy dog

Input

Tokens used for the content of input fields, such as form fields, dropdowns, and other interactive elements.

Keywords: input, form field, dropdown, interactive text, user input

Figma: ❌ [WIP] vivid/typography/input/100
CSS: --❌ [WIP] vivid/typography/input/100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/200
CSS: --❌ [WIP] vivid/typography/input/200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/300
CSS: --❌ [WIP] vivid/typography/input/300
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/400
CSS: --❌ [WIP] vivid/typography/input/400
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/500
CSS: --❌ [WIP] vivid/typography/input/500
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/600
CSS: --❌ [WIP] vivid/typography/input/600
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/700
CSS: --❌ [WIP] vivid/typography/input/700
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/800
CSS: --❌ [WIP] vivid/typography/input/800
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/900
CSS: --❌ [WIP] vivid/typography/input/900
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/1000
CSS: --❌ [WIP] vivid/typography/input/1000
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/1100
CSS: --❌ [WIP] vivid/typography/input/1100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/1200
CSS: --❌ [WIP] vivid/typography/input/1200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/input/1300
CSS: --❌ [WIP] vivid/typography/input/1300
The quick brown fox jumps over the lazy dog

Code

Tokens used for code snippets, such as inline code, code blocks, and other monospaced text.

Keywords: code, monospaced, inline code, code block, programming text

Figma: ❌ [WIP] vivid/typography/code/100
CSS: --❌ [WIP] vivid/typography/code/100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/200
CSS: --❌ [WIP] vivid/typography/code/200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/300
CSS: --❌ [WIP] vivid/typography/code/300
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/400
CSS: --❌ [WIP] vivid/typography/code/400
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/500
CSS: --❌ [WIP] vivid/typography/code/500
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/600
CSS: --❌ [WIP] vivid/typography/code/600
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/700
CSS: --❌ [WIP] vivid/typography/code/700
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/800
CSS: --❌ [WIP] vivid/typography/code/800
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/900
CSS: --❌ [WIP] vivid/typography/code/900
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/1000
CSS: --❌ [WIP] vivid/typography/code/1000
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/1100
CSS: --❌ [WIP] vivid/typography/code/1100
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/1200
CSS: --❌ [WIP] vivid/typography/code/1200
The quick brown fox jumps over the lazy dog
Figma: ❌ [WIP] vivid/typography/code/1300
CSS: --❌ [WIP] vivid/typography/code/1300
The quick brown fox jumps over the lazy dog