Fundations
Typography
Typography
A tipografia pode ajudar a criar hierarquias claras, organizar informações e orientar os usuários através de um produto ou experiência.
Fontes utilizadas
Satoshi
Regular
Medium
Semibold
Bold
a b c d e f h i j k l m n o p q r s t u v w x y z
Aa
Open Sans
Regular
Semibold
Bold
a b c d e f h i j k l m n o p q r s t u v w x y z
Aa
Desktop
Display
Utilize fontes imponentes e de destaque para títulos, transmitindo uma forte presença visual.
Preview
Name
Family
Weight
Size
LH
LHUnit
LS
LSUnit
Display / 80-medium
Display/80-medium
Satoshi
Medium
80
125
%
-4
Heading
Utilize fontes imponentes e de destaque para títulos, transmitindo uma forte presença visual.
Preview
Name
Family
Weight
Size
LH
LHUnit
LS
LSUnit
Heading / 64
Heading / 64
Satoshi
Medium
64
125
%
-4
Heading / 56
Heading / 56
Satoshi
Medium
56
125
%
-4
Heading / 48
Heading / 48
Satoshi
Medium
48
125
%
-4
Heading / 32
Heading / 32
Satoshi
Bold
32
135
%
-2
Body
Opte por fontes legíveis e equilibradas para o corpo do texto, garantindo uma experiência de leitura agradável.
Preview
Name
Family
Weight
Size
LH
LHUnit
LS
LSUnit
Text / 24 - bold
Text / 24 / bold
Open sans
Regular
24
140
%
0
%
Text / 24 - regular
Text / 24 / bold
Open sans
Regular
24
140
%
0
%
Text / 20 - semibold
Text / 20 / semibold
Open sans
Regular
20
150
%
0
%
Text / 20 - regular
Text / 20 / regular
Open sans
Regular
20
150
%
0
%
Text / 18 - semibold
Text / 18 / semibold
Open sans
Regular
18
150
%
0
%
Text / 18 - regular
Text / 18 / bold
Open sans
Regular
18
150
%
0
%
Text / 16 - regular
Text / 16 / semibold
Open sans
Semibold
16
150
%
0
%
Button / Large
Text / 18 / semibold
Open sans
Semibold
18
150
%
-1
%
Button / Medium
Text / 16 / semibold
Open sans
Semibold
24
150
%
-1
%
Mobile
Display
Utilize fontes imponentes e de destaque para títulos, transmitindo uma forte presença visual.
Preview
Name
Family
Weight
Size
LH
LHUnit
LS
LSUnit
Display / 32-medium
Display/80-medium
Satoshi
Medium
80
125
%
-4
Fundations
Colors
Palette
Um sistema de cores bem projetado pode ajudá-lo a aplicar cores à interface de maneira significativa.
Primary colors
Primary / Darkest
#FFF6EB
Primary / Dark
#FFE5C7
Primary / Main
#FFBA28
Primary / Light
#E4A424
Primary / Lighter
#A17419
Secondary colors
Secondary / Darkest
#EEF6F1
Secondary / Dark
#C9DFD1
Secondary / Main
#2CAB66
Secondary / Light
#27995B
Secondary / Lighter
#1C6C41
Neutral
Neutral / 1000
#24231E
Neutral / 900
#33322A
Neutral / 800
#3E3D34
Neutral / 700
#48473C
Neutral / 600
#504F43
Neutral / 500
#878681
Neutral / 400
#ADACA9
Neutral / 300
#CCCCCA
Neutral / 200
#E7E7E6
Neutral / 100
#F3F3F3
Neutral / 50
#FAFAF9