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

Poppins Regular 14px/160%

Lorem ipsum dolor

Poppins Regular 16px/160%

Lorem ipsum dolor

Poppins Regular 12px/20px

Lorem ipsum dolor

Poppins Medium 16px/24px

Lorem ipsum dolor

Poppins Regular 14px/21px

Lorem ipsum dolor

Poppins SemiBold 14px/21px

Lorem ipsum dolor

Poppins SemiBold 20px/30px

Lorem ipsum dolor

Sofia Pro Regular 24px/130%

Lorem ipsum dolor

Sofia Pro Regular 56px/110%

Lorem ipsum dolor

Sofia Pro Regular 16px/160%

Lorem ipsum dolor

Sofia Pro Regular 18px/160%

Lorem ipsum dolor

Sofia Pro Regular 32px/130%

Lorem ipsum dolor

Sofia Pro Regular 24px/130%

Lorem ipsum dolor

Poppins SemiBold 20px/30px

Color styles

Primary Color / White 100 - #FFFFFF

Black / 100 - #090D12

Primary Color/Black 100 - #090D12

White / 100 - #FFFFFF

Secondary Grey/Secondary 500 - #A6B0BF

Secondary Grey/Secondary 600 - #D6DADF

Secondary Blue/Secondary 100 - #1769FF

Primary / 100 - #1769FF

Secondary Grey/Secondary 800 - #F3F4F6

Primary / 30 - #E8F0FF

Primary/50 - #D1E1FF

Base/white - #FFFFFF

p100 - #1769FF

Base/base90 - #353F5E

Primary/primary50 - #1769FF

Base/black - #08031D

Primary/primary10 - #E8F0FF

Primary/primary70 - #1254CC

Base/base70 - #646E8A

Extended/emerald30 - #88EAA9

Primary / 300 - #07204D

Extended/sunglow30 - #FFE39C

Black/300 - #748093

Secondary Grey/Secondary 200 - #445469

Special Color/Special 200 - #CCEEDC

Special Color/Special 100 - #FFF2D9

Success / 30 - #CCEEDC