Sistema de Design

Guia completo de tokens, componentes e diretrizes de uso para manter consistência visual em todos os produtos DN.IA.

Logo

A logo DN.IA representa a fusão entre desenvolvimento digital (DN) e inteligência artificial (IA). Use sempre as versões oficiais disponibilizadas.

Versões da Logo

Fundo Claro

Fundo Escuro

Paleta de Cores

Tokens primitivos que formam a base do sistema. O azul é a cor dominante (tecnologia/IA), o vermelho é usado com moderação para ações e destaques.

Tokens Semânticos

Cores mapeadas por função, não por valor. Isso permite que o sistema se adapte a diferentes contextos (light/dark mode) sem alterar a lógica dos componentes.

Tipografia

A fonte oficial da marca é Video (Canada Type) para títulos e headlines — moderna, geométrica, impactante. Para corpo de texto, usamos Verdana (com fallback Tahoma) pela legibilidade universal e disponibilidade como fonte de sistema. Rajdhani serve como fallback web para titulos.

Componentes

Exemplos de componentes construídos com os tokens do sistema. Note como o vermelho é reservado para ações de alta conversão.

Diretrizes de Uso

Regras para manter a consistência e o equilíbrio visual da marca.

Hierarquia de Cores

Proporção recomendada de uso das cores em interfaces.

Acessibilidade (WCAG 2.1)

Combinações de cores testadas para garantir legibilidade em diferentes contextos.

Espaçamento

Sistema de espaçamento baseado em múltiplos de 4px para consistência vertical e horizontal.

Light & Dark Mode

O sistema suporta ambos os modos através dos tokens semânticos, mantendo a identidade da marca em qualquer contexto.

Grid System & Breakpoints

Sistema responsivo baseado em breakpoints mobile-first. Use essas medidas para garantir consistência em todos os dispositivos.

Breakpoints

Container

Regras de Espaçamento

Iconografia

Usamos Lucide React como biblioteca de ícones. Tree-shakable, TypeScript completo, customizável via props. Explorar todos os ícones

Ícones Principais

Fundos de Ícones com Gradiente

Padrão DN.IA para ícones destacados em cards, botões e seções. Use gradientes para dar profundidade visual.

Tamanhos

Botão com Efeito Shine

Botões com gradiente DN.IA e efeito de brilho no hover. Ideal para CTAs principais.

Card KPI com Glow

Cards com efeito de glow no canto superior direito. O glow intensifica no hover.

Loading States

Estados de carregamento para manter o usuário informado durante operações assíncronas.

Componentes Adicionais

Componentes avançados para interfaces mais completas. Todos incluem atributos ARIA para acessibilidade.

DNA da Marca

A personalidade da DN.IA é construída a partir da interseção entre o biológico e o digital — entre o que nasce e o que é programado. DNA + Inteligência Artificial = Código.

Voz e Tom da Marca

A comunicação da DN.IA reflete suas três personalidades principais: Líder, Ousada e Sábia.

Princípios de Comunicação

Microcopy Guidelines

Padrões para textos de interface: botões, mensagens de erro, placeholders e notificações.

Motion Guidelines

Diretrizes para uso de animações e transições. Motion deve ser funcional, não decorativo.

Quando usar Motion

ARIA Labels Reference

Atributos ARIA essenciais para garantir acessibilidade. Use em conjunto com HTML semântico.

Roles Comuns

Implementação CSS

Copie e cole os tokens no seu projeto para começar.

Exportações

Arquivos prontos para importar em diferentes contextos de desenvolvimento.

:root {
  /* Colors - Primary */
  --color-blue-50: #EEF1FF;
  --color-blue-100: #D9E0FF;
  --color-blue-200: #B3C1FF;
  --color-blue-300: #8DA2FF;
  --color-blue-400: #6681FF;
  --color-blue-500: #3D61FF;
  --color-blue-600: #2D4EE0;
  --color-blue-700: #1F3BC2;
  --color-blue-800: #142A94;
  --color-blue-900: #0D1D66;

  /* Colors - Accent */
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #E41A11;
  --color-red-600: #C81610;
  --color-red-700: #A3120D;
  --color-red-800: #7F0E0A;
  --color-red-900: #5C0A07;

  /* Colors - Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-neutral-1000: #000000;

  /* Typography */
  --font-display: 'Video', 'Rajdhani', sans-serif;
  --font-body: 'poppins', 'Verdana', 'Tahoma', sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* Transitions */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

{
  "colors": {
    "blue": {
      "50": "#EEF1FF",
      "100": "#D9E0FF",
      "200": "#B3C1FF",
      "300": "#8DA2FF",
      "400": "#6681FF",
      "500": "#3D61FF",
      "600": "#2D4EE0",
      "700": "#1F3BC2",
      "800": "#142A94",
      "900": "#0D1D66"
    },
    "red": {
      "50": "#FEF2F2",
      "100": "#FEE2E2",
      "200": "#FECACA",
      "300": "#FCA5A5",
      "400": "#F87171",
      "500": "#E41A11",
      "600": "#C81610",
      "700": "#A3120D",
      "800": "#7F0E0A",
      "900": "#5C0A07"
    },
    "neutral": {
      "0": "#FFFFFF",
      "50": "#FAFAFA",
      "100": "#F5F5F5",
      "200": "#E5E5E5",
      "300": "#D4D4D4",
      "400": "#A3A3A3",
      "500": "#737373",
      "600": "#525252",
      "700": "#404040",
      "800": "#262626",
      "900": "#171717",
      "950": "#0A0A0A",
      "1000": "#000000"
    }
  },
  "typography": {
    "fontFamily": {
      "display": ["Video", "Rajdhani", "sans-serif"],
      "body": ["Plus Jakarta Sans", "sans-serif"]
    },
    "fontSize": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "3.75rem"
    }
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem"
  },
  "borderRadius": {
    "sm": "0.25rem",
    "md": "0.5rem",
    "lg": "0.75rem",
    "xl": "1rem",
    "2xl": "1.5rem",
    "full": "9999px"
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#EEF1FF',
          100: '#D9E0FF',
          200: '#B3C1FF',
          300: '#8DA2FF',
          400: '#6681FF',
          500: '#3D61FF',
          600: '#2D4EE0',
          700: '#1F3BC2',
          800: '#142A94',
          900: '#0D1D66',
        },
        red: {
          50: '#FEF2F2',
          100: '#FEE2E2',
          200: '#FECACA',
          300: '#FCA5A5',
          400: '#F87171',
          500: '#E41A11',
          600: '#C81610',
          700: '#A3120D',
          800: '#7F0E0A',
          900: '#5C0A07',
        },
      },
      fontFamily: {
        display: ['Video', 'Rajdhani', 'sans-serif'],
        body: ['Plus Jakarta Sans', 'sans-serif'],
      },
      borderRadius: {
        'sm': '0.25rem',
        'md': '0.5rem',
        'lg': '0.75rem',
        'xl': '1rem',
        '2xl': '1.5rem',
      },
      boxShadow: {
        'brand': '0 4px 14px 0 rgb(61 97 255 / 0.3)',
        'accent': '0 4px 14px 0 rgb(228 26 17 / 0.3)',
      },
    },
  },
  plugins: [],
}

Exemplo de Aplicação

Landing page demonstrando o design system em ação. Observe a hierarquia de cores: fundo branco dominante, preto para texto, azul para interações e vermelho apenas no CTA principal.

Novo: Diagnóstico de Maturidade em IA

Transforme seu negócio com Inteligência Artificial

Consultoria, implementação e mentoria para empresas que querem liderar a revolução da IA. Resultados mensuráveis em 90 dias.

Agendar Diagnóstico Gratuito Ver Cases de Sucesso

500+ Empresas atendidas

3x Aumento médio de produtividade

40% Redução de custos operacionais

Diagnóstico MTIA

Avaliação completa da maturidade em IA da sua empresa com plano de ação personalizado.

Saiba mais →

Implementação

Automação de processos e integração de IA com acompanhamento hands-on da nossa equipe.

Saiba mais →

Mais Popular

Mentoria Executiva

Programa intensivo para líderes que querem dominar IA e transformar suas organizações.

Saiba mais →

Pronto para começar?

Agende uma conversa com nossos especialistas e descubra como a IA pode transformar seu negócio.

Quero ser contactado

Sem spam. Resposta em até 24h.

O que nossos clientes dizem

Resultados reais de empresas que transformaram seus negócios com IA

"A DN.IA nos ajudou a automatizar 70% dos processos de atendimento. O ROI veio em apenas 3 meses."

MR

Marcos Ribeiro CEO, TechSolutions

"O diagnóstico MTIA foi um divisor de águas. Entendemos exatamente onde investir e como priorizar a implementação de IA."

CP

Carla Pimentel Diretora de Inovação, Varejo Plus

"A mentoria executiva mudou minha visão sobre IA. Hoje lidero a transformação digital da empresa com confiança."

RS

Ricardo Santos COO, LogiNext

Escolha seu plano

Soluções flexíveis para cada estágio da sua jornada com IA

Mensal Anual -20%

Diagnóstico

Ideal para começar

R$ 2.900 único

• ✓ Avaliação MTIA completa
• ✓ Relatório de maturidade
• ✓ Plano de ação prioritizado
• ✓ 1 sessão de apresentação
• − Implementação guiada
• − Suporte contínuo

Começar diagnóstico

Mais Popular

Implementação

Para empresas prontas para agir

R$ 12.900 /mês

• ✓ Tudo do Diagnóstico
• ✓ Implementação hands-on
• ✓ Automação de 3 processos
• ✓ Treinamento da equipe
• ✓ Suporte por 90 dias
• − Mentoria executiva

Iniciar implementação

Mentoria

Transformação completa

R$ 24.900 /mês

• ✓ Tudo da Implementação
• ✓ Mentoria executiva 1:1
• ✓ Acesso ao founder
• ✓ Processos ilimitados
• ✓ Suporte prioritário 24/7
• ✓ Comunidade exclusiva

Falar com especialista

Perguntas frequentes

Tire suas dúvidas sobre nossos serviços

O que é o diagnóstico MTIA? +

O MTIA (Maturidade em Transformação com IA) é nossa metodologia proprietária para avaliar o nível de prontidão da sua empresa para implementar inteligência artificial. Analisamos processos, cultura, dados e tecnologia para criar um plano de ação personalizado.

Quanto tempo leva para ver resultados? +

Depende do escopo, mas nossos clientes geralmente começam a ver resultados tangíveis entre 30 e 90 dias após o início da implementação. O diagnóstico é entregue em até 2 semanas.

Preciso ter conhecimento técnico? +

Não. Nossa metodologia foi desenhada para líderes de negócio, não técnicos. Traduzimos a complexidade da IA em decisões estratégicas claras e acionáveis.

Vocês trabalham com empresas de qual porte? +

Atendemos desde startups em crescimento até grandes corporações. Nossos planos são flexíveis e adaptamos a abordagem conforme a maturidade e necessidades específicas de cada cliente.

Como funciona o suporte pós-implementação? +

Todos os planos incluem período de suporte dedicado. No plano Mentoria, você tem acesso prioritário 24/7 via WhatsApp e calls semanais de acompanhamento com nossa equipe.

Ainda tem dúvidas?

Converse diretamente com um de nossos especialistas. Sem compromisso.

Agendar conversa gratuita

Agendar conversa

Preencha seus dados para falar com um especialista

×

Nome completo

Email corporativo

Empresa

Cancelar Agendar agora

Cards com Fundo Degradê (Glass Cards)

Padrão visual DN.IA para cards com efeito glassmorphism e glow degradê. Background semi-transparente com blur para dar profundidade à interface.

Glass Card Base

Card com fundo semi-transparente e backdrop blur. Use como base para qualquer card da aplicação.

Glass Card com Glow

Cards interativos com efeito de glow degradê no canto superior direito. O glow intensifica no hover.

Componentes de Dashboard

Componentes especializados para dashboards de analytics, incluindo KPI cards, badges de status, visualizações de dados e tabelas interativas.

KPI Cards

Cards de métricas com gradientes sutis e ícones coloridos. Use diferentes cores para categorizar tipos de métricas.

Navigation Tabs

Tabs de navegação para seções de dashboard. O tab ativo usa cor de destaque.

Filter Bar

Barra de filtros com busca, pills selecionáveis e toggles.

Badges de Dashboard

Badges especializados para indicar status, prioridade e qualificação.

Visualização de Dados

Componentes para visualização de dados: gauges, heatmaps e funis de conversão. Para gráficos interativos, use Recharts com as cores do design system.

Gráficos

Exemplos visuais de gráficos usando CSS/SVG. No projeto real, use Recharts com os tokens de cor do design system.

Gráficos de Dashboard (Referência)

Exemplos específicos baseados nas imagens de referência do dashboard de leads.

Cards de Alerta e Insight

Cards para destacar alertas, métricas de atenção e insights automáticos.

Tabelas de Dashboard

Tabelas com sorting, badges de status e paginação.

Integração com Recharts

Para gráficos interativos, use Recharts com a paleta de cores do design system.