Ciclo da fábrica

1. Planejar
2. Criar
3. Testar
4. Aprender
5. Evoluir

Não use o brilho em fundo claro

Tamanhos mínimos

Não faça

Também não gere PNG a partir de captura de tela: exporte dos SVGs. Para impressão, peça prova de cor; os arquivos são RGB, sem conversão para CMYK.

Só o Azul Elétrico vira escala: é a única das quatro que passa contraste com texto branco em botão (4,88:1). O roxo não passa no fundo claro (4,23:1), e o cyan some nele (1,54:1). Por isso roxo e cyan são cores expressivas, nunca de texto ou de estado.

Escala da marca (color.brand e color.accent)

Gerada em OKLCH com matiz fixa (264°), com o oficial no 600. A curva de luminosidade dessa escala é a régua das cores de produto.

Neutros (color.neutral)

Puxam para o navy (matiz ~270°): o 950 é o próprio navy.

Temas

O escuro é o padrão, como no site. O claro usa fundo branco e #f5f7fb nas seções alternadas. No código, o tema vem de data-theme="dark" ou data-theme="light" em qualquer elemento; sem atributo, vale o escuro.

Cores de estado

Iguais em todos os produtos. A base (ícones, bordas) passa cerca de 4,4:1 nos dois temas; o texto e o fundo mudam por tema. O grave fica entre o alerta e o erro.

Categórica, em ordem fixa

Atribua as cores nessa sequência, sem pular e sem repetir: é a ordem que garante a leitura por daltônicos. A partir de 2 séries, use só a categórica, sem a cor do produto. Mais de 8 séries: agrupe em "Outros" ou use pequenos múltiplos.

No claro, o turquesa (3) fica em 2,39:1 no card: com ele, use rótulo direto ou uma visão em tabela.

Status

Quatro níveis, o mesmo hex nos dois temas, sempre com ícone e rótulo, nunca só pela cor: atenção, grave e crítico se confundem para daltônicos.

Hierarquia

Colunas

12 colunas no desktop, 8 no tablet (até 900 px) e 4 no mobile (abaixo de 600 px), com intervalo de 24 px. Doze colunas se dividem em 2, 3, 4 e 6. Nas telas de produto, o grid vale só para a área de conteúdo: a barra lateral (240 px, ou 64 px recolhida) e o cabeçalho ficam fora dele.

Os símbolos dos produtos não seguem este grid: eles seguem a construção do K (veja Produtos).

Os três primeiros exemplos de "Sim" são do site. Cada produto ajusta o tom no próprio guia.

Cor do produto

Cada produto tem uma matiz em OKLCH, fora da faixa da Kodium (209° a 293°) e a pelo menos 30° dos outros. A escala de 50 a 950 segue a curva de luminosidade da escala da marca, para todos terem o mesmo peso visual.

Faixa da Kodium, de 209° a 293°: nenhum produto entraSucesso (140° a 170°) e erro (10° a 40°): só com justificativa

• Nunca em botões, links, foco, seleção ou estados: a interface é o azul da Kodium.
• Em gráficos, a cor do produto é a série única ou o destaque dentro dela; a partir de 2 séries, só a categórica do core.
• Nunca ao lado de cores de estado em gráficos e painéis, fora o selo de status ao lado de um número na cor do produto.
• A cor do produto nunca identifica o produto sozinha: vai sempre com o símbolo e o nome.

Kodium Studio

Carro-chefe · 302° · violeta #9b74d0 (croma 0.15)

Aprovado

O bloco em perspectiva, com três faces (a de cima clara, a lateral escura) e o S grande vazado na face da frente, com o corte em "/" no meio: os módulos que a fábrica monta e viram produto.

50#f8f5fe100#f0e9fb200#e2d6f6300#cdb9ed400#b293df500#9b74d0600#865cbd700#6f4a9f800#5a3a81900#472e67950#2e1c44

• No escuro, a categórica 4 (violeta) é quase o product.600 (ΔE 1,9): num gráfico de várias séries, ela é só a série 4.
• Planos Day, Pro e Advanced sem cor nem símbolo; Boards, Design e Ultracode são funcionalidades do Studio.
• No chat, o símbolo é o avatar do agente; o "Pensando" anima com escala ou opacidade, sem trajeto longo na diagonal \.

Guia completo: products/studio/guide.md

Kodium Trust

Experimental · 200° · turquesa #009ea4 (croma 0.13)

Aprovado

O escudo partido pelo T: a barra e a haste vazadas dividem o escudo em três módulos, que escurecem na direção "/". A letra é o próprio corte: a governança que dá estrutura.

50#eff9f9100#def1f2200#bfe5e6300#91d1d5400#4cb7bd500#009ea4600#008388700#006e73800#00585c900#00474a950#002d2f

• O score de 0 a 100 é quantidade: número, barra e série em product.500; a meta aparece como selo de status ao lado.
• A decomposição do score fica num gráfico à parte, com rótulo direto: a categórica 3 é quase o 500 (ΔE 3,0).
• "Governança de IA" é texto de apoio, fora do lockup; o Trust fala de confiança e controle, nunca de medo.

Guia completo: products/trust/guide.md

Kodium People

Experimental · 355° · rosa-antigo #c06b8e (croma 0.125)

Aprovado

O crachá, com a presilha no alto, o P grande vazado (com o corte em "/" na haste) e a linha do nome: o RH com a pessoa no centro.

50#fdf4f7100#f9e8ed200#f2d3dd300#e6b4c6400#d48ca7500#c06b8e600#ad5379700#904264800#753450900#5d293f950#3d1828

• Toda afirmação mostra fonte e período; o que falta aparece como "não informado", nunca como suposição.
• Estados de evidência (observado, hipótese, pendente) em tom neutro, com ícone e rótulo.
• Nada de duas pessoas lado a lado no símbolo ou em ilustração de marca: lembra o Microsoft Teams.

Guia completo: products/people/guide.md

Kodium Discovery

Complementar · 48° · tangerina #d46724 (croma 0.17)

Aprovado

A lâmpada, com o D grande vazado no vidro (com o corte em "/" na haste) e a rosca em faixas: a ideia que os agentes tiram da conversa e transformam em documento.

50#fff4ef100#fde8dd200#fad3c0300#f2b494400#e58a5a500#d46724600#ba5200700#9a4300800#7d3500900#642900950#421800

• A tangerina nunca fica ao lado de alerta ou de grave; os dois vêm sempre com ícone e texto.
• No Termo de Definição de Sprint, fios e cabeçalhos em 800 ou 900, nunca no 700.
• Uma pergunta por vez: quando falta informação, o agente para e pergunta.

Guia completo: products/discovery/guide.md

Kodium Control

Complementar, com uso interno · 126° · verde-musgo #799745 (croma 0.125)

Aprovado

O medidor de 7/8 de volta em octógono vira o C: três segmentos que escurecem, o ponteiro em "/" e o eixo. Cada entrega é medida com rigor.

50#f5f8f1100#e9efe1200#d6e1c7300#bacca0400#96af6e500#799745600#628022700#506b17800#40560f900#32440d950#1f2c04

• A cor do produto nunca entra em painel de status nem em selo de homologado, atestado ou aprovado.
• No termo de fechamento, fios em 800 ou 900 (900 se houver gráfico com a categórica, cuja série 2 é quase o 800).
• Vocabulário do edital: etapa, trilha, ocorrência, abono, ateste, glosa.

Guia completo: products/control/guide.md

Kodium Fleet

Complementar · 92° · cáqui #948a6e (croma 0.045)

Aprovado

O pino de localização partido em "/", como a haste do K: o F vazado no módulo de cima e uma faixa escura na borda de baixo. Não há veículo, olho nem mira.

50#f7f7f4100#eeede7200#dfdcd3300#c9c4b4400#aca48d500#948a6e600#7f7557700#696046800#544d37900#433d2b950#2a261a

Estados do veículo no mapa (decisão de 2026-09-26)

• A cor do produto não marca veículo, cerca, trajeto nem alerta no mapa.
• Copiloto sem avatar nem persona; fotografia sem motorista identificável nem placa legível.
• Whitelabel: vendido assim, o Fleet não leva esta identidade no cliente.

Guia completo: products/fleet/guide.md

1. Acesso ao pacote, uma vez por pessoa

   O pacote é privado, no GitHub Packages. Quem instala precisa de leitura no repositório KodiumAI/kodium-brand e de um token clássico do GitHub com a permissão read:packages, guardado na variável NODE_AUTH_TOKEN. Com o agente na nuvem (Codex ou Claude Code na web), o token entra como variável secreta do ambiente. Na CI do produto, use o GITHUB_TOKEN com packages: read e libere o repositório do produto nas configurações do pacote.

2. Instalação

   No repositório do produto, crie o .npmrc e instale o pacote. Os arquivos ficam em node_modules/@kodiumai/brand/dist/<id>/: tokens (CSS, tema Tailwind v4, JS/TS, JSON), logos e o guide.md do produto. As regras e o manual do core ficam em dist/core/.

   # .npmrc
   @kodiumai:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
   
   npm install @kodiumai/brand

3. Instruções para o agente

   Cole o bloco abaixo no CLAUDE.md (Claude Code) ou no AGENTS.md (Codex) do produto. Os botões copiam o bloco já com o id de cada produto.

   ## Identidade visual
   
   Este produto usa `@kodiumai/brand/produto-x`. Regras:
   
   - Antes de mexer na interface, leia o guia do produto (`node_modules/@kodiumai/brand/dist/produto-x/guide.md`) e as regras do core (`node_modules/@kodiumai/brand/dist/core/rules.md` e `manual.md`). O guia diz onde vai cada logo, como usar a cor do produto e o que não fazer.
   - Nunca escreva cores, fontes, raios ou espaçamentos literais. Use as classes do tema do Tailwind
     (ou as variáveis `--kd-*`).
   - Tema escuro é o padrão; o claro vem com `data-theme="light"`. Fundos, textos e bordas só com os tokens semânticos (`surface`, `text`, `border`), que trocam com o tema.
   - Ação principal: `bg-accent-600 text-accent-on hover:bg-accent-700`, em pílula. Links: `text-text-accent`. Foco: `focus`.
   - Estados de sucesso, alerta, grave, erro e info usam `feedback-*` (`base`, `text`, `surface`), nunca o accent.
   - A cor do produto (`product-*`) é só para símbolo, ilustração e gráfico de uma série, nunca em botões ou links.
   - Gráficos com várias séries usam `data-categorical-*` na ordem (1, 2, 3...); estados em gráficos usam `data-status-*` com ícone e rótulo. Regras na seção "Paleta de dados" do `manual.md` do core.
   - Logos vêm de `@kodiumai/brand/produto-x/logo/`. Não redesenhe, não recolora, não crie variações.
   - Precisa de uma cor ou token que não existe? Não crie aqui: abra uma issue no repositório kodium-brand.

   Copiar para:StudioTrustPeopleDiscoveryControlFleet

4. O pedido

   Peça ao agente, por exemplo: "Aplique a identidade do @kodiumai/brand neste produto seguindo o CLAUDE.md: troque cores, fontes, logos e favicon pelos do pacote." (com o Codex, "seguindo o AGENTS.md"). Ele lê o guia e as regras e usa só os tokens, sem hex escrito à mão.

Para receber as mudanças da marca, rode npm update @kodiumai/brand. Versões patch e minor entram direto; numa major, leia o CHANGELOG.md antes.

Direto no código

Sem agente, o caminho é o mesmo: importe os tokens do produto e use as variáveis --kd-* (ou o tema do Tailwind v4). Os detalhes, com Tailwind, JS e logos, estão em docs/consumo.md.

/* CSS do app */
@import "@kodiumai/brand/fleet/tokens.css";

.salvar { background: var(--kd-color-accent-600); color: var(--kd-color-accent-on); }

<!-- o tema escuro é o padrão; o claro vale para a página inteira ou só um trecho -->
<section data-theme="light">
  <button class="salvar">Salvar</button>
</section>