Design System Azul Moderno
Uma coleção completa de componentes, padrões visuais e diretrizes para construir interfaces modernas
Paleta de Cores
Cores cuidadosamente selecionadas para máxima harmonia visual
Cores Primárias
Primária
#0EA5E9
Primária
#0EA5E9
Escuro
#0284C7
Secundária
#38BDF8
Cores Semânticas
Sucesso
#10B981
Aviso
#FBBF24
Erro
#EF4444
Luz
#F0F9FF
Tipografia
Hierarquia tipográfica clara e consistente
Estilos de Texto
Heading 1 - 56px
Poppins Bold - Para títulos principais
Heading 2 - 48px
Poppins Bold - Para seções
Heading 3 - 32px
Poppins SemiBold - Para subseções
Heading 4 - 24px
Poppins SemiBold - Para subtítulos
Corpo de texto em 16px com line-height de 1.6 para melhor legibilidade em parágrafos longos
Poppins Regular - Para corpo de texto
Texto pequeno em 12px para labels e notas
Poppins Small - Para textos secundários
Componentes
Elementos reutilizáveis para interfaces consistentes
Botões
Badges
Cards
Card Padrão
Este é um card padrão com bordas, sombra e efeito hover para melhor interatividade e feedback visual.
Card Moderno
Design limpo com tipografia bem hierarquizada, espaçamento generoso e bordas arredondadas.
Card Elegante
Componente versátil que pode ser usado para apresentar informações, destaques ou chamadas à ação.
Formulários
Campos estruturados para melhor experiência do usuário
Tabelas
Apresentação estruturada de dados tabulares
Tabela com Dados
| Produto | Categoria | Preço | Estoque | Status |
|---|---|---|---|---|
| Design System Pro | Software | R$ 299,00 | 45 | Ativo |
| Template Admin | Template | R$ 149,00 | 12 | Baixo |
| UI Kit Azul | Design | R$ 199,00 | 78 | Ativo |
| Ícones Pack | Assets | R$ 49,00 | 156 | Ativo |
Gráficos
Visualizações de dados com design consistente
Gráfico de Barras - Vendas Mensais
Gráfico de Barras - Crescimento Trimestral
Métricas por Região
Sudeste
Sul
Nordeste
Centro-Oeste
Resumo Executivo
Características principais do Design System
🎨 Cores
8 cores base + variações neutras para criar hierarquia visual consistente em toda a plataforma.
✏️ Tipografia
Poppins como fonte principal com fallbacks para melhor compatibilidade e legibilidade.
🔘 Componentes
Botões, formulários, cards, badges e filtros totalmente documentados e funcionais.
📐 Espaçamento
Escala de espaçamento consistente baseada em múltiplos de 4px para alinhamento perfeito.
♿ Acessibilidade
WCAG 2.1 AA com contrast ratios adequados e navegação totalmente acessível por teclado.
📱 Responsivo
Design responsivo que funciona perfeitamente em todos os dispositivos e tamanhos de tela.
Princípios Fundamentais
Consistência
Todos os elementos seguem os mesmos padrões de design.
Acessibilidade
Interfaces acessíveis para todos os usuários.
Modernidade
Design contemporâneo com efeitos suaves.
Reutilização
Componentes modulares e reutilizáveis.