Design System

Uma base única para marca, produto e operação.

Este guia reúne os princípios visuais e de interface da Ethos Partners para o site institucional e para o sistema Ethos Partner. A ideia é manter uma linguagem elegante, direta e confiável, sem excesso de explicação dentro do produto.

Abrir plataforma Ver padrões do sistema
Tom da marca Sóbrio, técnico e próximo.

Confiança, clareza e leitura rápida em vez de efeito visual excessivo.

Princípio de UI Menos discurso, mais uso.

A tela mostra o próximo passo, não o bastidor do sistema.

Produto Operação antes de decoração.

Tabelas, cards, métricas e ações precisam servir ao trabalho diário.

Escopo Site e Ethos Partner alinhados.

Mesma fundação visual, com ergonomia própria para ambiente administrativo.

Fundamentos

Identidade visual e regras-base

Os tokens abaixo definem a fundação da marca e o comportamento visual esperado para novas páginas e ajustes no sistema.

Cores

Forest #1B3829
Forest 2 #264A37
Lime #B6D933
Lime BG #EDF5D0
Light #F3F7F3
Border #DCE8DC

Tipografia

Outfit para títulos.
Hierarquia curta e firme.
Sora para a interface e para blocos de leitura. O texto deve ser claro, curto e útil para o usuário que está trabalhando.
Componentes

Elementos que sustentam a interface

O sistema deve reutilizar poucos blocos consistentes, em vez de criar uma solução visual diferente para cada tela.

Botões e badges

Ativo Rascunho

Campos

Padrões do produto

Como o Ethos Partner deve se comportar

O produto precisa favorecer leitura rápida, contexto operacional e ação direta. O sistema não deve explicar sua própria arquitetura para o usuário.

Dashboard e leitura operacional

Leads 28 captação e qualificação
Clientes 16 carteira ativa
Processos 11 em andamento
Alertas 4 pedem atenção

Toolbars

  • busca sempre visível
  • filtros próximos da lista
  • modo de visualização no topo da área
  • uma ação principal por contexto

Estados

  • vazio curto: “Nenhum item encontrado.”
  • erro claro: “Não foi possível concluir a ação.”
  • indisponibilidade honesta: “Indisponível no momento.”
  • sem texto de migração, legado ou homologação

Tabela padrão

Cliente Processo Etapa Status
Grupo Exemplo EP-2026-014 Análise documental Em análise
Atlas Participações EP-2026-018 Aguardando envio Pendente
Conteúdo

Regras de linguagem para o sistema

A UX da Ethos precisa soar segura e objetiva. O produto orienta o trabalho; ele não narra sua própria reconstrução.

Usar

Títulos curtos Dashboard, Processos, Clientes, Formulários, Configurações.
Subtítulos funcionais Explicam o que a área faz em uma frase curta.
Mensagens operacionais Ex.: “Gere links para coleta de dados e envio de documentos.”

Evitar

Bastidor técnico Não citar migração, base local, legado, edge function ou homologação.
Hero de marketing no produto A tela interna deve ajudar a trabalhar, não vender a plataforma.
Explicações longas Substituir por atalhos, estados e ações claras.