Tipografia

Headings

heading_0

heading_1

heading_2

heading_3

heading_4

heading_5

Bodies

body_large_bold

body_large

body_medium_bold

body_medium

body_small_bold

body_small

Captions

caption

caption_UPPERCASE

caption_bold

CTA

cta_bold

cta_semi

Placeholder

placeholder_small

Para editar cores e/ou margin-bottom, é recomendado que se utilize combo-classes, ou seja, adicionar uma nova classe no elemento para alterar essas propriedades.

Exemplos:

.space

.color

Cores

Brand primary

brand-primary/Darkest

#1F4E4D

brand-primary/Dark

#3A8071

brand-primary/Medium

#13C081

brand-primary/Light

#C9E2C9

brand-primary/Lighten

#F2FBF7

Brand Secondary

brand-secondary/Darkest

#773017

brand-secondary/Dark

#BC5D5C

brand-secondary/Medium

#F19997

brand-secondary/Light

#FBE0E0

brand-secondary/Lighten

#FEF5F5

Brand Support

brand-support/Darkest

#520F6D

brand-support/Dark

#742794

brand-support/Medium

#DDB1FA

brand-support/Light

#F1DDFF

brand-support/Lighten

#FDFAFF

Alternative Primary

alt-primary/Darkest

#102436

alt-primary/Dark

#397787

alt-primary/Medium

#07c1d6

alt-primary/Light

#BAE3EB

alt-primary/Lighten

#EEF7FB

Alternative Secondary

alt-secondary/Darkest

#00745F

alt-secondary/Dark

#05B797

alt-secondary/Medium

#65DAC5

alt-secondary/Light

#85F4E0

alt-secondary/Lighten

#F1FFFD

Alternative Support

alt-support/Darkest

#CB7C5A

alt-support/Dark

#DFAB7C

alt-support/Medium

#F9E8C8

alt-support/Light

#FAF1E6

alt-support/Lighten

#FDFAF7

Base

base/100

#000000

base/80

#425158

base/60

#8E9BA1

base/40

#BBC3C7

base/20

#DDE1E3

base/10

#F4F5F6

base/0

#FFFFFF