Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to variables so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Style panel on the right and add it as a variable by clicking the purple dot next to a color property.

Text styles

title/80

Unytour Semi Bold 80px/100%

title/60px

Satoshi Variable Regular 60px/110%

title/45 unytour

Unytour Semi Bold 45px/110%

title/45px

Satoshi Variable Medium 45px/110%

title/35px

Satoshi Variable Medium 35px/115%

title/30px

Satoshi Variable Medium 30px/110%

subtitle/small

Satoshi Variable Bold 14px/150%

subtitle/big

Satoshi Variable Bold 18px/150%

paragraph/25px

Unytour Medium 25px/110%

paragraph/21 bold

Satoshi Variable Bold 21px/140%

paragraph/19 bold

Satoshi Variable Bold 18px/140%

paragraph/19px

Satoshi Variable Medium 18px/140%

paragraph/16px

Satoshi Variable Medium 16px/140%

paragraph/14px

Satoshi Variable Medium 14px/150%

paragraph/12px

Satoshi Variable Medium 12px/120%

button/primary

Satoshi Variable Bold 18px/18px

button/text caps

Satoshi Variable Medium 14px/120%

link/text light

Satoshi Variable Regular 16px/140%

link/text

Satoshi Variable Medium 16px/140%

Color styles

Mountain Meadow - #21B29C

Iceberg - #D0F7EF

Black - #1F1F1F

Dark Gray - #7E7E7E

RAL 7016 - #383E42

Light Gray - #F7F7F7

White - #FFFFFF

Text Color styles

Mountain Meadow - #21B29C

Iceberg - #D0F7EF

Dark Gray - #7E7E7E

Black - #1F1F1F

Middle Gray - #a3a3a3

RAL 7016 - #383E42

Light Gray - #F7F7F7

White - #FFFFFF

Button styles

Primary Button

Secondary Button

Third Button