Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.

Text styles

Lorem ipsum dolor

Helvetica Neue Regular 70px/110.00000238418579%

Lorem ipsum dolor

Helvetica Neue Regular 50px/110.00000238418579%

Lorem ipsum dolor

Helvetica Neue Medium 18px/150%

Lorem ipsum dolor

Helvetica Neue Regular 32px/150%

Lorem ipsum dolor
Lorem ipsum dolor

Helvetica Neue Regular 18px/150%

Lorem ipsum dolor

Helvetica Neue Regular 24px/100%

Lorem ipsum dolor

Helvetica Neue Regular 20px/undefinedpx

Lorem ipsum dolor

Helvetica Neue Regular 18px/100%

Lorem ipsum dolor

Helvetica Neue Regular 18px/100%

Lorem ipsum dolor

Helvetica Neue Regular 14px/100%

Lorem ipsum dolor

Helvetica Neue Regular 12px/100%

Color styles

Construction - #9747FF

Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.

Color styles

Construction - #9747FF

layer/01/default - #FFFFFF

layer/01/hover-accent - #262626

layer/02/default - #D9D9D9

layer/02/hover-accent - #262626

layer/invert/default - #262626

layer/invert/hover - #575757

fg/primary - #262626

fg/invert - #FFFFFF

fg/secondary - #575757

helper/highlight - #E3F8FF

helper/highlight - #80DFFF

helper/dark - #3D3D3D

helper/blur - #FFFFFF

border/dark - #262626