Um sistema pequeno, rigoroso e legível nos três idiomas.

• Grid antes de ornamento

  Rótulo nas colunas 1–3, conteúdo a partir da coluna 4. Toda seção abre com uma régua de 1 px em tinta. Hierarquia por posição e peso, não por cor.

• Densidade calma

  Muita informação, pouco ruído: fios em vez de caixas, cantos retos, nenhuma sombra, nenhuma foto. Respiro de 104 px entre seções no desktop.

• Um acento, com regra

  O vermelho só existe como ponto quadrado: marcador, item ativo, item resolvido, nó final de diagrama. Nunca em texto, nunca em fundo grande.

• Três idiomas, mesmo layout

  Componentes medidos com o texto mais longo (EN) e o mais denso (JA). Japonês tem modo próprio de tokens: entrelinha 1,85, tracking 0, quebra por frase.

Arquitetura de tokens

1. 1 · Primitivos

   color.palette.*, color.neutral.*, font.*, space.*. Valores brutos; nunca usados direto em componente.

2. 2 · Semânticos

   color.bg|text|border|action|accent|focus|feedback. Apelidos de primitivos com modo dark.

3. 3 · Papéis

   type.display … type.numeral: composição tipográfica com modos wide, ja, ja-wide.

4. 4 · Componentes

   Classes .nk-* (BEM) que só leem var(--nk-…). Estados por pseudo-classe; .is-hover etc. só para documentação.

Nome da variável CSS = caminho do token: color.text.secondary → --nk-color-text-secondary; papéis tipográficos se desdobram em -family, -size, -weight, -line-height, -tracking. Superfície escura: atributo data-surface="dark" redefine os semânticos. Japonês: :root:lang(ja).

Paleta da Rota C validada no PLANO (§2). A rampa neutra é derivada (não é cor de marca) e existe para fios, borda de campo e texto secundário no escuro. Valores e razões abaixo são lidos da página renderizada.

Primitivos

Semânticos (claro e escuro)

Pares de contraste (WCAG 2.2)

Texto exige 4,5:1; componente de interface e gráfico, 3:1 (1.4.11). Calculado pela fórmula de luminância relativa do WCAG.

Funnel Display (títulos, numeração, citação) e Funnel Sans (texto, interface, tabelas), ambas OFL. Japonês em Noto Sans JP, segunda fonte da pilha: os kana e kanji caem nela, o latim continua em Funnel. Destaque (<em>) por peso, nunca itálico.

Escala modular 1,25 · base 16 px

Papéis tipográficos

Amostras em PT, EN e JA

Texto real das chaves do conteúdo. Cada amostra recebe o atributo lang e o modo de tokens do idioma (.nk-scope).

Base de 4 px; o nome do token é o múltiplo (space.6 = 24 px). Grid de 4, 8 e 12 colunas; container de 1280 px.

Escala de espaçamento

Grid de 12 colunas (≥ 1024 px)

Colunas 1–3: índice, eyebrow, rótulos, título de tabela de perfil. Colunas 4–12: título, texto e conteúdo (.nk-offset).

Layout, tamanhos e pontos de quebra

Cantos retos por padrão, ecoando o ponto quadrado; 2 px só em botão e campo. Sem sombra: elevação é expressa por fio e por fundo gelo. O foco é um contorno azul de 2 px com 2 px de afastamento, visível sobre branco, gelo e tinta.

O quadrado vermelho do símbolo “NK.” é o único elemento gráfico do sistema. Significa sempre a mesma coisa: aqui, resolvido, ativo. Tamanhos: 6 px (marcador), 8 px (estado), 16 px (nó de diagrama). Contraste 4,95:1 sobre branco, acima dos 3:1 de elemento de interface; nunca carrega informação sozinho.

Desenhados em 24 × 24, traço 1,5 (2 px exibidos a 32), terminais retos, só retângulos e retas. Sem gráfico subindo, cifrão, moeda, calculadora, balança, lupa, check, escudo, aperto de mão ou globo. Sempre decorativos (aria-hidden): o título ao lado carrega o sentido.

.nk-btn + variante. Primário para a ação principal da seção (no máximo um por bloco); secundário para a alternativa. Altura 48 px (40 px na variante --sm, só no cabeçalho desktop). Abaixo de 480 px os botões de .nk-actions ocupam a largura toda.

Estados · superfície clara

Superfície escura

Link

• PapelNavegação = <a href>; ação no lugar = <button type>. Nunca div clicável.
• TecladoTab chega, Enter ativa (Espaço também no botão). Foco visível por :focus-visible.
• Leitor de telaO rótulo é o próprio texto da chave; nada de “clique aqui”. WhatsApp e mapa abrem em nova aba com rel="noopener".
• Alvo48 × ≥ 120 px; 40 px só no desktop.

Marcação gerada pelo i18n.js (ul.nk-lang > li > a.nk-lang__btn); o sistema só estiliza. Bandeira + código; o idioma ativo ganha peso 600 e o ponto depois do código (“PT.”, como “NK.”). Bandeira não é idioma: por isso o código está sempre visível e o nome por extenso aparece no menu.

Variantes

• PapelLista de links com aria-label “Idioma/Language/言語”; cada link tem hreflang, lang e aria-current no ativo.
• Leitor de telaAnunciado como “PT — Português”, “JA — 日本語” (bandeira e código são aria-hidden).
• MobileFaixa sempre no topo da página; ao rolar, a faixa recolhe e o seletor completo segue no menu.

Duas faixas. Utilitária (gelo): telefone e e-mail no tablet/desktop, idioma à direita. Principal (branca, fio inferior): símbolo + nome e descritor, navegação em linha a partir de 1200 px, CTA compacto a partir de 768 px. O cabeçalho gruda com top: −utility-height: ao rolar, só a barra principal fica.

• Landmarksheader › nav com rótulo; link “Ir para o conteúdo” como primeiro foco.
• MenuBotão com aria-expanded e aria-controls; rótulo oculto troca entre ui.menuAbrir e ui.menuFechar. Esc fecha e devolve o foco ao botão.
• Âncorasscroll-padding-top = altura da barra, para o título não ficar sob o cabeçalho.

Cabeçalho de seção

Cartão (situação) e linha de índice (serviço)

Pessoa com retrato reservado

A moldura 4:5 com marcas de corte é o lugar exato da foto da sessão (cor natural, fundo claro uniforme, recorte cabeça e ombros). Quando a foto chegar, ela substitui as iniciais dentro da mesma moldura, com alt = nome e cargo; as marcas de corte saem.

Painel em superfície escura

• HierarquiaUm h1 por página; h2 por seção; h3 em cartão, pessoa, serviço e etapa. Numeração (“1.4”) é decorativa e fica aria-hidden.
• ListasCartões, serviços, etapas e pessoas são ol/ul com role="list" (o reset de estilo não apaga a semântica no Safari).
• RetratoMoldura vazia é aria-hidden; a nota da sessão fotográfica é texto real.

Três diagramas, todos com a mesma gramática: fio de 1 px em tinta, nós quadrados vazados, o ponto como nó resolvido. Nenhum diagrama carrega informação que não esteja no texto.

Etapas (Como trabalhamos)

Horizontal a partir de 768 px; vertical abaixo. A 4ª etapa é o ponto, e o fio tracejado depois dela indica recorrência mensal.

Comparativo sem × com

Tabela real (th scope="col"): cada linha pareia a tarefa de hoje com a que a NK assume. Abaixo de 768 px vira pares empilhados com a legenda no topo.

Calendário (hero) e rota de idiomas (empresas estrangeiras)

O calendário mostra a rotina como padrão repetido semana a semana, com o ponto no fechamento do mês; some abaixo de 768 px. A rota liga as bandeiras da matriz (JA · EN) ao símbolo NK e ao Brasil (PT), com os códigos lidos de meta.langShort e as bandeiras de NK.flags.

Padrão dos sites corporativos japoneses: rótulo à esquerda em gelo, valor à direita, fios horizontais, sem bordas verticais. Sem tabular-nums aqui: em Funnel Sans a pontuação de CNPJ fica espaçada. Abaixo de 768 px cada linha vira rótulo pequeno sobre valor.

• Semânticath scope="row" em cada rótulo; leitores anunciam “CNPJ, 18.494.175/0001-68”.

<details>/<summary> nativos: funcionam sem JavaScript, com teclado e com leitor de tela. Marcador vazado = fechada; ponto = aberta. Sinal de mais/menos à direita.

• TecladoTab até a pergunta, Enter ou Espaço abre e fecha. Estado anunciado como “recolhido/expandido” pelo próprio navegador.

Rótulo visível acima do campo (nunca só placeholder). Borda border.control com 3,76:1 sobre branco e 3,42:1 sobre o painel gelo. Obrigatório é o padrão; o opcional é marcado com a etiqueta form.opcional. Erro: borda e barra lateral no vermelho do ponto, mensagem em tinta com o ponto como marcador (a cor nunca é o único sinal).

• Rótulolabel for real em todos os campos; autocomplete (name, organization, email, tel, country-name).
• Erroaria-invalid="true" + aria-describedby apontando a mensagem. Estilo também por :user-invalid, que só aparece depois da interação.
• EnvioO status recebe role="status" e foco programático (feito pelo i18n.js).
• SeleçãoO idioma de atendimento acompanha o idioma da página até o visitante escolher outro.

• ContrasteTodos os pares de texto da tabela de cor passam 4,5:1; elementos de interface passam 3:1. O vermelho nunca é texto.
• FocoContorno azul de 2 px em todo elemento interativo; azul claro na superfície escura.
• Alvos≥ 44 px no mobile: idioma, menu, links do rodapé, CTA, campos (48 px).
• Estruturaheader, nav, main, footer; um h1; títulos sem saltos; tabelas com cabeçalhos.
• MovimentoSem animação de entrada; prefers-reduced-motion desliga transições e rolagem suave.
• Japonêslang correto na raiz e em cada link de idioma; sem itálico, sem tracking, word-break: auto-phrase e line-break: strict.
• ImagensNenhuma foto. Diagramas e ícones são decorativos e repetem o que o texto diz.