O sistema visual de O NORTE traduz a marca em código, cor, tipografia, iconografia e componentes — prontos para uso em impresso, tela e material editorial.
Antes de propor qualquer peça, ela é testada contra esta lista. Quando duas regras entram em conflito, vence a subtração. O sistema visual é enxuto por princípio — cada elemento justifica sua presença.
A marca se filia à tradição do livro bem feito, não ao design promocional. Referências: Penguin Classics, Everyman's Library, Martins Fontes especiais, mapas antigos, instrumentos de navegação, papel com memória.
Cada peça é testada primeiro na versão mais sóbria. Se retirar o elemento não piora a peça, retira. Adições só com justificativa editorial registrada.
Ênfase se constrói com respiração, não com gritaria. Margens largas, fios finos, cor usada em economia. Nada vibrando, nada piscando, nada de bolhas de destaque.
A tipografia constitui o layout, não o serve. Família, peso, tracking e entrelinha carregam significado editorial e são decisão declarada.
Quando a peça é física, o toque importa tanto quanto a imagem. Em digital, a régua é reproduzir respiração, calma e leitura confortável.
A linguagem visual de O NORTE se filia à tradição editorial-institucional: livros bem feitos, manuais de marca cristã clássica, papelaria de instituições de ensino tradicionais. Quando o design encosta no padrão "Lovable / v0 / template SaaS", a marca perde autoridade. Esta seção lista o que não fazer — e por quê — para que toda manutenção futura preserve a identidade.
Purple-pink, blue-cyan, "aurora", mesh gradient. Cor sólida, sempre. A marca trabalha em Tinta, Creme e Ouro velho — sem variação tonal contínua.
shadow-lg Tailwind, 0 10px 30px rgba(0,0,0,0.1). Quando há sombra, é sutil, direcional, com offset alto no Y para evocar elevação editorial — nunca difusa, nunca para "elevar" cards genéricos.
rounded-2xl em tudo. Cada raio tem propósito: 6–8px em botões, 12–14px em cards, 22px em painéis, 24px só na "carta de papel" do Modo Documento.
Toda iconografia é repertório próprio. Camadas mestre / estruturais / narrativas. Nunca lucide-react, feather, heroicons, Material Icons.
Inter é UI (sidebar, eyebrow, labels). Display é Cormorant Garamond, sempre. Trocar a fonte de display muda a marca — não há substituto.
Backdrop-blur, gradients animados, glow effects, neon stroke. Ausentes do vocabulário. Materialidade é papel, não vidro.
Ouro velho #8A6B3B é o único acento. Nunca azul-saturado, verde-neon, vermelho-vibrante para chamar atenção. A hierarquia se constrói por tipografia e respiração, não por saturação.
"Start free trial", contadores de urgência, popups, banners promocionais, badges "novo!" em cor saturada. A linguagem é editorial-institucional, não conversion-driven.
Ilustração só em aquarela storybook europeu clássico (linha de produto) ou silhueta sólida (institucional). Nada de ilustrações flat, blob shapes, gradient mesh, isometric, 3D render.
Em Ouro velho ou linha 8% Tinta, como elemento estrutural recorrente. Marca seções, separa blocos, sublinha tipografia.
Tinta, Creme, Ouro velho como base. Paleta ampliada (Vinho, Oliva, Ocre, Ardósia) entra por obra específica, nunca permanente.
Cormorant em títulos longos, italics em subtítulos, Libre Baskerville em corpo, Inter em UI. Hierarquia tipográfica é a hierarquia visual.
Ar vertical generoso (--space-7 80px, --space-8 96px). Margens largas, blocos respirando. Nunca colado.
Creme #F4F1EA em vez de #FFF. A página evoca papel, não écran clínico.
Blockquote com borda esquerda 2px Ouro velho, Cormorant italic. Citação literária ou bíblica quando cabível, sem decoração extra.
A marca é editora de obras atemporais, não app de produtividade. Pertence à linhagem de Penguin Modern Classics, Verbo, Cosac Naify, Folio Society — não Notion, Linear, Vercel. Quando o design encosta no padrão SaaS, a marca perde autoridade institucional. Esta lista é teste obrigatório antes de qualquer peça pública entrar no ar.
A v1.2 formalizou a iconografia em três camadas; a v1.3 limpa as artes provisórias e deixa os tiles em branco — a arte definitiva entra na v1.4, gerada individualmente por IA segundo o briefing canônico. O ícone-mestre é único e fixo. Os ícones estruturais permanentes ficam sempre disponíveis no repertório institucional. Os narrativos curados entram por obra, nunca todos ao mesmo tempo. A dupla linguagem visual — silhueta sólida no institucional, aquarela na linha de produto — atravessa as três camadas.
Silhueta sólida, traço firme, leitura em Tinta sobre Creme ou Creme sobre Tinta. Para marca, manual, papelaria, embalagem, colofão, selo editorial. Pode receber acento em Ouro velho em filetes ou hot stamping.
Aquarela ilustrada em estilo storybook europeu clássico, paleta terrosa desaturada, fundo branco puro, sem moldura. Prompt canônico de geração registrado no briefing do produto. Modelo-alvo: GPT Image (padrão OpenAI).
O símbolo combina estrela e arco de horizonte como uma unidade. O wordmark "O NORTE" em Cormorant Garamond Bold caixa alta, com o artigo presente. Em assinatura institucional, a frase "Formação na Verdade" pode aparecer abaixo, separada por filete de ouro velho. A área de respiro mínima ao redor da assinatura é equivalente à altura do "N" do wordmark.
Full · positivo
Full · invertido
Lite · positivo
Full · sobre ouro velho
Símbolo isolado: 12 mm em impresso, 40 px em tela. Wordmark isolado: 15 mm em impresso, 120 px em tela. Assinatura completa: 20 mm em impresso, 160 px em tela.
A paleta canônica é enxuta por princípio. A marca respira em Tinta sobre Creme, com Ouro velho como acento discreto. Carvão e Giz são ferramentas funcionais. A paleta ampliada entra em obras editoriais específicas, sempre como acento, nunca como estrutura, nunca aplicada à marca-mãe.
Cores terrosas, nunca saturadas, sempre em área contida. Cada uma pode entrar em obras específicas, em decisão editorial registrada. Nunca permanente, nunca aplicada à marca-mãe.
Tinta e Creme formam o par-base (≈95% das aplicações). Ouro velho é acento, nunca estrutura. Nunca preto puro #000 (produz vibração excessiva sobre Creme). Nunca branco puro #FFF em área grande (clínico demais, destoa da calma editorial).
Cormorant Garamond carrega títulos e peças cerimoniais. Libre Baskerville sustenta a leitura longa, em prosa institucional, cartas e miolo de livros. Inter aparece em interface, legendas e elementos funcionais. Nunca mais de duas famílias na mesma peça.
| Nível | Família | Peso | Tamanho | Entrelinha | Exemplo |
|---|---|---|---|---|---|
| Hero / título principal | Cormorant | Bold | 56–72 px | 1.1 | Há um norte |
| H1 | Cormorant | Regular | 40–48 px | 1.15 | Posicionamento |
| H2 | Cormorant | Regular | 28–32 px | 1.2 | Fundamentos |
| H3 | Inter | Medium | 18–20 px | 1.3 | Subtítulo |
| Parágrafo longo | Libre Baskerville | Regular | 17–18 px | 1.6 | Aprender com alegria conecta… |
| UI / botão | Inter | Medium | 15 px | 1.2 | SAIBA MAIS |
| Legenda / caption | Inter | Regular | 13 px | 1.4 | Foto: registro editorial |
| Nível | Família | Peso | Tamanho | Entrelinha | Tracking |
|---|---|---|---|---|---|
| Título de capa | Cormorant | Bold | 36–48 pt | 1.0 | +8% |
| Título de capítulo | Cormorant | Regular | 24–28 pt | 1.1 | +6% |
| Subtítulo | Cormorant | Italic | 14–16 pt | 1.3 | normal |
| Corpo de texto | Libre Baskerville | Regular | 10–11 pt | 1.45–1.55 | normal |
| Citação em bloco | Cormorant | Italic | 12 pt | 1.4 | normal |
| Nota de rodapé | Libre Baskerville | Regular | 8 pt | 1.35 | normal |
| Fólio / numeração | Inter | Regular | 8 pt | — | +10% |
Nunca misturar mais de duas famílias na mesma peça. Nunca Cormorant em corpo de leitura longa. Nunca versalete automático — caixa alta real com tracking aberto. Aspas tipográficas curvas em toda superfície. Reduzir radicalmente travessões em prosa.
A regra mestra é a hierarquia por silêncio. Botões em formato retangular sutil, com inversão de cor no hover. Cards em fundo creme ou tinta com bordas arredondadas suaves. Citações com filete de ouro velho à esquerda. Nada animado.
A próxima geração merece formação à altura, com fundamento, beleza, profundidade e alegria. O NORTE — Manifesto
Divisória curta
Divisória longa
Nunca em ângulos. Nunca animado. Sempre em ouro velho.
A mesa não é o lugar, é o gesto. Ler junto, conversar junto, brincar junto.
A grade documental privilegia leitura longa, com margens generosas e respiração entre seções. O título de documento aparece em Cormorant Garamond Regular, sempre antecedido por eyebrow em Inter pequeno e ouro velho.
Função do pilar. O credo é a declaração de princípios da marca, o que ela afirma como verdade operante. Diferente da missão, que descreve o trabalho, e da visão, que descreve o destino, o credo descreve convicções. É o documento a que a marca se obriga.
Quando for preciso reduzir o credo a formato curto, as três frases canônicas são:
Formar é mais que informar.
Há um norte, há um horizonte.
Aprender com alegria conecta mais fundo.
Em /marca/*, a página é apresentada como uma carta de papel sobre a mesa: body.doc-page com fundo levemente bege (#E7E3DA), e o .page em Creme com border-radius 24px e sombra editorial. A v1.3 introduz ritmo tonal por seção para evitar o "salsichão monocor" em documentos longos.
| Elemento | Max-width | Padding lateral |
|---|---|---|
| .page (livro) | 1040 px | 0 (border-radius 24) |
| .doc-hero | 900 px | --doc-pad-x |
| .doc-section | 100% | --doc-pad-x |
| .doc-section__inner (coluna) | 720 px | 0 |
| .doc-footer | 720 px | --doc-pad-x |
| Breakpoint | --doc-pad-x |
|---|---|
| Desktop > 1024px | 48 px (--space-5) |
| Tablet ≤ 1024px | 32 px (--space-4) |
| Mobile ≤ 880px | 24 px (--space-3) |
| Small ≤ 480px | 20 px |
Para evitar a sensação de monotonia em documentos longos, cada .doc-section alterna tom. Proporções de tipografia, line-height e padding são idênticas em ambos os tons — a única diferença é cor.
Fundo --creme, texto --tinta, h2/h3 Tinta, h4 Ouro, blockquote borda Ouro.
A próxima geração merece formação à altura.
Fundo --tinta, texto --creme, h4 Ocre. Mesmas proporções; só cor muda.
A próxima geração merece formação à altura.
O ritmo é de respiração, não 1×1 mecânico. Hero sempre claro. Seção 1 claro (continuação do hero). Seção 2 escuro (primeiro contraste). Alterna até o fim. Sempre fechar em claro quando possível — abrir e fechar com luz.
| Documento | Seções | Ritmo aplicado |
|---|---|---|
| Doc 01 · Posicionamento | 3 | C · E · C |
| Doc 02 · Primal Branding | 8 | C · E · C · E · C · E · C · C |
| Doc 03 · Identidade Visual | 9 | C · E · C · E · C · E · C · E · C |
| Doc 04 · Produto (estrutura própria) | 9 | claro com ilhas escuras (06 e 08) |
Entre .doc-section e .doc-section--dark, inserir <div class="doc-section-break"><span class="doc-section-break__symbol">·</span></div> — filetes laterais Ouro 1px + ponto central. Entre seções de mesmo tom, omitir.
Tokens prontos para uso em CSS, SCSS, Tailwind config, Figma styles ou exportação para qualquer outro sistema. Os nomes são em português para preservar a coerência verbal da marca.
A coerência do sistema vem tanto do que se faz quanto do que se evita. Esta lista é parte do design system e organiza todas as decisões de aplicação.
Nenhuma sombra, brilho, gradiente, reflexo, bisel, contorno ou efeito 3D no wordmark ou no símbolo. A geometria é fixa.
Tinta, Creme e Ouro velho são fixos. Paleta ampliada entra como acento por obra, registrada em documento. Nunca aplicada à marca-mãe.
A marca usa Tinta (#1A1A1A) e Creme (#F4F1EA). Branco absoluto é clínico, preto absoluto vibra demais sobre Creme.
Família, Luz e ícones narrativos curados não substituem o ícone-mestre. Convivem ao lado dele, nunca no lugar.
Peças de oferta, countdown, popup, selo de desconto, contador de urgência. Nada disso entra. Cada peça é editorial.
Quando for preciso composição em caixa alta, usar caixa alta real com tracking aberto. Versalete automático cansa a vista.
Inter é reservada para interface, legenda, botão. Texto corrido em tela usa Libre Baskerville. Essa escolha é deliberada.
Os sete ícones narrativos curados só entram por obra específica, coerentes com o tema. Nunca decoração solta, asset de slide, emoji.
A marca não usa representações figurativas de Cristo. Trabalha a cosmovisão cristã pela substância, não pela imagem religiosa direta.