Marca

A marca Onblide existe em três formas: horizontal, empilhada e símbolo. Cada forma vem em três cores: primary, white e dark. Nove arquivos ao todo, cada um para um contexto específico; nenhum deles é "a logo principal" com os outros como substitutos.

Uso em produto

Dentro da interface (cabeçalhos, telas de carregamento, e-mails transacionais), use o componente Logo: é a forma horizontal com as cores dirigidas pelos tokens do tema ativo, então se adapta sozinho a claro e escuro.

Carregando…

import { Logo } from '@onblide/ui';

Componente: Logo.

Variantes de arquivo

Fora do produto (apresentações, documentos, redes sociais, favicon, materiais impressos), use os arquivos em project/marca/. Eles não seguem o tema: a cor é fixa no próprio arquivo, escolhida para o fundo onde a marca vai aparecer. A pasta é organizada por formato:

project/marca/svg/: fonte vetorial das nove variantes (as mesmas mostradas abaixo). Primeira opção sempre que a ferramenta aceitar SVG: produto, docs, web, a maioria dos editores de apresentação e design.
project/marca/png/: as mesmas nove variantes, exportadas em alta resolução (2049px na horizontal e empilhada, 513px no símbolo), para ferramentas que não aceitam vetor (Word, e-mail, alguns formulários).
project/marca/png/icones/: só o símbolo, já recortado nos tamanhos de ícone mais comuns (16, 32, 48, 64 e 128px) nas três cores. Fonte de favicon, ícone de app e outros contextos que pedem um raster pronto, sem precisar re-exportar do SVG.

Horizontal: uso padrão

Símbolo e nome lado a lado. Primeira opção sempre que houver largura disponível.

Onblide, variante horizontal, primary — primary, fundo claro

Onblide, variante horizontal, white — white, fundo escuro ou de marca

Onblide, variante horizontal, dark — dark, fundo claro neutro (nunca branco puro)

Empilhada: espaços quadrados ou estreitos

Símbolo acima do nome. Use quando a largura for curta e a altura sobrar: selos, carimbos, posts quadrados, capas de documento.

Onblide, variante empilhada, primary — primary, fundo claro

Onblide, variante empilhada, white — white, fundo escuro ou de marca

Onblide, variante empilhada, dark — dark, fundo claro neutro (nunca branco puro)

Símbolo: espaços mínimos

Só o ícone, sem o nome. Use quando o nome não couber com um mínimo de legibilidade: favicon, avatar, ícone de app, marca d'água.

Símbolo Onblide, primary — primary, fundo claro

Símbolo Onblide, white — white, fundo escuro ou de marca

Símbolo Onblide, dark — dark, fundo claro neutro (nunca branco puro)

Como escolher a cor

primary: padrão sobre fundo claro (branco, --ob-surface, cinza muito claro).
white: sobre fundo escuro ou sobre uma cor de marca saturada (ex.: um card azul); garante contraste sem disputar com o fundo.
dark: sobre fundo claro mas não branco puro (creme, bege, papel); o primary perderia força nesses tons.

Nunca aplique primary sobre fundo escuro, nem white/dark sobre fundo que não sustente o contraste. Teste sempre a variante contra o fundo real antes de aprovar uma peça.

Área de proteção e tamanho mínimo

Deixe ao redor da marca um espaço livre de no mínimo a altura do símbolo (a peça circular do lockup). Nenhum texto, borda ou outro elemento entra nessa margem.
Tamanho mínimo legível: horizontal a partir de 20px de altura; empilhada a partir de 48px de altura; símbolo a partir de 16px de altura (favicon).
Nunca redesenhe, recolora fora das três variantes, distorça a proporção ou separe o símbolo do nome na horizontal/empilhada.

Voz e tom

Conversacional, frases curtas e declarativas; sem jargão corporativo.
Português do Brasil, sentence case: "Nova tarefa", não "Nova Tarefa".
Números no formato brasileiro: R$ 38,4k, 4,8%, 2.847.
Quando algo funciona, diga que funciona; quando não, diga que não.

Uso em produto​

Variantes de arquivo​

Horizontal: uso padrão​

Empilhada: espaços quadrados ou estreitos​

Símbolo: espaços mínimos​

Como escolher a cor​

Área de proteção e tamanho mínimo​

Voz e tom​