Marques & Kubalaki é um escritório de advocacia de dois sócios. A marca e o sistema que a acompanha foram construídos sobre quatro ideias: **direito** (estrutura, ordem, rigor), **honestidade** (nada escondido, nada decorativo), **caráter** (firmeza, traços retos, poucos elementos) e **vitória** (ascensão — o único traço diagonal que sobe acima de tudo é dourado). Use este documento como regra de uso: ele nomeia os tokens, estilos, componentes e arquivos a aplicar.

## Princípios da interface

O sistema interno segue a escola dos CRMs de mesa minimalistas (Linear, Notion, Twenty): base de 13 px, grade de 4 px, cinza antes de cor, bordas antes de sombras, uma linha de texto por célula. A marca aparece no símbolo, no marinho dos botões primários e em um único dourado por tela — o resto é papel e tinta.

1. **Alinhar antes de decorar.** Tudo cai no grid de 12 colunas no ritmo 8 / 4; cartões da mesma linha têm a mesma altura; títulos, ações e valores compartilham a mesma linha de base.
2. **Um nível de superfície.** Fundo da janela (`surface-000`) → painel branco (`surface-100`). Nenhum cartão dentro de cartão, nenhum fundo colorido no painel.
3. **Texto pequeno, hierarquia por peso e cor.** 13 px regular para tudo; 500 para o que é selecionado; 600 só em títulos e números. Cinza `ink-600` para o secundário, `ink-400` para o auxiliar.
4. **Cor é informação.** Só status, variação e o CTA de conversão recebem cor. Ícones são `ink-600`.
5. **Densidade de trabalho.** Controles de 32 px, linhas de 36 px, toolbars de 24 px. Nada quebra linha dentro de tabelas.

## A marca

O símbolo é o monograma **MK** construído em um único peso de traço (6 unidades em uma grade de 64), sem contorno nem contêiner.

- As duas hastes verticais do M e do K são os **dois sócios**: colunas de mesma altura e mesmo peso, lado a lado — equilíbrio e retidão.
- O vértice central do M é o **fiel da balança**: o único ângulo agudo do desenho, apontado para baixo, onde o peso da decisão se assenta.
- A haste do K é compartilhada com o M: os sócios não são duas marcas justapostas, são uma estrutura só.
- O braço superior do K é o **traço da ascensão**: em `gold-500`, é a única diagonal que **ultrapassa a linha de topo** das colunas. É a vitória no processo — e é o único lugar da marca onde o dourado aparece.
- Os topos das colunas são cortados em chanfro, como capitéis; a base é reta e alinhada. A estrutura é a de um portal, não a de uma letra desenhada à mão.

Arquivos em `assets/Logos/`:

| Arquivo | Quando usar |
| --- | --- |
| `mk-marca-horizontal.svg` | Versão principal. Site, papelaria, assinatura de e-mail, documentos. Sobre `surface-000`, `surface-100` ou fundos claros. |
| `mk-marca-horizontal-negativa.svg` | Mesma composição em marfim, para `brand-800`/`brand-900` (login, rodapé do site), `surface-000` do tema escuro e fotografia escura. |
| `mk-marca-vertical.svg` / `mk-marca-vertical-negativa.svg` | Composição empilhada: capa de documento, tela de login, placa, carimbo de PDF. |
| `mk-icone.svg` / `mk-icone-negativo.svg` | Só o símbolo. Cabeçalho da barra lateral (20 px, ao lado do nome), favicon, avatar do escritório, marca d'água. |
| `mk-icone-mono.svg` | Símbolo em uma única tinta (`brand-700`) para gravação, carimbo, impressão monocromática. |
| `mk-app-icon.svg` | Ícone de aplicativo e PWA: quadrado `brand-900` com cantos de 96/512, símbolo negativo centralizado. Exporte em 512, 192, 180 e 32 px. |

Regras:

- Área de proteção mínima: a altura da haste do símbolo (a altura da letra M) em todos os lados.
- Tamanho mínimo: símbolo com 20 px de altura; marca horizontal com 22 px de altura (abaixo disso use o ícone).
- Nunca recolorir o símbolo fora dos pares definidos (marinho + dourado, marfim + dourado, tinta única). Nunca aplicar o dourado às colunas, nem o marinho ao traço ascendente: a hierarquia é o significado.
- Nunca inclinar, espelhar, aplicar sombra, contorno ou gradiente. Nunca redesenhar o logotipo em outra fonte: o texto da marca é vetor fechado (Cormorant Garamond 600 com tracking 6 %, e IBM Plex Sans 500 com tracking 28 % para ADVOCACIA).
- A marca não convive com outros elementos dourados na mesma composição além de uma linha fina ou um número em destaque.

## Cor

A paleta tem três famílias: os **marinhos** (`brand-*`) são o direito e o caráter; os **neutros quentes** (`surface-*`, `ink-*`, `border-*`) são o papel e a tinta de um documento bem feito; o **dourado** (`gold-*`) é a vitória — raro, e por isso valioso. Os quatro **sinais** nomeiam o estado de um processo. As cores de **gráfico** (`chart-1` … `chart-5`) são apelidos dessas famílias, para que dados e interface falem a mesma língua.

- Página em `surface-000`; cartões, tabelas e campos em `surface-100`; áreas rebaixadas (cabeçalho de tabela, filtros, hover de linha) em `surface-200`.
- Texto principal em `ink-900`, secundário em `ink-600`, auxiliar em `ink-400`. `ink-400` fica reservado a `surface-000` e `surface-100`; sobre `surface-200` só em texto de 18 px ou mais.
- Barra lateral **clara**, sem fundo próprio, sobre `surface-000`: itens em `sidebar-ink` (= `ink-600`), ativo e hover em `sidebar-active` com texto `ink-900`; o símbolo `mk-icone.svg` no topo ao lado do nome do escritório. `brand-900` fica para login, site e ícone de app.
- Botão primário, abas ativas e links em `brand-700` com texto `on-brand`. No tema escuro `brand-700` clareia para continuar sendo um botão visível e `on-brand` escurece junto — use sempre o par, nunca branco literal.
- Blocos de marca que devem continuar escuros nos dois temas (HeroCard no login e no site, marca do assistente) usam `brand-800` com `on-brand-800`. Dentro do painel não há blocos de marca.
- `brand-100` marca seleção e estado ativo (linha selecionada, item de lista escolhido, tile de ícone neutro).
- `gold-500` só em preenchimento: o traço da marca, a barra de meta e o CTA de conversão do site — com texto `on-gold`. Nunca como texto nem linha fina sobre fundo claro (2,6:1). `gold-700` é o dourado para texto (tag **Êxito**, percentual do índice, vencimento calculado, contagem de prazos no menu); `gold-100` é a tinta de fundo dessa tag e do resultado da calculadora.
- Dourado é verbo, não adjetivo: no máximo um elemento dourado de destaque por tela além da marca.
- Três fios: `border-100` entre linhas de tabela e de lista; `border-200` em volta de cartões, painel, botões secundários e campos em repouso; `border-300` onde a borda carrega significado (input em hover, checkbox) — 3:1 sobre todas as superfícies nos dois temas.
- Tooltips de gráfico e toasts em `overlay` com `on-overlay`.
- Anel de foco: `focus`, 2 px sólido, deslocamento de 2 px, em todo controle interativo.

### Estados de processo e de lançamento

Todo status aparece com **a palavra do status** ao lado da cor — a cor sozinha nunca é a informação. Os pares texto/fundo abaixo mantêm pelo menos 5:1 nos dois temas.

| Status | Texto / ícone | Fundo |
| --- | --- | --- |
| Em andamento, protocolado, informativo | `info-600` | `info-100` |
| Deferido, procedente, pago, cumprido, ativo | `success-600` | `success-100` |
| Prazo próximo, pendente, aguardando, a receber | `warning-700` | `warning-100` |
| Indeferido, improcedente, vencido, ação destrutiva | `danger-600` | `danger-100` |
| Êxito, acordo (desfecho vitorioso) | `gold-700` | `gold-100` |
| Arquivado, suspenso | `ink-600` | `surface-200` |

Tags em caixa normal, 12 px, sem ponto. `success-600` é um verde puxado ao azul e `danger-600` um vermelho de tijolo: a separação não depende só do eixo vermelho–verde. Mesmo assim, nunca remova a palavra. Variações (`DeltaChip`) seguem os mesmos pares, com seta e sinal.

## Tipografia

Três famílias, cada uma com um papel fixo. Os arquivos de fonte estão em `fonts/` (woff2, subconjunto latino) e são carregados por `tokens.css`. **A base da interface é 13 px.**

- **IBM Plex Sans** (`sans`) é a interface inteira: `body` 13/20 para texto, células, menus e campos; `body-sm` 12 para metadados e tags; `label` 12/500 para rótulos, botões e cabeçalhos de tabela; `caption` 11/500 para rótulos de seção e de KPI (caixa normal — **nada em caixa alta no sistema**); `title` 13/600 para títulos de cartão; `heading` 16/600 para títulos de página; `metric-lg` 24 e `metric-xl` 32 para números, com algarismos tabulares; `nav` 13 para o menu (ativo em 500).
- **Cormorant Garamond** (`display`) é a voz institucional e aparece **fora** do painel: manchete do site (`display-xl`), capa de login e relatórios (`display-lg`). Dentro do sistema tem dois usos, ambos em `display-md`: a pergunta do assistente e a nota do índice de êxito.
- **IBM Plex Mono** (`mono`) é a voz dos dados em `data` 12/16: números CNJ (`0001234-56.2026.8.16.0014`), valores em reais, datas, prazos em dias, OAB, ticks de gráfico, chips de variação e contagens do menu. Nunca para texto corrido.
- Largura máxima de leitura: 68 caracteres. Nada em itálico, nada sublinhado além de links em texto corrido.

## Voz e conteúdo

- Tratamento formal com o cliente (**o senhor / a senhora** em comunicações; **você** só na interface interna). Frases curtas, afirmativas, sem adjetivos de reforço.
- **Toda página tem título com ícone** na Topbar e pode ter uma frase de propósito em `ink-400` (o que a tela faz, sem ponto final, sem exclamação): Painel — "Prazos, processos e honorários em um só lugar." · Processos — "Acompanhe cada andamento sem perder um prazo." · Prazos e audiências — "O que vence, quando e com quem." · Clientes — "Quem o escritório representa e em quais causas." · Financeiro — "Honorários, custas e despesas com clareza." · Petições e minutas — "Modelos do escritório, prontos para adaptar." · Relatórios — "Resultados por área, por sócio e por período." · Assistente jurídico — "Resumos, prazos e minutas com base nos seus processos."
- O assistente cumprimenta pelo nome e pelo período do dia ("Bom dia, Dr. Marques.") e pergunta uma vez ("Como posso ajudar hoje?"). Nunca promete resultado; prepara, o advogado decide. Toda resposta cita o processo e o documento de origem.
- Termos jurídicos no uso técnico correto e sem abreviação na primeira ocorrência da tela ("Agravo de Instrumento", depois "AI"). Prazos sempre com a data e os dias restantes: "Prazo: 14/11/2026 (7 dias)".
- Datas em `dd/mm/aaaa`; valores em `R$ 1.234,56`; variações com sinal e vírgula ("+8,2 %"); números de processo no formato CNJ completo, nunca truncados.
- Botões e atalhos no infinitivo e com o objeto: "Protocolar petição", "Registrar andamento", "Lançar honorário" — nunca "OK", "Enviar" ou "Salvar" sozinhos. Links de aprofundamento: "Ver tudo →", "Saiba mais →".
- Sem emoji, sem exclamação, sem linguagem de celebração automática. A vitória se registra com a tag **Êxito** e o fato: "Sentença procedente em 28/10/2026".
- Mensagens de erro dizem o que aconteceu e o que fazer: "O número do processo tem 20 dígitos. Confira o dígito verificador." Avisos dizem o fato no título e a ação no texto: "3 prazos vencem em 48 h — dois ainda sem petição protocolada."
- Estados vazios dizem o que falta e o próximo passo ("Nenhum prazo nesta semana · Registrar prazo"). Sem ilustrações.

## Layout e proporções

O shell é o de um CRM de mesa: barra lateral clara sobre o fundo da janela e o conteúdo em um painel branco recuado. Os valores estão na família `layout` dos tokens.

- **Janela** em `surface-000`. **Sidebar** `sidebar-width` 220 px, sem fundo nem borda: cabeçalho do escritório (ícone 20 px, nome, seta), busca (⌘ K), seções Painel · Assistente jurídico | Escritório: Processos · Prazos e audiências · Clientes · Financeiro · Petições e minutas · Relatórios | Preferências: Configurações · Central de ajuda, itens de 28 px, contagens em `mono` `ink-400` (prazos em `gold-700`), e a conta do usuário no rodapé. Abaixo de 1024 px recolhe para `sidebar-collapsed` 56 px; abaixo de 768 px some e a Topbar mostra o botão de menu.
- **Painel** `surface-100` com borda `border-200` e `radius-md`, recuado `panel-inset` 12 px da janela (topo, direita, base). Dentro: **Topbar** `topbar-height` 40 px (ícone + título 13/600, frase de propósito opcional, ações `sm`, notificações, ajuda) separada por `border-100`, e o conteúdo com `page-gutter` 16 px, largura máxima `content-max`.
- **Grid** de 12 colunas, `grid-gap` 12 px, ritmo **8 / 4**: o bloco principal à esquerda (gráfico, tabela), o apoio à direita (lista, índice, rosca, ferramenta). Cartões na mesma linha têm a mesma altura; em uma pilha (`mk-stack`) o último cartão cresce para fechar a coluna.
- **Primeira linha de toda página de dados: quatro StatTiles iguais** (`mk-row-4`). Nada de hero dentro do painel.
- **Painel**: 4 tiles — BarChart 8 · Assistente 4 — Table 8 · ScoreCard + DonutChart 4.
- **Página de módulo** (Financeiro, Processos, Clientes): cabeçalho com breadcrumb, título 16 px, uma linha de posição e as ações à direita; 4 tiles; gráfico 8 · lista + meta 4; tabela 8 · rosca + ferramenta 4.
- **Assistente**: coluna central de 680 px — marca, saudação, pergunta, prompt — e os exemplos em 2 × 2 abaixo.
- **Site**: nav de 64 px, hero em duas colunas com cartões reais do sistema como prova; o único lugar com Cormorant e dourado em escala grande.
- Controles `control-height` 32 px (`control-height-sm` 24 em toolbars e cabeçalhos de cartão; `control-height-lg` 40 no site e no login); linhas de tabela e lista `row-height` 36 px; ícones `icon-size` 16 px.

## Forma e camadas

- Escala de 4 px: `space-1` a `space-8`. Cartões com `card-padding` 16; blocos separados por `grid-gap` 12; conteúdo com `page-gutter` 16.
- Raios na escala 2 / 4 / 8 / 12: `radius-xs` em checkbox e barras; `radius-sm` (4) em botões, inputs, tags, chips e itens de menu; `radius-md` (8) em cartões, painel e tooltips; `radius-lg` (12) em modais; `radius-full` em avatar e ponto de status.
- Camadas por borda, não por sombra: o painel e os cartões têm só `border-200`; linhas internas `border-100`. `shadow-sm` apenas em dropdown, popover e tooltip; `shadow-md` em modal.
- Botões 13 px/500: primário `brand-700`; secundário `surface-100` com `border-200` (hover `border-300`); ghost `ink-600` com hover `sidebar-active`; `gold` para o CTA de conversão do site; `onbrand` dentro de blocos `brand-800`; destrutivo `danger-600`.
- Tabela: cabeçalho 12 px `ink-600` em caixa normal no mesmo branco, fio `border-200` abaixo; linhas de 36 px com `border-100`; `table-layout: fixed` com larguras em % em todas as colunas; **uma linha por célula, com ellipsis** — informação secundária vai em outra coluna; hover `sidebar-active`; seleção `brand-100`; números em `data` à direita; entradas `success-600` com "+", saídas `danger-600` com "−"; toolbar de 24 px (busca, filtros, período, "Exportar") acima.
- Tiles de ícone (`icon-tile` 28 px, `surface-200`, ícone `ink-600`) só em listas e estados vazios. KPIs não têm tile: rótulo, ícone discreto, valor, variação.
- Avatares quadrados de 24 px (`radius-sm`) com iniciais; 20 px em tabelas.

## Dados e gráficos

- Séries sempre nos tokens `chart-*`: `chart-1` (marinho) para a medida principal — honorários recebidos, processos ativos; `chart-3` (azul) para a secundária — despesas, custas, em andamento; `chart-2` (dourado) para êxito ou meta, uma série por gráfico; `chart-4` (neutro) para período anterior ou "Outros"; `chart-5` (verde) para resultado positivo quando o dourado já está em uso.
- Grade em `border-100`, ticks em `mono` 10 px `ink-400` com "k" para milhares, cursor de hover em `ink-400` tracejado, tooltip em `overlay`.
- Barras para comparação por período (honorários por mês), linha para tendência (recebimentos por semana, com o ano anterior tracejado), rosca para composição (processos por área, despesas por tipo) com no máximo cinco fatias.
- Todo gráfico vive em um Card com título, subtítulo que diz a medida e, à direita na mesma linha, Tabs `sm` para a série e um Select `sm` para o período. Totais ficam nos StatTiles da primeira linha, não repetidos dentro do gráfico.
- Índices (ScoreCard) sempre com a base de cálculo escrita; KPIs (StatTile) sempre com a comparação ("vs. mês anterior").

## Iconografia

Conjunto próprio em `assets/Icons/` e no componente `Icon`: 35 ícones de linha, grade de 24, traço de 1,5 px, pontas arredondadas, sem preenchimento, sem duotone, sem emoji. Tamanho padrão 16 px; cor do ícone: `ink-600` em menus, listas e topbar, `ink-400` em KPIs, a cor do texto em botões. Ícones que carregam significado sozinhos (sem rótulo) precisam de `label` e de contraste 3:1. Ícones de navegação fixos por módulo: home (Painel), sparkle (Assistente), folder (Processos), calendar (Prazos), users (Clientes), wallet (Financeiro), file (Petições), chart (Relatórios), settings, help.

## Movimento

Transições curtas e lineares: 120 ms em hover e foco, 200 ms em painéis e barras de progresso, com `ease-out`. Nada salta, nada quica, nada pulsa; o hover de gráfico apenas engrossa a fatia ou mostra o ponto. Respeite `prefers-reduced-motion`.