01
Índice de arquivos
Onde cada coisa vive. Esta pasta é um design system reutilizável — use pra gerar interfaces, slides, posts e materiais com a identidade da marca.
| Arquivo | O que é |
|---|---|
index.html | Home — vitrine navegável do design system + links pra tudo. |
documentacao.html | Este documento — contexto, fundamentos de conteúdo e visual, iconografia. |
manual-de-marca.html | Manual completo da marca (logo, cor, tipo, voz). |
guia-de-midia.html | Guia de composição, vídeo, movimento, diagramas, dados e assets. |
colors_and_type.css | Tokens de cor e tipografia (vars base + semânticas) — fonte da verdade. |
assets/ | Logos, ícones, formas, gráficos, texturas e tokens (CSS/JSON). |
preview/ | Cards da aba Design System (especimens de cor, tipo, marca, componentes). |
bm-*.jsx / gm-*.jsx | Código-fonte (React/Babel inline) do Manual e do Guia. |
SKILL.md | Manifesto pra usar como Agent Skill no Claude Code. |
Os HTML usam React 18 + Babel inline; componentes são exportados via
window (cada <script type="text/babel"> tem escopo próprio).02
Fontes
Quatro famílias, cada uma com um papel. Todas no Google Fonts. Os SVGs do logo
ni dependem de STIX Two Text disponível.| Papel | Família | Peso típico |
|---|---|---|
| Display / títulos | Bricolage Grotesque | 800 |
| Texto / corpo | Hanken Grotesk | 400–600 |
| Mono / labels | IBM Plex Mono | 400–600 |
| Logo “nⁱ” | STIX Two Text | 400 |
03
Como a marca escreve
A voz é a de um engenheiro sênior generoso: sabe muito, mas explica com clareza e sem soberba.
Claro antes de esperto
A frase que se entende de primeira vence a que impressiona. Sem jargão gratuito.Mostra, não promete
Fala com exemplo, código e número real. Evita superlativos e “revolucionário”.Caloroso, nunca arrogante
Trata quem lê como inteligente, mas tira a barreira. Humor seco é bem-vindo.Evite
“Solução revolucionária de IA de ponta que vai transformar tudo.”
“Aproveitando sinergias de machine learning para impulsionar resultados.”
Faça
“Um pipeline de RAG que cortou a latência em 40%. Te mostro como.”
“Treinei um modelo pra prever churn. Acertou 8 em 10. Veja o que falhou.”
Mecânica: português pt-BR, tom pessoal (“eu”, “te mostro”). Labels e kickers em mono, CAIXA ALTA, com tracking largo. Sem emoji decorativo. Números concretos > adjetivos.
04
Fundamentos visuais
Quente, terrosa, analógica (herança risográfica) com sotaque técnico. Editorial, não corporativa.
- Cor: paleta quente sobre neutros de areia/papel; coral é a cor de ação e destaque. Os frios (teal, ciano) são cores comuns da paleta, sem status especial. Nunca degradês — cores chapadas, pontos e linhas.
- Foreground/background: texto
ink #211913sobrebg #F4ECD9; superfícies emcard #FBF6EA. Escuro sobreespresso #1A1411. - Tipografia: títulos Bricolage 800 com tracking negativo (−1.2 a −1.6) e line-height ~1.0; corpo Hanken 1.5–1.6; labels mono uppercase, tracking 1.6–2.4.
- Texturas: campo de pontos (riso), grid técnico fino, formas Bauhaus. Nunca gráficos vazios — textura serve ao conteúdo.
- Cantos: 7–8px (chips/botões), 11–16px (cards), 20px+ (pílulas). Avatares e o ponto separador são círculos perfeitos.
- Cards: fundo
card, borda1px rgba(33,25,19,.12), raio 12–16px. Sem sombra — separação por borda e cor de fundo. - Animação: transições curtas (.15s), fades e mudanças de cor sutis. Sem bounce, sem loops decorativos.
- Hover/press: hover muda peso/cor (link vira coral + bold); press usa cor sólida. Blur só em barras fixas (
backdrop-filter: blur(12px)).
05
Iconografia
Geometria de traço, monocromática, recolorível. Nada de emoji decorativo.
- Ícones da marca:
icones-marca.svg— traço 2px,stroke #211913, cantos arredondados. Estilo linha; recolorir só viastroke. - Formas geométricas:
formas-geometricas.svg(18 formas Bauhaus) +formas-bauhaus.svg(composição clássica). Chapadas e recoloríveis. - Grafismos:
gfx-*.svg(light/dark) — burst, constellation, flow, frame, iso, orbit, rings. Composições abstratas pra capas e fundos. - Hand-drawn:
hd-*.svg— arrow, balão, bandeirola, bracket, circle, faixa, num, pin, pizza, selo, underline. Marcações orgânicas (tom risográfico). - Emoji: não. Unicode apenas funcional (✓ ✕ ↗ • →) em estados e setas.
06
Assets & regras de logo
Logos vetoriais em três modos. As regras existem pra manter a marca legível em qualquer fundo.
- Logos:
logo-ni-{color,mono,reverse}.svg(padrão “nⁱ”),logo-nl-{color,mono,reverse}.svg(creative “NL”),avatar-ni.svg,avatar-nl.svg. - Colorido nunca sobre coral/âmbar — use a versão
mono. - Reverso para fundos escuros (hastes em cinza claro).
- O ponto ciano só aparece como separador no lockup horizontal — em nenhum outro lugar.
07
Tokens — referência rápida
As variáveis da marca. Versão completa em
colors_and_type.css e assets/tokens.json.Quentes
Frios
Estendida · diagramas & ilustrações
Rampas · tint → base → shade (preenchimento · cor cheia · ênfase)
FernLT·BASE·DK
DenimLT·BASE·DK
SkyLT·BASE·DK
IrisLT·BASE·DK
PlumLT·BASE·DK
RoseLT·BASE·DK
Neutros · light
Dark
Em diagramas: alterne matizes distantes na roda para separar categorias — ex.:
coral → teal → amber → iris → fern → plum → cyan → rose. Use as cores cheias para as categorias e as mesmas a 12–18% de opacidade para preenchimentos e fundos. A paleta quente original segue sendo a voz da marca; a estendida entra só quando o conteúdo pede mais categorias.