Ello Consultoria Design System

Princípios da Marca

A Ello Consultoria é uma marca de consultoria empresarial estratégica. O design system reflete confiança, sofisticação e orientação a resultados.

Cores

82 tokens de cor organizados em 11 grupos. Cores primárias extraídas de elloconsultoria.com. Extensões marcadas como recommended_extension.

Brand Core

Accent Gold

Content

Background

Feedback

Chart Palette

Tipografia

Nunito Sans (official_from_source) para todo o UI. Escala de 12 tamanhos com 5 pesos.

Espaçamento

15 valores base de 4px a 128px. Grid de 8px. Seções usam space-48 ou space-64.

Radius

5 valores derivados do site da Ello. Inputs usam small (8px), botões usam medium (12px), cards usam large (16px).

Elevação

7 níveis de sombra incluindo glow com a cor primária da Ello. O glow é usado em botões e CTAs.

Motion

Tempos e curvas de animação. O site Ello usa 300ms ease como padrão. Respeitar prefers-reduced-motion.

Acessibilidade

WCAG 2.1 AA como meta. Contraste, foco, navegação por teclado e reduced motion.

Tom de Voz

A Ello comunica de forma consultiva, clara e orientada a resultado. Sem exagero, sem jargão desnecessário.

Vocabulário

Termos-chave do universo Ello Consultoria. Usar estes termos consistentemente em toda a interface.

Botões

Primary usa brand-primary com glow shadow. Height: 44px (default). Border-radius: 12px. Focus: 3px ring com primary/25%.

Variantes

Tamanhos

Estados

Inputs

Border: 2px solid rgba(255,255,255,0.12). Focus: brand-primary border + glow ring. Radius: 8px.

Cards

Background elevado (#151515), border sutil, radius-large (16px). Hover com translateY(-4px) e shadow-medium.

Badges

Status, role e indicadores visuais. Pill shape (border-radius: 999px).

Status

Roles

Avatar

Circular, gradiente brand-primary. Fallback por iniciais. 4 tamanhos: sm (32), md (40), lg (56), xl (80).

Tabs

Estilo underline. Active: brand-primary bottom border. Variantes: underline e pill.

Breadcrumb

Navegação hierárquica. Links em tertiary, item atual em primary com font-weight 600.

Stepper

Progresso de etapas. Dot: 32px circular. Completed: success. Active: brand-primary.

Paginação

Navegação de páginas. Active: brand-primary bg. Radius: 8px.

Formulários Avançados

Checkbox, Radio, Switch e Select. Todos seguem os tokens de cor e espaçamento do DS.

Checkbox

Radio

Switch

Select

Toast / Snackbar

Notificações com borda lateral colorida. Posição: top-right. Auto-dismiss: 5s.

Alert / Banner

Alertas de nível de página. 4 variantes semânticas com background sutil e borda.

Modal / Dialog

Overlay centralizado. Shadow-overlay. Radius x-large (24px). Backdrop: rgba(0,0,0,0.6). Focus trap obrigatório.

Tooltip

Informação contextual ao passar o mouse ou foco. Background: content-primary (#FFF). Radius: 8px. role="tooltip".

Divider

Separadores visuais. Horizontal, com label e vertical.

Tabela

Tabelas de dados com header fixo. Variantes: default, compact, striped.

Skeleton

Shimmer animation durante carregamento. Usa cores de background muted/subtle.

Empty State

Estados vazios com ação clara. Borda dashed, padding generoso.

Progress

Barra de progresso com gradiente brand-primary. Track: background-muted. Radius: pill.

Diagnóstico

Card de diagnóstico organizacional com score, dimensão e status. Border-left colorido indica tipo.

KPI Summary

Cards de indicadores-chave com valor, label e tendência. Variantes: single, comparison, trend.

Plano de Ação

Itens de ação com checkbox, responsável e prazo. Estados: pending, in-progress, completed, overdue.

Recomendação

Card de recomendação estratégica com tipo, título e descrição. Borda superior gold para destaque.

Maturidade

Gauge visual de nível de maturidade. 5 barras representam os 5 níveis (inicial, básico, definido, gerenciado, otimizado).

Timeline de Projeto

Visualização vertical de fases do projeto. Dots: done (success), active (brand-primary), pending (border).

Perfil do Consultor

Card de consultor com avatar, especialidades e projetos. Variantes: full e compact.

Relatório Executivo

Bloco de relatório executivo com resumo, métricas e recomendações. Usado em dashboards e apresentações.

Patterns de Produto

25 patterns contextualizados para consultoria empresarial. Cada pattern define problema, componentes e estados.

Layout de Dashboard

Estrutura padrão: Sidebar (280px, dark) + Topbar (64px) + Conteúdo. Grid responsivo para KPIs e cards.

Regras para Agentes AI

Regras invioláveis para qualquer agente de código gerando UI para Ello Consultoria.

Regras Invioláveis

• Usar SOMENTE tokens documentados neste design system. Nunca inventar cores, fontes ou espaçamentos.
• Nunca usar hex hardcoded. Sempre referenciar variáveis CSS (ex: var(--color-brand-primary)).
• Usar componentes documentados. Se precisar de um novo, marcar como needs_validation.
• Todo formulário deve ter validação acessível com aria-describedby e mensagens de erro visíveis.
• Todo botão deve seguir as variantes do DS: primary, secondary, ghost, outline, danger.
• Todo card deve seguir a anatomia do DS: background elevated, border subtle, radius large.
• Todo conteúdo deve estar no contexto de consultoria empresarial. Não usar exemplos de fintech, ads ou mídia.
• Toda tela deve cobrir os estados: loading (skeleton), empty (empty state) e error quando aplicável.
• Fonte: Nunito Sans. Nunca substituir sem documentar como needs_validation.
• Tema: dark-first. Background screen: #000000. Elevated: #151515.
• Respeitar prefers-reduced-motion desativando animações.
• Focus visible obrigatório em todos os elementos interativos.
• Contraste mínimo: AA para texto grande, AAA para texto principal.
• Não usar exemplos de produtos ou plataformas externas (ads, analytics, SEO, mídia). Foco exclusivo em consultoria empresarial.
• Vocabulário: usar termos do vocabulário Ello (Diagnóstico, Estratégia, Plano de Ação, etc.).

Output Obrigatório para Agentes

{
  "screen_name": "Dashboard de Projeto",
  "product": "Ello Consultoria",
  "components_used": ["Sidebar", "Topbar", "KPI Summary", "Action Plan Item", "Progress Bar"],
  "tokens_used": ["--color-brand-primary", "--color-background-elevated", "--radius-large"],
  "patterns_used": ["Dashboard de Projeto"],
  "states_covered": ["default", "loading", "empty"],
  "accessibility_notes": ["Focus trap no modal", "aria-label nos KPIs"],
  "content_context": "consultoria empresarial",
  "validation_needed": []
}

Governança

Versionamento, changelog e processo de validação do design system.

Processo de Validação

• Tokens official_from_source: extraídos diretamente do CSS/assets do site da Ello. Não requerem validação.
• Tokens inferred_from_source: inferidos visualmente. Requerem confirmação visual.
• Tokens recommended_extension: criados como extensão harmônica. Requerem aprovação do brand owner.
• Tokens needs_validation: requerem validação humana antes de uso em produção.

Pendências

Itens que requerem validação humana ou desenvolvimento adicional.

Validação Necessária

Planejados