Nicolas Lima · Design System
Style Guide
Um sistema de design editorial com calor humano e rigor técnico. Paleta terrosa, tipografia contrastante, cor plana — sem degradê. Construído para engenharia, dados e AI, com a voz de quem explica sem arrogância.
Um acento por tela — coral é ação, nunca decoração.
Cor plana — sem degradê, sem brilho, sem sombra 3D.
01 · Cor
Paleta
Paleta completa com usos. Cores planas, sem degradê. A sequência de dados padrão são as 6 cores da marca na ordem definida.
Neutros · Fundo e superfície
A base da paleta — 60% da composição.
Quentes · Ação e personalidade
30% da composição. Coral é o acento principal — use com parcimônia.
Frios · Contraste técnico
10% da composição. Um por composição — nunca protagonista.
Overflow · Ramo estendido
Para séries além de 6 categorias. Cada cor tem versões light e dark.
Dark Mode
Fundo quase preto com calor sutil, superfície charcoal quente, texto off-white. Inspirado no Claude/Anthropic dark mode — quente sem ser marrom. Acentos da marca mantêm a personalidade.
02 · Tipo
Tipografia
Três famílias com papéis definidos. Display ousado, corpo legível, mono técnico. A assinatura STIX Two Text itálico é o toque editorial — nunca corpo de texto.
Composição real · As 4 fontes juntas
Como Bricolage, Hanken, IBM Plex Mono e STIX Two Text trabalham juntos numa mesma peça. Cada fonte no seu papel — display, corpo, kicker, assinatura.
Escala tipográfica
| Token | Família | Peso | Tamanho | Tracking | Line-height | Uso |
|---|---|---|---|---|---|---|
| --text-display | Bricolage Grotesque | 800 | 48–72px | −0.02em | 1.0 | Hero / capa |
| --text-h1 | Bricolage Grotesque | 800 | 32–48px | −0.02em | 1.1 | Título de seção |
| --text-h2 | Bricolage Grotesque | 600 | 22–28px | −0.01em | 1.2 | Subtítulo |
| --text-body | Hanken Grotesk | 400 | 15–18px | 0 | 1.5–1.6 | Corpo |
| --text-body-em | Hanken Grotesk | 510 | 15–18px | 0 | 1.5–1.6 | Ênfase |
| --text-small | Hanken Grotesk | 400 | 13–14px | 0 | 1.5 | Legenda |
| --text-mono | IBM Plex Mono | 400–500 | 11–14px | 0.02em | 1.4 | Código / label |
| --text-kicker | IBM Plex Mono | 500–600 | 11px | 0.08–0.1em | 1.4 | Kicker UPPERCASE |
| --text-signature | STIX Two Text | italic 400 | 18–28px | 0 | 1.2 | Marca nⁱ / pull-quote |
03 · Marca
Logos e Variações
Duas marcas: nⁱ (primária, STIX Two Text itálico) e NL (utilitária, geométrica). Três modos: color, mono, reverse. O ponto ciano aparece apenas no lockup horizontal como separador.
nⁱ · Marca primária
Use como marca principal em todos os contextos. O "i" sobrescrito em coral.
NL · Marca utilitária
Geométrica, para favicon (~16px) e contextos onde o "i" sobrescrito não lê.
NL é a variante utilitária — apenas para favicon e tamanhos mínimos.
Nunca os dois lado a lado com peso igual.
Logo colorido nunca sobre coral/âmbar → use mono.
O ponto ciano aparece exclusivamente como separador do lockup horizontal.
04 · Ícones
Iconografia
Ícones de marca em SVG plano, traço 1.6px, `currentColor`. Sem emoji decorativo — Unicode apenas funcionalmente (✓ ✕ ↗ • →).
05 · Elementos
Grafismos e Texturas
Texturas, formas geométricas e elementos hand-drawn. Sempre emolduram conteúdo real — nunca são decoração vazia.
Texturas
Formas Bauhaus / Geométricas
Hand-drawn · Camada de cima
Elementos à mão livre como camada superior sobre a estrutura geométrica.
06 · Layout
Composição
Composição é o esqueleto invisível de tudo. Antes de cor ou animação: uma grade, margens de segurança e uma hierarquia clara. Estas regras valem para os três formatos (16:9, 9:16, 1:1).
Grade de 3×3
A regra dos terços. Posicione o que importa nas linhas e nos quatro cruzamentos (pontos coral), não no centro morto.
Margem de segurança
Nada vital nos 8% das bordas (linha âmbar). Cortes, legendas e UI de plataforma vivem aí.
Regras de composição
07 · Mídia
Vídeo · Anatomia
Num vídeo, a tela é dividida em regiões fixas. Manter cada tipo de elemento sempre na mesma região cria consistência — o espectador aprende onde olhar.
Zonas da tela
Cada zona tem um trabalho fixo. Nunca troque as posições.
Componentes de tela
O repertório fechado. Combine estes blocos em vez de inventar layout do zero a cada vídeo.
08 · Movimento
Animação com propósito
Movimento guia o olho e dá ritmo — quando tem intenção. A marca usa um vocabulário pequeno e consistente de transições. Tudo parte de uma curva e de durações fixas.
A curva da marca
Saída rápida, chegada suave (ease-out). Dá energia sem parecer brusco. Use a mesma curva em tudo — é o que faz o movimento "soar" como a marca.
Durações
Do & Don't
prefers-reduced-motion: quem desativou animação no sistema deve ver o conteúdo no estado final, sem movimento. É uma linha de CSS — e evita enjoar parte do público.09 · Diagramas
Diagramas, fluxos e arquiteturas
Seu terreno: explicar sistemas. Um bom diagrama é metade do trabalho de ensinar. As regras aqui valem para fluxogramas, arquiteturas e infográficos.
Vocabulário de nós
Tamanho e forma consistentes. Cor = significado (coral destaca, ciano = dado/storage, tracejado = sistema externo). Nunca cor por enfeite.
Conectores
Ortogonal (90°), nunca diagonal solta. Sólido = fluxo direto. Tracejado = fluxo de dado / assíncrono.
Fluxograma · pipeline de dados
Direção única e clara (esquerda → direita). Toda seta rotulada com o verbo da ação. O nó final (entrega) recebe o destaque coral.
10 · Dados
Data Visualization
Gráficos planos, sem degradê. Grid fino, labels em mono, fills da sequência de dados da marca. Coral codifica o foco.
Três princípios inegociáveis
Qual gráfico usar?
Sequência de dados
6 cores na ordem padrão. Use --seq-1 a --seq-6. Para mais de 6 séries, use o ramo estendido.
| Token | Cor | Hex |
|---|---|---|
| --seq-1 | Coral | #E8553A |
| --seq-2 | Amber | #E8A33D |
| --seq-3 | Olive | #7F8B45 |
| --seq-4 | Teal | #16786E |
| --seq-5 | Cyan | #0E9AAC |
| --seq-6 | Rust | #9E3E2B |
Gráfico de barras
Fills planos da sequência. Barra de foco em coral. Grid fino, labels mono.
Gráfico de linha
Série temporal contínua. Uma linha, área leve (não gradiente), último ponto rotulado. Grade discreta.
KPI / Big number
Um número que importa, grande. Contexto (delta vs período) pequeno e colorido por significado.
Donut (com ressalvas)
Só para 2–4 fatias e quando o todo importa. Sempre com % direto. Para mais categorias, prefira barras.
Funil / Pipeline
Volume que decai por etapa. Barras proporcionais, valor absoluto em cada uma, destaque no gargalo ou na saída.
Tabela de dados
Mono, grid fino, sem row striping. Alinhamento tabular. Números à direita.
| Modelo | Latência p95 | Throughput | Custo/1M tok | Status |
|---|---|---|---|---|
| GPT-4o | 42ms | 1,240 req/s | $2.50 | ✓ |
| Claude 3.5 | 32ms | 1,890 req/s | $3.00 | ✓ |
| Gemini Pro | 37ms | 1,560 req/s | $1.50 | ✓ |
| Mistral Large | 23ms | 2,100 req/s | $2.00 | ✓ |
| Llama 3.1 70B | 27ms | 1,780 req/s | $0.90 | ✓ |
| DeepSeek V3 | 20ms | 2,450 req/s | $0.50 | ↗ |
Erro que mais engana: eixo cortado
11 · Cenas
Cenas de slide
Telas inteiras prontas (16:9), cada uma nos dois temas. O código usa variáveis CSS — copie e troque 5 valores no topo pra alternar claro ⇄ escuro.
Galeria de cenas
6 cenas em pares claro/escuro. Use o escuro como pontuação — não alterne a cada slide.
12 · Infográficos
Blocos de infográfico
Não são ícones soltos — são componentes inteiros, compostos: estatística, fluxo de processo, pizza com chamadas, organograma, linha do tempo, comparação… Cada um já monta um pedaço do infográfico no traço hand-drawn da marca.
13 · UI
Componentes
Componentes de interface com a paleta da marca. Botões, inputs, cards e navegação editorial — sem glass blur, sem gradiente.
Botões
Coral para ação primária. Ghost/secondary para ações secundárias. Um coral por tela.
Inputs
Fundo card, borda ink 20%. Focus em coral.
Cards
Superfície clara, borda fina, sem sombra. 8px radius.
14 · Biblioteca
Assets prontos pra usar
Um kit completo: componentes copiáveis, logos, ícones, formas, texturas e tokens exportáveis. Tudo já no sistema da marca — é só puxar e montar.
Componentes copiáveis
12 componentes de mídia prontos. Copie o HTML e cole onde quiser — já vêm com cores e fontes embutidas.
Logos & avatares
8 arquivos SVG. Vetor; o nⁱ acompanha a fonte STIX.
Tokens exportáveis
As variáveis da marca em CSS e JSON — cole no projeto e tudo já sai na paleta certa.
15 · Disciplina
Regras da Marca
As regras que protegem a identidade visual. Violá-las é quebrar a coerência da marca.