Bolt Design System

Theming System

The color theming foundation of Bolt.

White

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-white class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Black

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-black class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Gray-xlight

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-gray-xlight class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Navy-dark

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-dark class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Navy

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Navy-light

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-light class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Teal

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Yellow

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-yellow class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Orange

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Pink

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Wine

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-wine class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Berry

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-berry class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

Background Gradient

Violet

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-violet class.

	CSS custom property
Text	var(--m-bolt-text)
Background	var(--m-bolt-bg)
Background Highlight	var(--m-bolt-bg-highlight)
Background Lowlight	var(--m-bolt-bg-lowlight)
Primary	var(--m-bolt-primary)
Text on Primary	var(--m-bolt-text-on-primary)
Secondary	var(--m-bolt-secondary)
Text on Secondary	var(--m-bolt-text-on-secondary)
Tertiary	var(--m-bolt-tertiary)
Text on Tertiary	var(--m-bolt-text-on-tertiary)
Link Text	var(--m-bolt-link)
Disabled	var(--m-bolt-text-on-disabled)
Text on Disabled	var(--m-bolt-disabled)
Headline Text	var(--m-bolt-headline)
Border	var(--m-bolt-border)
Neutral	var(--m-bolt-neutral)