Mais

Design system

Tokens, componentes e regras do Design System Gorillas em HTML puro (ds.css, icons.js, app.js). Nenhum controle aqui altera dados.

Cores e tokens

Paleta-base e tokens semânticos. Use sempre var(--token); o escuro é redefinido em :root[data-theme="dark"].

Navy#2D285A · marca e ação
Laranja#E59328 · acento e foco
Papel#EDEDF0
Texto#242138
Texto secundário#626274
Sucesso#256B48
Alerta#805010
Erro#B12F36

Claro

Escuro

Tipografia

Barlow (400/500/600) para texto e controles; Barlow Condensed para títulos. Fontes locais.

h1 · 42/600 CondensedPedidos
Sheet · 28/600 CondensedNovo pedido
Seção · 22/600 CondensedPróximos contatos
Indicador · 40/600R$ 31.650
Título de card · 15/600T-118 · Documentário curto “Raízes”
Texto · 14/400Gravação externa qua 15/10 às 08h com Marina e Diego.
Secundário · 13Último contato há 3 dias pelo WhatsApp.
Eyebrow · 11/600Caixa de entrada
MonoP-2026-032 · ggak_••••7f2a
Link · atalhoVer todos os pedidos · Ctrl K

Espaços, raios e alvos

Espaços 4/8/12/16/24/32 · raios 12/16/24 (6 só em peças pequenas) · alvo mínimo 44 px.

--space-1 · 4
--space-2 · 8
--space-3 · 12
--space-4 · 16
--space-6 · 24
--space-8 · 32
6 · pill, checkbox
12 · controles
16 · painéis
24 · sheet, login

Alvo de toque: 44 × 44 px em botões, abas, segmentos, itens de menu, campos e itens de navegação.

Ícones

Traço 2, estilo lucide. <i data-icon="inbox"></i> ou gIcon('inbox',{size:16}).

Botões

Verbo + objeto. Uma ação primária por área. Estados forçados com .is-hover / .is-focus só nesta galeria.

Variantes

Estados

Primária
Hover
Foco (teclado)
Desabilitada
.busy
Secundária hover
Secundária foco
Perigo hover
Ghost hover
Perigo desabilitado
Ícone
Demonstração

Status, badges e pessoas

Estado sempre com texto (Pill) — nunca só cor. Badge é para contagem e rótulo curto.

Pill .dotAceitaAguardando contatoRejeitadaPropostaNovoEncerrado
PillConciliadoVence hojeConflitoIAWhatsAppPadrão
Badge3rascunhovídeo aéreo2 atrasadasnovo
AvatarHSMNJPTKRNMLIA MLJPDI
Pessoa
HS
Hellen Souzaadmin · responsável
ML
Marina Lopesoperator · produção

Campos e seleção

Todo campo tem rótulo. Erro com role="alert". Selecionado = cor de seleção + ✓.

Vem da proposta P-2026-029 (somente leitura).
Visível só para a equipe.

Tick (checkbox)

Radio

Toggle (switch)

Segments

Estados de campo

Padrão · hover · foco · erro · desabilitado · somente leitura — e os mesmos estados em seleção.

borda --input
borda --muted-foreground
anel --ring

Telefone incompleto.

aria-invalid + .field-error
:disabled
[readonly]
.select + .is-focus
SearchBox com limpar (data-clear)
checkbox marcado + foco
radio + foco
switch ligado + foco
desligado + :disabled

Abas e etapas

role="tablist" + data-tab / data-tab-panel. Setas navegam; ?tab= abre; cliques atualizam a URL. Rolagem horizontal no celular.

Próximo passo: Gravação externa qua 15/10 08h.

4 itens · total R$ 7.200,00/mês.

Estados (prévia estática)

Superfícies e coleções

Panel (kit), Card (shadcn), item-card com Cards/Linhas, indicadores, listas e avisos.

A receber · out1 vence hoje

R$ 31.650

Realizado R$ 6.000,00

Pedidos abertos

5

2 criados pela IA

Trabalhos ativosNo prazo

3

T-115 entrega sex 17/10

Capacidade JúliaQuase cheia

38/40 h

Semana 13–19/10

Panel

Superfície padrão (.panel)

Ver tudo
Fernanda — Hotel Serra Azul1 revisão da IA pendente
Revisar
Morena Lima — Briefing do siteTarefa aberta: Preparar reunião
Card (shadcn)
header · action · content · footer
Preço aceito
R$ 42.000,00
Base planejada
R$ 27.600,00
Gasto reconhecido
R$ 14.980,00
Cobertura parcial

Hero-card

Do pedido à nota, no mesmo fluxo.

Navy nos dois temas (--hero-surface).

Ativar avisos neste aparelho? Você recebe pedidos novos e entregas aprovadas.
A IA não envia respostas sozinha para potenciais clientes neste modo.
Conflito: drone reservado também para “Teste de voo Hotel Serra Azul” qua 15/10 15h.
9 de 12 lançamentos conciliados.
T-11830/10

Documentário curto “Raízes”

Instituto Verde Campo

ProduzirMLJP
T-11517/10

Site institucional

Cooperativa Sol Nascente

RevisarHS
T-12124/10

Evento Agrofest 2026 — cobertura

Padaria Aurora · .selected

PrepararMLJP

Tabela

Cabeçalho ordenável (th[data-sort]), seleção (data-select-all / data-select-row), linhas de 56 px, rolagem horizontal no celular.

Propostas · dados fictícios
CódigoClienteValorSituaçãoPróximo passoAções
P-2026-032Clínica VitalisR$ 7.200,00/mêsRascunhoRevisar itens e enviar
P-2026-031Café Dois IrmãosR$ 18.500,00Enviada em 09/10Retorno previsto 16/10
P-2026-029Instituto Verde CampoR$ 42.000,00Aceita em 28/09Trabalho T-118 aberto
P-2026-024Studio MorenaR$ 15.400,00RecusadaMotivo: prazo

Sheet, Confirm, menus e mensagens

Esc e clique fora fecham e devolvem o foco. Abaixo de 760 px tudo vira folha inferior. ?modal=id abre ao carregar.

Sheet (prévia estática)

Nova reserva

Pessoa, equipamento e horário.

Menu (prévia)

Toast e tooltip (prévia)

Dica curta e opcional.

Vazio, carregamento, erro e progresso

Nenhuma conversa aguardando

Quando um contato escrever, ele aparece aqui.

T-118 · Produzir62%
Importando extrato
Diego (freela)9/16 h
Marina31/40 h
Júlia · quase cheia38/40 h

Separador horizontal

RecebidosRascunhos e enviosEnvios em lote

Padrões de tela

Kanban (.board), linha do tempo (.timeline), mestre-detalhe (.split) e conversa (.chat).

Preparar

1

Roteiro final

FeitoML

Produzir

2

Gravação externa

qua 15/10Conflito do drone

Entrevistas

qui 16/10ML

Revisar

2

Corte 1

22/10JP

Revisar site Sol Nascente

11/10Atrasada

Entregar

1

Entrega v1

30/10

Linha do tempo · Pedido #1042

  1. 12/10 18:42

    Mensagem do contato

    “Queria cobertura do Agrofest, 3 dias.”

  2. 12/10 18:43 · IA

    IA criou o Pedido #1042

  3. 12/10 19:10

    Contato respondeu “sim, tem palco”

  4. 13/10 08:15

    Aviso enviado à equipe

Conversa · Fernanda — Hotel Serra Azul

Pendente

Hoje

Oi, vi o trabalho de vocês no hotel X. Queria um vídeo aéreo do nosso hotel na serra

08:31

Olá, Fernanda! Para preparar uma proposta, me conta: qual a data ideal para a gravação?

IA · agente codex-2 · job 8a1f · 08:33

Final de outubro. Site e Instagram. Dura quanto?

08:40

Perfeito! Retorno hoje com a proposta.

Hellen · respondido pelo celular

Detalhe

Em ≥ 1024 px as colunas ficam lado a lado; abaixo disso a lista vira uma página e o detalhe abre com ?pane=main (botão “Conversas” volta).

Shell em miniatura

_shell.html real em 1280 px (sidebar + header) e 390 px (header + navegação inferior flutuante com 5 itens).

Abrir _shell.html
Desktop ≥ 1024 px · sidebar com grupos e “Mais áreas”
Celular · Hoje · Caixa · Trabalhos · Clientes · Mais

Acessibilidade e regras

Obrigatórias em todas as telas.

  • Alvo mínimo de 44 × 44 px em botões, abas, segmentos, itens de menu, campos e navegação.
  • Foco sempre visível: anel laranja (--ring) de 3 px. Nunca remova outline sem substituto.
  • Estado nunca só por cor: Pill com texto (e .dot); seleção com ✓.
  • Selecionado = navy/branco no claro, laranja/texto escuro no escuro (--selection).
  • Todo campo com <label>; botão só de ícone com aria-label.
  • Erros com role="alert" (.error-box, .field-error, toast de erro); avisos com role="status".
  • Sheet/Confirm prendem o foco, fecham com Esc e devolvem o foco a quem abriu.
  • Toda ação destrutiva passa por Confirm (.confirm.danger + .btn-danger).
  • prefers-reduced-motion desliga animações e transições.
  • Link “Pular para o conteúdo” e <main id="main-content"> (o app.js garante).
  • Contraste AA: texto pequeno sobre branco usa navy ou --accent-foreground, nunca laranja puro.
  • Tudo em português do Brasil: R$ 18.500,00, “qua, 15/10”, 15/10/2026.