Fundamentos
Fundamentos visuais
Base do design system: paleta de cores, escalas, tipografia, espaçamento, raios e sombras.
Cores de marca
Roxo e teal carregam a interface. Coral e amarelo aparecem como acentos pontuais.
Roxo / Primary
#7d0085
Roxo soft
#f3e1f4
Teal / Accent
#0fc2b5
Teal soft
#dff8f5
Coral
#ff3d33
Amarelo
#fcc200
Escalas de cor
Variações de 50 a 900. Use tons claros para fundos e tons escuros para texto e contraste.
Roxo
50 → 90050#faf0fb
100#f3e1f4
200#e3bce7
300#cf8fd6
400#b25cbd
500#9333a0
600#7d0085
700#67006e
800#4f0055
900#36003b
Teal
50 → 90050#e6faf8
100#c4f3ee
200#8de7dd
300#52d6c9
400#22c8b9
500#0fc2b5
600#0aa097
700#077e77
800#055c57
900#033a37
Coral
50 → 90050#fff0ef
100#ffdad7
200#ffb1ab
300#ff857d
400#ff5f55
500#ff3d33
600#d92e25
700#b0231c
800#7d1814
900#4d0e0b
Amarelo
50 → 90050#fff9e0
100#fff0b3
200#ffe480
300#ffd84d
400#fdcc20
500#fcc200
600#d9a500
700#a67e00
800#735700
900#403100
Neutros
50 → 9000#ffffff
50#f5f5f5
100#ebebeb
200#d6d6d6
300#bdbdbd
400#9e9e9e
500#757575
600#5c5c5c
700#424242
800#333333
900#000000
Tipografia
Poppins para títulos, Open Sans para texto corrido.
Display — Poppins
Aa
200 · 300 · 400 · 500 · 600 · 700
Texto — Open Sans
Aa
300 · 400 · 500 · 600 · 700
Heading 1 — Poppins
Heading 2 — Poppins
Heading 3 — Poppins
Parágrafo padrão em Open Sans, com altura de linha confortável e contraste suficiente.
Texto secundário / muted para apoio e legendas.
Espaçamento
Escala 4px-base utilizada em paddings, margins e gaps.
2xs4px
xs8px
sm12px
md16px
lg24px
xl32px
2xl48px
3xl64px
Raios
Border-radius padronizados para cards, inputs e botões.
sm · 4px
md · 6px
lg · 8px
xl · 12px
2xl · 16px
full · 9999px
Sombras
Camadas de elevação para profundidade.
shadow / sm
shadow / md
shadow / lg
shadow / xl