Guia da marca · noergo

Conceito

As peças formam um cérebro. Os caminhos e pontos representam ideias que se encontram; as cores dão espaço para diferentes formas de pensar.

Pensamento

Seis formas orgânicas compõem um cérebro aberto a novas possibilidades. Cada peça carrega uma ideia.

Conexão

Caminhos curvos e pontos de encontro tornam as conexões visíveis. A rede continua reconhecível em uma única cor.

Ação

O símbolo expressivo encontra um nome de leitura clara. Onest em azul profundo equilibra a energia das cores.

nóergo

nó: O ponto do mapa onde duas ideias se cruzam.
ergo: “Logo”, em latim, de cogito, ergo sum. Daí o lema proposto: Penso, logo faço.
escrita: No logotipo, sempre noergo em minúsculas. Em texto corrido, Noergo é permitido; preserve o desenho dos arquivos oficiais.

Versões

A horizontal é a versão principal. A empilhada serve para espaço quadrado ou alto, como avatar com nome, capa de apresentação e adesivo.

HorizontalPadrão, sobre Papel ou branco.SVG

Horizontal negativaSobre Azul profundo ou fundo escuro.SVG

EmpilhadaEspaço quadrado, fundo claro.SVG

Empilhada negativaEspaço quadrado, fundo escuro.SVG

Uma cor, Azul profundoCarimbo, impressão em uma cor, fundo colorido claro.SVG

Uma cor, brancoSobre foto escura ou cor viva.SVG

LogotipoSó o nome, quando o símbolo já aparece por perto.SVG

SímboloAvatar, selo pequeno, ícone dentro do produto.SVG

Logotipo brancoSó o nome, sobre fundo escuro.SVG

Símbolo, uma corCarimbo, gravação, bordado.SVG

A empilhada também existe em Azul profundo e em branco, e o símbolo, em branco. Cada uma tem PNG transparente em 512, 1024 e 2048 px dentro do pacote .zip.

Construção

Curvas vetoriais editáveis, seis cores sólidas e letras reais de Onest 700. O desenho final não contém imagens incorporadas.

Símbolo: Cérebro frontal com seis peças orgânicas. Os nós e caminhos internos são brancos na versão colorida; nas versões de uma cor são vazados.
Nome: Onest, peso 700, em minúsculas. Espaçamento ajustado e convertido em curvas. Use o SVG oficial para conservar a composição.
Cor: Azul profundo #142B45. A versão negativa usa o nome branco, mantendo o cérebro colorido.

Proporção e proteção

Composição horizontal com sua área de proteção

Na horizontal, a altura do cérebro é 1,55 vezes a altura-x do nome. O vão entre símbolo e letras é 0,42 vezes a altura-x.

A margem mínima é 0,32 vezes a altura-x e já está incluída nos arquivos. Não corte essa área nem altere a proporção.

Tamanho mínimo

Assinatura horizontal a 160 pixels — **Horizontal**160 px em tela; 35 mm em impressão.

Assinatura empilhada a 120 pixels — **Empilhada**120 px em tela; 28 mm em impressão.

Símbolo48 px; abaixo disso, use o favicon simplificado.

Usos incorretos

O símbolo é plano de propósito e só funciona com a forma e as cores originais. Quando em dúvida, use um dos arquivos prontos.

Esticar ou achatar. Preserve as proporções do cérebro e das letras.

Espelhar ou girar. Preserve a posição das peças e de suas conexões.

Trocar as cores ou a posição das seis peças do cérebro.

Noergo

Recompor a assinatura com outra fonte, outro peso ou N maiúsculo. Use os contornos oficiais de Onest 700.

Aplicar sombra, contorno, brilho ou volume 3D.

Pôr a versão colorida sobre cor viva. Nesse fundo, use a versão branca ou a Azul profundo.

Mudar a proporção entre símbolo e nome, ou o vão entre eles.

novo!

Invadir a área de proteção com texto, selo ou outro logo.

Cor

O nome usa azul profundo sobre papel quente. As seis cores do cérebro pertencem ao símbolo. Na interface, os tons de ação e de conteúdo têm funções próprias e contraste definido.

Distribuição ilustrativa: superfícies claras, texto escuro e cores concentradas em ideias e ações.

Paleta definitiva

Clique em uma cor para copiar. As seis cores vivas são do símbolo; não substituem automaticamente as cores de texto e estado da interface.

Azul profundo#142B45

Papel#F7F5EF

Azul#0061FF

Amarelo#FFD000

Verde#53C51B

Ciano#00A1F1

Vermelho#FF3025

Turquesa#00B990

Cores de interface e conteúdo

Tangerina#FF8A26Prazo perto, atenção.

Urucum#E8483AErro e ação destrutiva.

Uva#7B5CFAAgentes de IA, e só eles.

Lagoa#17B3D1Referência e consulta.

Escalas

De 50 a 900, geradas em OKLCH. O tom 500 é sempre a cor da marca, sem arredondamento. Clique num tom para copiar.

Regras de uso

Card colorido: fundo 100, texto 800

Todos os pares passam de 4,9:1.

Faísca

Tangerina

Urucum

Goiaba

Uva

Anil

Lagoa

Broto

Sobre cor viva, texto Azul profundo

Duas exceções levam branco: Anil 500 e Uva 600. Uva 500 com branco fica em 4,4:1 e não passa no AA.

Faísca 8.9:1 Tangerina 6.1:1 Broto 6.0:1 Lagoa 5.8:1 Goiaba 4.8:1 Urucum 4.9:1 Anil 500 4.7:1 Uva 600 5.6:1 Urucum 600 5.0:1

Cada cor tem um papel na interface

Roxo quer dizer “isto veio de um agente de IA”. Não use para enfeite.

Uva agentes de IA, sugestões tracejadas
Anil seleção, link, anel de foco
Broto feito, sincronizado
Urucum erro, apagar
Faísca captura, a ideia nova

Tipografia

Três famílias livres, todas com licença SIL Open Font License 1.1, com suporte ao português e hospedadas junto do site, sem chamada a servidor de terceiros.

Onest

Assinatura em peso 700. Títulos em 700–800; a mesma família une marca e comunicação.

Penso, logo faço.

300400600700800

Figtree

Interface e texto corrido. 400 no corpo, 600 em título de card, 700 em botão.

Abrir com o sino da padaria da Dona Cida. Testar com o microfone USB no sábado, antes de gravar o piloto.

300400600700900

Spline Sans Mono

Markdown, links entre notas, atalhos de teclado e saída de agente.

status: fazendo
[[Dona Cida]] → [[Microfone USB]]

300400500600700

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 áàâãéêíóôõúüç ÁÀÂÃÉÊÍÓÔÕÚÇ “ ” ‘ ’ · • → ← ↔ … ×

Escala

8xl · 96Ideia
7xl · 76Ideia
6xl · 60Ideia
5xl · 48Ideia
4xl · 38Mapa e quadro
3xl · 30Mapa e quadro
2xl · 24Mapa e quadro
xl · 20Gravar o piloto no sábado, com a Bia e o Toninho
lg · 18Gravar o piloto no sábado, com a Bia e o Toninho
base · 16Gravar o piloto no sábado, com a Bia e o Toninho
md · 14Gravar o piloto no sábado, com a Bia e o Toninho
sm · 13Gravar o piloto no sábado, com a Bia e o Toninho
xs · 12Gravar o piloto no sábado, com a Bia e o Toninho

Forma e espaço

Círculo é pensamento. Retângulo de canto suave é ação. A diferença de forma funciona até para quem não distingue cores.

Podcast do bairro Nome e vinheta BITODC

Círculo nó do mapa, faísca, avatar de pessoa, ponto de cor.

Gravar o piloto

Bia · sábado

Retângulo de canto suave card, coluna, botão, campo, avatar de agente.

Raios

xs · 4tecla
sm · 6detalhe, foco
md · 10card, campo
lg · 14coluna, aviso
xl · 20captura, painel
2xl · 28janela
fullbotão, nó, etiqueta

Espaço

Base de 4 px. Prefira os passos marcados; os intermediários existem para ajuste fino.

1 · 4
2 · 8
3 · 12
4 · 16
6 · 24
8 · 32
12 · 48
16 · 64
24 · 96

Sombras

shadow-1card em repouso
shadow-2hover, barra de captura
shadow-3menu, aviso, janela
shadow-liftcard sendo arrastado

Componentes

Peças de referência em CSS puro, todas com prefixo nr-. A cor de conteúdo entra por data-cor. Troque o tema para ver os mesmos tokens no escuro.

.nr-btn

.nr-captura

.nr-card

Nome e vinheta

BIhoje · 2 ligações

Lista de pautas

--tinta · fundo 100

Microfone USB

--feito · R$ 289

Chamar a Dona Cida

--erguido · sendo arrastado

.nr-sugestao

Sugestão do Claude · card novo

Testar o som da sala

Tudo que vem de agente chega tracejado em Uva e só vira card depois do seu ok.

.nr-coluna

Fazendo 2

Nome e vinheta

Bia · hoje

Gravar o piloto

Bia · sábado

.nr-no · .nr-ligacao

Podcast do bairro Lista de pautas Microfone USB Achar hospedagem

Ligação na cor do destino. Sugestão de agente, pontilhada.

.nr-tag · .nr-avatar

Ideia Até sexta Bloqueado Prioridade Agente Em revisão Referência Feito

BITODC Pessoa é círculo. Agente é quadrado de canto suave.

.nr-visoes · .nr-kbd

⌘K abre a captura em qualquer tela · Enter guarda · Esc fecha

.nr-campo

Nome do projeto Aparece no topo do mapa e do quadro.

.nr-aviso

Feito. Movi 3 cards para Fazendo.

.nr-vazio

Nada por aqui ainda. Que tal anotar a primeira ideia? O atalho ⌘K funciona em qualquer tela.

O código está em noergo.css e tokens.css, dentro do pacote do design system, com a documentação de cada peça.

Movimento

O mesmo objeto viaja entre as visões. Ao trocar o mapa pelo quadro, cada card desliza até a sua coluna, sem sumir para reaparecer em outro lugar.

Mover, abrir, fecharease-out · 220 ms

Criarspring · 360 ms

Trocar de visãoemphasized · 560 ms

A faísca pulsa devagar no campo de captura vazio. Em nenhum outro lugar algo se mexe sozinho.

Com “reduzir movimento” ligado no sistema, todas as durações vão a zero, inclusive nesta demonstração.

Ícone e favicon

O cérebro colorido ganha um fundo azul profundo no ícone do aplicativo. Há versões para fundo claro, Apple touch e máscara do sistema.

ícone do app, fundo Azul profundo — **Principal**Cantos de raio 14,5 em 64. Símbolo com 62,5% da largura.

ícone do app, fundo branco — **Claro**Alternativa para fundo escuro do sistema.

ícone maskable recortado em círculo — **Maskable**Fundo cheio, símbolo com 50%. Cabe em qualquer máscara do Android.

Apple touch180 px, sem cantos no arquivo. O iOS arredonda sozinho.

Favicon em 48, 32 e 16 px. A versão reduzida preserva as seis peças e usa menos nós, maiores, para manter a leitura.

Voz e tom

Português do Brasil, “você” e verbo de ação. Quem abre o noergo está no meio de um pensamento, e o texto da interface não pode competir com ele.

Situação	Em vez de	Escreva
Lista vazia	~~Nenhum item encontrado.~~	Nada por aqui ainda. Que tal anotar a primeira ideia?
Ação concluída	~~Operação realizada com sucesso.~~	Feito. Movi 3 cards para Fazendo.
Agente	~~O agente executou a ação.~~	O Claude sugeriu 4 ligações. Quer ver?
Erro	~~Erro ao salvar.~~	Não consegui salvar. Seu texto está guardado aqui; tento de novo em 5 s.
Campo de captura	~~Digite sua nota~~	Tive uma ideia…
Apagar	~~Tem certeza que deseja excluir o item?~~	Apagar “Gravar o piloto”? Dá para desfazer por 10 s.
Tarefa concluída	~~Status alterado para concluído.~~	Mais uma no Feito.

Fato no lugar de adjetivo. “Anote em 2 segundos” convence; “experiência fluida” não diz nada.
Diga o que aconteceu e como voltar atrás. Toda ação que apaga ou move muita coisa oferece desfazer.
Agente tem nome. “O Claude sugeriu”, nunca “o sistema”. Quem lê precisa saber de onde veio a mudança.

Arquivos

Arquivos finais prontos para usar: SVGs editáveis, PNGs transparentes, ícones, materiais sociais, fontes locais, tokens e documentação.

Pacote da marca .zip SVG de todas as versões, PNG em 512, 1024 e 2048 px, ícones de app, favicon, imagem social e o guia em Markdown. Baixar Design system .zip tokens.json no formato DTCG, tokens.css, noergo.css, as três fontes em woff2 com as licenças OFL e a documentação dos componentes. Baixar

Uma ideia puxa outra