Design System
Sistema de design unificado da Integrare, estabelecendo padrões consistentes para experiências digitais excepcionais.
Design Consistente
Padrões visuais unificados que garantem coerência em todas as interfaces
Desenvolvimento Ágil
Componentes reutilizáveis que aceleram o processo de desenvolvimento
Experiência do Usuário
Foco em usabilidade e acessibilidade para todos os usuários
Missão
Transformar negócios através de soluções digitais inovadoras e resultados mensuráveis, contribuindo para o crescimento sustentável de nossos clientes.
Visão
Ser reconhecida como a principal referência em transformação digital e marketing estratégico, liderando inovações e tendências no mercado.
Valores
- Inovação Constante
- Excelência em Resultados
- Transparência e Ética
- Desenvolvimento Contínuo
- Foco no Cliente
Personalidade da Marca
Inovadora
Sempre à frente das tendências, buscando soluções criativas e disruptivas.
Estratégica
Focada em resultados mensuráveis e crescimento sustentável.
Colaborativa
Construindo parcerias duradouras baseadas em confiança e transparência.
Cores
Nossa paleta de cores foi cuidadosamente selecionada para transmitir profissionalismo, confiança e inovação, mantendo a flexibilidade necessária para diferentes aplicações.
Primary
#43669b Cor principal da marca, usada em elementos de destaque e CTAs
Primary Light
#5b7cb3 Variação mais clara da cor principal para estados hover e elementos secundários
Accent
#8b7339 Cor de destaque para elementos especiais e pontos de ênfase
Accent Light
#a38a45 Variação mais clara da cor de destaque para estados hover
Background
#1a1a1a Cor de fundo principal para interfaces escuras
Text
#f8f9fa Cor principal para textos em fundos escuros
Diretrizes de Uso
Contraste
Mantenha um contraste mínimo de 4.5:1 para textos pequenos e 3:1 para textos grandes
Hierarquia
Use cores primárias para elementos principais e cores de destaque com moderação
Acessibilidade
Considere usuários com daltonismo ao combinar cores em interfaces
Tipografia
Nossa tipografia foi escolhida para garantir legibilidade e hierarquia clara, mantendo a personalidade da marca em diferentes contextos.
Heading 1
font-size: 4rem font-weight: 700 line-height: 1.2 Usado em títulos principais e headlines de destaque
Heading 2
font-size: 2.5rem font-weight: 700 line-height: 1.3 Para subtítulos e seções principais
Heading 3
font-size: 1.75rem font-weight: 600 line-height: 1.4 Títulos de seções e cards
Lead Paragraph
font-size: 1.5rem font-weight: 400 line-height: 1.6 Parágrafos introdutórios e destaques
Body Text
font-size: 1rem font-weight: 400 line-height: 1.6 Texto principal para conteúdo
Small Text
font-size: 0.875rem font-weight: 400 line-height: 1.5 Textos secundários e legendas
Diretrizes de Uso
Hierarquia
Mantenha uma hierarquia clara usando diferentes tamanhos e pesos
Espaçamento
Use espaçamento adequado entre linhas e parágrafos para melhor legibilidade
Responsividade
Ajuste tamanhos de fonte para diferentes dispositivos mantendo a proporção
Botões
Ícones
ph ph-rocket ph ph-users ph ph-chart-line-up ph ph-star ph ph-chat-circle-dots ph ph-arrow-right Formulários
Componentes de formulário projetados para uma experiência de usuário intuitiva e acessível
Text Input
Campo de texto padrão para entrada de dados
background: rgba(255, 255, 255, 0.03) border: 1px solid rgba(255, 255, 255, 0.1) border-radius: 0.75rem Email Input
Campo específico para entrada de email com validação
padding: 1rem 3rem color: var(--text) font-size: 1rem Textarea
Campo para entrada de texto multilinha
min-height: 120px resize: vertical font-family: inherit Select Input
Campo de seleção com opções predefinidas
appearance: none custom dropdown icon Checkbox & Radio
Controles de seleção customizados
custom styled inputs accessible focus states Componentes
Biblioteca de componentes reutilizáveis projetados para consistência e flexibilidade
Alert Box
Componente para mensagens importantes e notificações do sistema.
Alert Box
Usado para comunicar informações importantes, avisos ou erros aos usuários.
background: rgba(67, 102, 155, 0.1) border-left: 4px solid var(--primary) padding: 1rem border-radius: 4px Badge
Elemento visual para destacar status, categorias ou labels.
background: var(--primary) border-radius: 50px padding: 0.5rem 1rem font-size: 0.9rem Tooltip
Fornece informações adicionais ao passar o mouse sobre elementos.
position: absolute background: rgba(0, 0, 0, 0.8) border-radius: 4px padding: 0.5rem 1rem top right bottom left Card Title
Card content with flexible layout options.
Card
Contêiner versátil para organizar e apresentar conteúdo.
background: rgba(255, 255, 255, 0.03) border: 1px solid rgba(255, 255, 255, 0.1) border-radius: 1rem padding: 1.5rem