helios

Options

Color Palette:

White, black, grey, and red are not customizable due those colors always being needed.

Primary Color:

This is the defining color across your design system based on the color palette you've selected above.

Lightness Stops:

Defines the number of tints / shades for each selected color.

Border Radius:

Defines the rounding intensity of your main elements.

Colors
White

$token-color-white

Black

$token-color-black

Red

$token-color-red-10

$token-color-red-20

$token-color-red-60

$token-color-red-70

$token-color-red-80

$token-color-red-90

Grey

$token-color-grey-10

$token-color-grey-20

$token-color-grey-30

$token-color-grey-40

$token-color-grey-50

$token-color-grey-60

$token-color-grey-70

$token-color-grey-80

$token-color-grey-90

Purple

$token-color-purple-10

$token-color-purple-20

$token-color-purple-30

$token-color-purple-40

$token-color-purple-50

$token-color-purple-60

$token-color-purple-70

$token-color-purple-80

$token-color-purple-90

Plum

$token-color-plum-10

$token-color-plum-20

$token-color-plum-30

$token-color-plum-40

$token-color-plum-50

$token-color-plum-60

$token-color-plum-70

$token-color-plum-80

$token-color-plum-90

Blue

$token-color-blue-10

$token-color-blue-20

$token-color-blue-30

$token-color-blue-40

$token-color-blue-50

$token-color-blue-60

$token-color-blue-70

$token-color-blue-80

$token-color-blue-90

Cobalt

$token-color-cobalt-10

$token-color-cobalt-20

$token-color-cobalt-30

$token-color-cobalt-40

$token-color-cobalt-50

$token-color-cobalt-60

$token-color-cobalt-70

$token-color-cobalt-80

$token-color-cobalt-90

Turquoise

$token-color-turquoise-10

$token-color-turquoise-20

$token-color-turquoise-30

$token-color-turquoise-40

$token-color-turquoise-50

$token-color-turquoise-60

$token-color-turquoise-70

$token-color-turquoise-80

$token-color-turquoise-90

Teal

$token-color-teal-10

$token-color-teal-20

$token-color-teal-30

$token-color-teal-40

$token-color-teal-50

$token-color-teal-60

$token-color-teal-70

$token-color-teal-80

$token-color-teal-90

Green

$token-color-green-10

$token-color-green-20

$token-color-green-30

$token-color-green-40

$token-color-green-50

$token-color-green-60

$token-color-green-70

$token-color-green-80

$token-color-green-90

Fern

$token-color-fern-10

$token-color-fern-20

$token-color-fern-30

$token-color-fern-40

$token-color-fern-50

$token-color-fern-60

$token-color-fern-70

$token-color-fern-80

$token-color-fern-90

Yellow

$token-color-yellow-10

$token-color-yellow-20

$token-color-yellow-30

$token-color-yellow-40

$token-color-yellow-50

$token-color-yellow-60

$token-color-yellow-70

$token-color-yellow-80

$token-color-yellow-90

Corn

$token-color-corn-10

$token-color-corn-20

$token-color-corn-30

$token-color-corn-40

$token-color-corn-50

$token-color-corn-60

$token-color-corn-70

$token-color-corn-80

$token-color-corn-90

Orange

$token-color-orange-10

$token-color-orange-20

$token-color-orange-30

$token-color-orange-40

$token-color-orange-50

$token-color-orange-60

$token-color-orange-70

$token-color-orange-80

$token-color-orange-90

Brick

$token-color-brick-10

$token-color-brick-20

$token-color-brick-30

$token-color-brick-40

$token-color-brick-50

$token-color-brick-60

$token-color-brick-70

$token-color-brick-80

$token-color-brick-90

Rust

$token-color-rust-10

$token-color-rust-20

$token-color-rust-30

$token-color-rust-40

$token-color-rust-50

$token-color-rust-60

$token-color-rust-70

$token-color-rust-80

$token-color-rust-90

Magenta

$token-color-magenta-10

$token-color-magenta-20

$token-color-magenta-30

$token-color-magenta-40

$token-color-magenta-50

$token-color-magenta-60

$token-color-magenta-70

$token-color-magenta-80

$token-color-magenta-90

Pink

$token-color-pink-10

$token-color-pink-20

$token-color-pink-30

$token-color-pink-40

$token-color-pink-50

$token-color-pink-60

$token-color-pink-70

$token-color-pink-80

$token-color-pink-90

Spacing

$token-spacing-2x-small: 0.25rem

$token-spacing-small: 0.5rem

$token-spacing-base: 1rem

$token-spacing-large: 1.5rem

$token-spacing-2x-large: 2rem

$token-spacing-3x-large: 3rem

Radius

$token-radius-small: 0.25rem

$token-radius-medium: 0.5rem

$token-radius-large: 4rem

Font

$token-font-weight-bold: 700

$token-font-weight-semibold: 600

$token-font-weight-regular: 500

$token-font-size-5x-large: 3rem

$token-font-size-4x-large: 2.5rem

$token-font-size-3x-large: 2rem

$token-font-size-2x-large: 1.5rem

$token-font-size-large: 1.15rem

$token-font-size-base: 1rem

$token-font-size-small: 0.9rem

$token-font-size-2x-small: 0.75rem