Design System Mobili

Biblioteca de componentes para construir páginas consistentes.

Uma página viva com foundations, componentes base e seções reutilizáveis do Portal Mobili, usando apenas HTML, CSS, JavaScript leve e os assets estáticos atuais.

Ver componentes Ler documentação
Foundations

Base visual do sistema

Cores, tipografia, espaçamento e ícones Lucide aplicados com os tokens publicados em assets/css/index.css.

Cores

Escala semântica para estrutura, ação, status e superfícies.

Primary 500 #195da9
Primary 600 #123e6b
Accent 500 #93c51f
Success #15803d
Warning #f59e0b
Danger #dc2626
Neutral 500 #64748b
Neutral 50 #f8fafc

Tipografia

Escala baseada em Inter, com pesos altos para hierarquia e leitura clara.

Display / A força que protege.

H1 / Plataforma digital de proteção veicular

H2 / Componentes reutilizáveis

H3 / Cards, formulários e seções

Body Large / Texto de apoio com ritmo confortável para explicar benefícios.

Body / Conteúdo institucional, descrições de componentes e mensagens operacionais.

Small / Metadados, labels, captions e hints de formulário.

Espaçamento

Escala em múltiplos de 4px para manter grids e superfícies previsíveis.

4 8 12 16 24 32 48 64 80 96

Ícones Lucide

SVG inline com currentColor, stroke 2 e tamanho padronizado.

ShieldCheck Car BadgeCheck Clock3 MessageCircle ArrowRight
Componentes base

Elementos para interfaces do portal

Componentes pequenos que sustentam formulários, cards, feedbacks e padrões interativos.

Button

Estados e variações para conversão, navegação e ações secundárias.

Primary Link

Input

Campos para captura simples, suporte, newsletter e novas landing pages.

Preferência

Card

Superfícies modulares para benefício, destaque e conteúdo.

Padrão

Card informativo

Use para explicar um recurso sem competir com o CTA principal.

Destaque

Card com evidência

Use para prova social, resumo ou benefício prioritário.

Benefício

Proteção contínua

Use em grids de coberturas, serviços ou diferenciais.

Badge

Estados compactos para contexto, destaque e feedback.

Informativo Destaque Sucesso Alerta Perigo

Alert, Modal, Drawer, Accordion e Table

Componentes para feedback, foco, navegação contextual, conteúdo expansível e dados tabulares.

Informativo Use para orientar uma ação sem bloquear o fluxo.
Sucesso Use quando uma ação foi concluída com êxito.
Atenção Use para avisos operacionais que exigem leitura.
Quando usar accordion?

Use quando houver conteúdo complementar que não precisa aparecer inteiro na primeira leitura.

Qual ícone utilizar?

Use ChevronRight, Plus ou Minus da Lucide com stroke 2 e currentColor.

Exemplo de tabela para comparação de componentes
Componente Uso principal Status
Button Ação e navegação Pronto
Modal Foco temporário Demo
Drawer Painel contextual Demo
Componentes de seção

Blocos reutilizáveis para novas páginas

Exemplos de hero, section header, CTA, feature grid, FAQ e timeline usando a linguagem visual do portal.

Hero

Uma primeira dobra com proposta clara e CTA único.

Use o hero para conectar benefício, prova e ação principal sem dispersar a atenção.

Simular proteção
Section Header

Padronize a entrada de cada seção.

Eyebrow curto, título objetivo e subtítulo de apoio para orientar a leitura.

CTA

Pronto para compor uma nova página?

Combine componentes existentes, preserve o shell compartilhado e mantenha a ação principal evidente.

Solicitar cotação

Feature Grid

Cards para benefícios, coberturas, serviços ou pilares institucionais.

Proteção

Componente para destacar segurança e continuidade.

Agilidade

Componente para explicar rapidez, atendimento e jornada digital.

Suporte

Componente para reforçar presença e atendimento.

FAQ

Use details e summary para acessibilidade nativa.

Como novas páginas devem usar o shell?

Inclua <mobili-header>, <mobili-footer> e carregue mobili-shell.js antes de portal.js.

Quando atualizar o sitemap?

Atualize sempre que criar, remover ou renomear uma página pública.

Timeline

Estrutura para história, marcos da empresa ou etapas de uma jornada.

  1. 01 Diagnóstico

    Identifique objetivo, público e CTA principal.

  2. 02 Composição

    Monte a página com componentes e tokens já documentados.

  3. 03 Validação

    Revise caminhos, responsividade, acessibilidade básica e validadores locais.

Modal

Foco temporário para uma decisão.

Use modal para confirmações, avisos importantes ou tarefas curtas. Evite usar para conteúdo longo.