Marca / Extra
#FFD23F
Ação principal, progresso e conquista.
Design system v1.2
Uma base.
Toda a experiência.
Cores, letras e formas que dão consistência ao Ponto Extra.
Bateu o ponto. Ganhou pontos.
Paleta
Cada cor tem um propósito.
Ink
#0B0D12
Fundo escuro
Surface
#151923
Superfícies elevadas
Light
#F5F4EF
Fundo claro
Sucesso
#22C55E
Concluído e conquistado
Atenção
#F5A524
Prazos e pendências
Perigo
#F04E4E
Perda e não realizado
Info
#5B8CFF
Informação e contexto
Chart Purple
#A855F7
Só categorias de gráficos
Cor sempre acompanhada de texto, ícone ou forma. Roxo nunca representa estado.
Tipografia
Personalidade nos títulos. Clareza em cada palavra.
Space Grotesk
Títulos e númerosCada conquista conta.
Geometria firme, presença humana.
Inter
Interface e leituraO próximo passo começa com uma leitura clara.
Base de 16 px. Espaço para respirar.
Hierarquia em prática
Exemplos de tamanho e formatação.
Percentual · 48 px
85%
Valor · 40 px
R$ 320,00
Números e dinheiro maiores que os títulos de card.
Espaçamentos
Um ritmo comum, do detalhe à estrutura.
xs8 px
sm12 px
md16 px
lg24 px
xl32 px
2xl48 px
16 px de respiro mínimo nos cards; 48 px entre grandes grupos.
Raios
Formas suaves, com a mesma assinatura.
Controles
12 px
Controles amplos
16 px
Cards
20 px
Cards de destaque
28 px
Chips
Completo
Clareza é parte da base.
Texto a partir de 16 px, toque de no mínimo 44 px e foco visível nos dois temas.