Getting Started
All tokens Font Font Size Line Height Space Border Radius Color Color Scales
All Components BadgeBannerButtonCardCheckboxCodeContainerDividerFieldsetIconInputLayoutLinkNavigationRadioSelectTableTabsTextTextareaToastToggle

Design Tokens

Foundational values that define the visual style of the design system, including colors, typography, spacing, and more.

Font

Example

Description

Token

Outfit

Font family for the Volt design system.

var(--v-font)

Geist Mono

Only used for code snippets and code examples.

var(--v-font-mono)

Font Size

Example

Description

Token

Aa

Used for small hint text.

var(--v-font-size-xs)

Aa

Used for smaller components.

var(--v-font-size-s)

Aa

Default body text size.

var(--v-font-size-m)

Aa

Large text size.

var(--v-font-size-l)

Aa

Used for small headers.

var(--v-font-size-xl)

Aa

Used for subheaders.

var(--v-font-size-2xl)

Aa

Used for large headings. Only once per page.

var(--v-font-size-3xl)

Line Height

Example

Description

Token

Line
Height

Used with xs font size.

var(--v-line-height-xs)

Line
Height

Use with s font size.

var(--v-line-height-s)

Line
Height

Use with m font size.

var(--v-line-height-m)

Line
Height

Use with l font size.

var(--v-line-height-l)

Line
Height

Use with xl font size.

var(--v-line-height-xl)

Line
Height

Use with 2xl font size.

var(--v-line-height-2xl)

Line
Height

Use with 3xl font size.

var(--v-line-height-3xl)

Space

Example

Description

Token

Extra small spacing.

var(--v-space-xs)

Small spacing

var(--v-space-s)

Default spacing.

var(--v-space-m)

Large spacing.

var(--v-space-l)

Extra large spacing.

var(--v-space-xl)

Extra extra large spacing.

var(--v-space-2xl)

Border Radius

Example

Description

Token

Default border radius.

var(--v-radius)

Rounded border radius used in certain components.

var(--v-radius-round)

Color

Color

Description

Token

Background color of the content area.

var(--v-color-background)

Background color of surfaces on top of the background.

var(--v-color-surface)

Background color of surfaces on top of surfaces.

var(--v-color-surface-raised)

Default color for text.

var(--v-color-text)

Subdued color for body text.

var(--v-color-text-weak)

More subdued color for body text.

var(--v-color-text-weaker)

Darkest text color used in placeholders for form elements.

var(--v-color-text-weakest)

Default border color.

var(--v-color-border)

Use when there is an error present or when something will be deleted.

var(--v-color-danger)

Use to warn the user.

var(--v-color-warning)

To convey success.

var(--v-color-success)

Solid neutral status color used on components like badge.

var(--v-color-neutral)

Color Scales

Gray

Success

Warning

Danger

Info

Accent