Heading H1

100px

Heading H2

60px

Heading H3

32px

Heading H4

24px

Heading H5

20px

Heading H6

Body Font: SF PRO Display

24px

Body text L

20px

Body text M

16px

Body text S

Typography

Primary

#FFFFFF

Accent - Green

#12B667

Accent - Lavanda Suave

#F7F0E4

Accent - Rosa Neve

#F8E9E3

Accent - Verde Menta

#ECF3E3

Accent - Azul Gelo

#E8F5F6

Dark

#242526

Dark - 60

#7C7C7D - 60%

Dark - 30

#BDBEBE - 30%

Light

#CBCBCB

Light - 60

#EAEAEA - 60%

Light - 30

#F8F8F8 - 30%

Neutral colors

Estas são as cores neutras principais do guia de estilo que compõem a maioria dos designs de UI.

Secondary colors

As cores secundárias são usadas para dar suporte às cores primárias na UI. As cores secundárias escolhidas devem ser usadas com moderação ou como destaques junto com as cores primárias para elementos como botões secundários, comprimidos ou etiquetas.

Primary colors

A cor primária é, em última análise, a cor "básica" da sua marca, ela é usada em todos os elementos de uma UI, incluindo botões, bordas, preenchimentos e muitas outras áreas. A cor primária definirá toda a aparência da UI.