Design System
Documentação completa do sistema de design do B3 Dividendos Analyzer. Aqui você encontra todas as especificações de cores, tipografia, componentes e padrões de design.
Cores da Marca
Teal (#14b8a6) → Emerald (#10b981)
Cores
Tokens de cor do design system, incluindo cores semânticas, de marca e funcionais.
Cores da Marca
Cores Semânticas
Background & Surface
Cores de Gráficos
Cores por Setor
Tipografia
Escalas tipográficas do design system usando as fontes Geist Sans e Geist Mono.
Espaçamento
Sistema de espaçamento baseado em múltiplos de 4px.
Componentes
Biblioteca de componentes UI baseados em shadcn/ui com customizações para o projeto.
Formulário
Feedback
Layout
Conteúdo do card aqui.
Conteúdo com gradiente.
Overlay
Dados
| Ticker | Nome | Preço | DY |
|---|---|---|---|
| TAEE11 | Transmissora Aliança | R$ 12,50 | 8.5% |
| BBDC4 | Bradesco | R$ 14,20 | 6.2% |
Ícones
Biblioteca de ícones Lucide React utilizados no projeto.
Exportar
Exporte o Design System para uso em outras ferramentas como Canva, Figma ou documentação.
- Tokens de cor com valores hex
- Escala tipográfica
- Sistema de espaçamento
- Cores por setor
- Todos os tokens de cor
- Documentação de componentes
- Lista de ícones utilizados
- Exemplos de código
Clique no botão "Exportar para Canva" para baixar o arquivo JSON.
No Canva, use as cores e especificações do arquivo para criar seus designs.
Use os códigos hex das cores e as especificações tipográficas.