Design System — Orquestro

Este documento é a fonte única de verdade do visual do Orquestro. Toda tela nova deve seguir estas diretrizes. Qualquer mudança de design começa aqui — não direto no código.

1. Princípios

Princípio	Descrição
Denso, não poluído	Informação comercial é densa. Priorize espaço útil sem sacrificar respiração.
Hierarquia clara	O usuário deve saber, em 2 segundos, o que é mais importante em cada tela.
Ações visíveis	Botões e ações primárias nunca ficam escondidos. Ações destrutivas têm confirmação.
IA sugere, humano decide	Conteúdo gerado por IA tem marcação visual própria — nunca parece um fato.

2. Cores

O sistema usa uma paleta Material Design 3 adaptada, com primário em navy escuro. Os tokens estão em src/app/globals.css.

Paleta principal

Token CSS	Valor hex	Uso
`--primary`	`#011323`	Sidebar, botões primários, links de ação
`--background`	`#f8fafb`	Fundo geral da aplicação
`--foreground`	`#191c1d`	Texto principal

Superfícies (do mais claro ao mais escuro)

Token CSS	Valor hex	Uso típico
`--v-surface-container-lowest`	`#ffffff`	Cards, modais, tabelas
`--v-surface-container-low`	`#f2f4f5`	Hover de linha, fundo de input
`--v-surface-container`	`#eceeef`	Divisórias, muted
`--v-surface-container-high`	`#e6e8e9`	Bordas de card, header de tabela
`--v-surface-container-highest`	`#e1e3e4`	Badges neutros

Textos sobre superfície

Token CSS	Valor hex	Uso
`--v-on-surface`	`#191c1d`	Texto de maior peso (títulos, dados)
`--v-on-surface-variant`	`#43474c`	Texto secundário (labels, metadados)
`--v-outline`	`#74777d`	Textos desabilitados, placeholders
`--v-outline-variant`	`#c4c6cd`	Bordas de input, divisórias

Token CSS	Uso
`--sidebar` → `#011323`	Fundo da sidebar
`--sidebar-foreground` → `#ffffff`	Texto e ícones
`--sidebar-accent` → `rgba(255,255,255,0.07)`	Item de nav ativo/hover
`--sidebar-border` → `rgba(255,255,255,0.08)`	Divisórias internas

Semânticas

Token	Valor	Uso
`--v-success-container`	`#004536`	Textos de sucesso, status “ganho”
`--v-on-success-container`	`#54b89b`	Ícones e labels de sucesso
`--destructive`	`#ba1a1a`	Erros, ações destrutivas
`--v-secondary`	`#456366`	Ícones neutros, elementos de apoio

Como usar em código

// Tailwind usa o prefixo do token mapeado em @theme
<div className="bg-surface-container-lowest border border-outline-variant text-on-surface">
<span className="text-on-surface-variant">
<button className="bg-primary text-on-primary">

3. Tipografia

Fonte: Lato (400, 700, 900) — carregada via Google Fonts no layout.tsx.

Escala

Classe Tailwind	Tamanho	Peso	Uso
`text-display-lg`	32px / lh 40px	700	Títulos de página (`Bem-vinda, Ana!`)
`text-headline-md`	24px / lh 32px	600	Seções principais
`text-headline-sm`	18px / lh 24px	600	Títulos de card, sub-seções
`text-stats-number`	28px / lh 34px	700	Números de KPI
`text-body-lg`	16px / lh 24px	400	Subtítulo de página, parágrafos
`text-body-md`	14px / lh 20px	400	Texto corrente de tabelas e formulários
`text-label-md`	12px / lh 16px	500	Labels de campo, badges, tabs de filtro

Exemplos

<h2 className="text-display-lg font-bold text-on-surface">Bem-vinda, Ana!</h2>
<p className="text-body-lg text-on-surface-variant">Subtítulo da página</p>
<h3 className="text-headline-sm text-on-surface">Título de card</h3>
<span className="text-label-md text-on-surface-variant">Label de campo</span>
<div className="text-stats-number font-bold text-on-surface">42</div>

4. Ícones

Biblioteca: Material Symbols Outlined — variável (filled 0, weight 400, optical size 20–48).

Carregada via <link> no layout.tsx. Uso via <span>:

<span className="material-symbols-outlined text-[20px]">dashboard</span>
<span className="material-symbols-outlined text-xl text-primary">trending_up</span>

Tamanhos padrão

Contexto	Classe de tamanho
Ícone na sidebar	`text-[20px]`
Ícone em botão	`text-[18px]`
Ícone em topbar	`text-[24px]` (padrão)
Ícone decorativo grande	`text-4xl`
Ícone em badge / inline	`text-sm`

Ícones canônicos do Orquestro

Tela / Ação	Ícone
Logo / identidade	`token`
Dashboard	`dashboard`
Leads / Pipeline	`trending_up`
Usuários	`manage_accounts`
Configurações	`settings`
Auditoria	`security`
Sugestão de IA	`auto_awesome`
Gate / Decisão humana	`gavel`
Arquivo / upload	`upload_file`
Origem da informação	`info`
Sucesso / validado	`check_circle`
Erro / rejeitado	`cancel`
Pendente	`schedule`
Notificações	`notifications`
Ajuda	`help_outline`
Sair	`logout`

5. Espaçamento e layout

Variáveis de espaçamento

Token	Valor	Uso
`--spacing-sidebar-width`	`260px`	Largura fixa da sidebar
`--spacing-card-padding`	`24px`	Padding interno de todos os cards
`--spacing-container-margin`	`32px`	Padding da área de conteúdo principal
`--spacing-gutter-md`	`16px`	Espaço entre elementos dentro de um card
`--spacing-gutter-lg`	`24px`	Espaço entre seções / cards

Uso em Tailwind

// padding de card
<div className="p-card-padding">
 
// padding da área de conteúdo
<div style={{ padding: 'var(--spacing-container-margin)' }}>
 
// gap entre cards
<div className="grid gap-4">   // gutter-md
<div className="space-y-6">   // gutter-lg aprox.

Estrutura de tela

┌──────────────┬──────────────────────────────────────────┐
│              │ Topbar (h-16, borda inferior)             │
│   Sidebar    ├──────────────────────────────────────────┤
│  (260px)     │                                          │
│  bg-primary  │  Conteúdo (padding 32px)                 │
│              │                                          │
│              │                                          │
└──────────────┴──────────────────────────────────────────┘

6. Componentes

Card padrão

<div className="bg-surface-container-lowest rounded-xl border border-surface-container-high shadow-[0_4px_20px_rgba(0,0,0,0.04)] p-card-padding">
  ...
</div>

Card clicável (hover state)

<Link className="group bg-surface-container-lowest p-card-padding rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-surface-container-high hover:border-primary hover:shadow-md transition-all block">
  <span className="group-hover:text-primary transition-colors">Texto</span>
</Link>

Card de KPI

<div className="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.04)] border border-surface-container-high">
  <div className="flex justify-between items-start mb-4">
    <span className="text-body-md text-on-surface-variant">Label</span>
    <span className="material-symbols-outlined text-xl text-primary">icon_name</span>
  </div>
  <div className="text-stats-number font-bold text-on-surface">42</div>
  <div className="text-label-md text-on-surface-variant mt-1">Sub-label</div>
</div>

Tabela

<div className="bg-surface-container-lowest rounded-xl border border-outline-variant shadow-[0_4px_20px_rgba(0,0,0,0.04)] overflow-hidden">
  <table className="w-full text-left">
    <thead>
      <tr className="bg-surface-container-low border-b border-outline-variant">
        <th className="py-3.5 px-4 text-label-md text-on-surface-variant font-semibold">Coluna</th>
      </tr>
    </thead>
    <tbody className="divide-y divide-outline-variant/50">
      <tr className="hover:bg-surface-container-low/50 transition-colors">
        <td className="py-4 px-4 text-body-md text-on-surface">Dado</td>
      </tr>
    </tbody>
  </table>
</div>

Botão primário

<button className="px-4 py-2 bg-primary text-on-primary rounded-lg font-bold text-label-md hover:opacity-90 transition-opacity flex items-center gap-2">
  <span className="material-symbols-outlined text-[18px]">add</span>
  Criar lead
</button>

Botão secundário (outline)

<button className="px-4 py-2 border border-outline-variant rounded-lg bg-surface-container-lowest text-on-surface text-label-md font-bold hover:bg-surface-container-low transition-colors flex items-center gap-2">
  <span className="material-symbols-outlined text-[18px]">filter_alt</span>
  Filtrar
</button>

Badge de status

// Ativo / em andamento
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-[11px] font-bold bg-teal-100 text-teal-800 border border-teal-200">
  Em andamento
</span>
 
// Ganho
<span className="... bg-green-100 text-green-800">Ganho</span>
 
// Pendente (humano precisa agir)
<span className="... bg-amber-100 text-amber-900 border border-amber-300">Pendente</span>
 
// Perdido / rejeitado
<span className="... bg-red-100 text-red-800">Rejeitado</span>
 
// Neutro
<span className="... bg-surface-container-high text-on-surface-variant">Rascunho</span>

Sugestão de IA (estado pendente)

<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 flex items-start gap-3">
  <span className="material-symbols-outlined text-amber-600 mt-0.5 shrink-0">auto_awesome</span>
  <div>
    <p className="text-body-md font-bold text-amber-900">Sugestão da IA</p>
    <p className="text-body-md text-amber-800 mt-0.5">{conteudo}</p>
    <p className="text-label-md text-amber-700 mt-2">Aguardando validação humana</p>
  </div>
</div>

Input de busca

<div className="relative flex-1 max-w-sm">
  <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-lg">
    search
  </span>
  <input
    type="text"
    placeholder="Buscar..."
    className="w-full pl-10 pr-4 py-2 bg-surface text-on-surface border border-outline-variant rounded-lg text-body-md focus:border-primary focus:ring-1 focus:ring-primary"
  />
</div>

Tabs de filtro

{tabs.map((tab) => (
  <button
    key={tab.value}
    className={`px-3 py-1.5 rounded-lg text-label-md font-bold whitespace-nowrap transition-colors border ${
      ativo === tab.value
        ? 'bg-primary text-on-primary border-primary'
        : 'bg-surface-container-lowest text-on-surface-variant border-outline-variant hover:bg-surface-container-low'
    }`}
  >
    {tab.label}
  </button>
))}

7. Marcação de origem da informação (REQ-005)

Todo dado exibido que não é fato verificável deve ter um indicador visual.

Tipo de origem	Visual
`fato`	Sem marcação — exibição normal
`declaracao_cliente`	Badge cinza claro: `"Cliente declarou"`
`observacao_vendedor`	Badge azul claro: `"Observação"`
`percepcao_indicador`	Badge roxo claro: `"Via indicação"`
`fonte_publica`	Badge slate: `"Fonte pública"` + link
`hipotese_ia`	Banner âmbar com ícone `auto_awesome` (ver componente acima)
`lacuna`	Badge vermelho claro: `"Informação em falta"`
`decisao_humana`	Badge verde com ícone `gavel`: `"Decisão validada"`

8. Padrões de interação

Gates humanos (REQ-007)

Nenhum gate avança automaticamente. Todo avanço de gate usa:

<button className="px-4 py-2 bg-primary text-on-primary rounded-lg font-bold text-label-md flex items-center gap-2">
  <span className="material-symbols-outlined text-[18px]">gavel</span>
  Confirmar Gate 3
</button>

Seguido de modal de confirmação com resumo do que está sendo validado.

Estado vazio

<div className="py-12 text-center text-on-surface-variant">
  <span className="material-symbols-outlined text-4xl text-outline mb-2 block">inbox</span>
  <p className="text-body-md font-bold">Nenhum registro encontrado.</p>
  <p className="text-label-md mt-1">Ajuste os filtros ou crie um novo item.</p>
</div>

Carregando

<div className="flex items-center gap-2 text-on-surface-variant text-body-md">
  <span className="material-symbols-outlined animate-spin text-[20px]">progress_activity</span>
  Carregando…
</div>

Erro de permissão (informação insuficiente)

<div className="rounded-lg border border-outline-variant bg-surface-container px-4 py-3 flex items-center gap-3 text-on-surface-variant">
  <span className="material-symbols-outlined shrink-0">lock</span>
  <p className="text-body-md">Informação insuficiente — você não tem permissão para ver este dado.</p>
</div>

9. Responsividade

O MVP é desktop-first — o público-alvo usa computador durante o processo comercial. Mobile é segunda prioridade.

Breakpoint	Comportamento
`lg` (1024px+)	Layout completo com sidebar fixa
`md` (768–1023px)	Sidebar colapsada (ícones apenas) — a implementar
`< md`	Sidebar vira drawer — a implementar

10. Arquivos relevantes

Arquivo	O que contém
`src/app/globals.css`	Todos os tokens de cor, tipografia e espaçamento
`src/components/shell/sidebar.tsx`	Sidebar escura com Material Symbols
`src/components/shell/topbar.tsx`	Topbar branca com usuário e notificações
`src/components/ui/`	Componentes shadcn/ui (botão, input, tabela, etc.)
`src/app/(app)/layout.tsx`	Shell geral da aplicação autenticada
`src/app/(auth)/layout.tsx`	Shell das telas de autenticação

Orquestro — Documentação

Explorador

Design System