A marca Rocket Browser

Conceito

O símbolo é um rastro em degradê, do laranja ao magenta, que desenha a letra R e termina numa ponta de foguete.

O rastro fala de velocidade e de deixar para trás: o rastro que você escolhe deixar. As cores quentes sobre fundo escuro também nos separam dos concorrentes, que usam azul, roxo ou verde em fundo branco.

Frase da marca: “Muitas identidades. Nenhum rastro.”

Logo

Use sempre os arquivos originais. O SVG é o melhor para telas e gráficas; o PNG tem fundo transparente e alta resolução.

Horizontal · fundo escuro

A versão padrão. Para o fundo Noite ou fotos escuras.

SVGPNG

Horizontal · fundo claro

Texto em Noite, para fundos brancos e claros.

SVGPNG

Horizontal · branco

Tudo branco. Sobre o degradê ou outra cor forte.

SVGPNG

Símbolo · fundo escuro

Espaços pequenos: avatar, favicon, selo.

SVGPNG

Símbolo · fundo claro

A ponta do foguete em Noite, para aparecer no claro.

SVGPNG

Ícone do app

Quadrado arredondado Noite, para Mac e Windows.

SVGPNG

Área de respiro e tamanhos mínimos

Deixe em volta do logo, no mínimo, um espaço igual à altura da letra “o” da palavra Rocket (a medida x). Nada de texto, borda ou outra imagem dentro dessa área.

Tamanhos mínimos

• Logo horizontal: 120 px de largura na tela ou 30 mm impresso.
• Símbolo sozinho: 16 px.
• Abaixo disso, use o símbolo no lugar do logo horizontal.

xxxx

Usos incorretos

O logo só funciona se for sempre o mesmo. Estes são os erros mais comuns. Não faça.

Não troque as cores do degradê.

Não gire o logo.

Não estique nem achate.

Não coloque sombra nem contorno.

Não use o logo colorido sobre o degradê. Use a versão branca.

Rocket Browser

Não recrie o nome em outra fonte.

Rocket Browser

Não coloque o símbolo à direita do nome.

Não use fundos que apagam o símbolo.

Cores

Base escura (Noite) ou clara (Névoa), com o laranja e o magenta do rastro como destaque. Clique no código para copiar.

Principais

Apoio

Neutros · modo escuro

Neutros · modo claro

Status

Proporção

Em cada tela: 70% Noite ou Névoa, 20% neutros e só 10% das cores do rastro.

Contraste

Medido pela regra WCAG 2.1. AA pede 4,5:1 para texto comum e 3:1 para texto grande (24 px, ou 19 px em negrito) e ícones.

Degradê Rastro

background: linear-gradient(135deg, #FF7B35 0%, #FF0093 100%);

Tipografia

Pilha de reserva: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. No app as fontes vão embutidas, porque ele funciona sem internet.

Espaço, cantos e sombras

Sombras

Foco

Anel de 3 px em rgba(255,0,147,.35) em tudo que recebe o teclado.

Componentes

As peças básicas do app e do site. No app os botões têm 36 px de altura; no site, 48 px.

Ícones

Traço de 1,75 px, pontas e cantos arredondados, desenhados numa grade de 24 px (estilo Lucide). Sempre na cor do texto ao lado; o magenta só para o que está ativo.

Voz e tom

Direto, confiante e técnico sem ser frio. Português do Brasil, sempre “você”, frases curtas e nenhum jargão sem necessidade.

Aplicações

Como a marca aparece no dia a dia.

Rocket Browser

rocketbrowser.online

Rocket Browser

rocketbrowser.online

Rocket Browser@rocketbrowser · Muitas identidades. Nenhum rastro.

Tokens CSS

Para quem vai programar: copie como está.

:root {
  --rb-noite: #120B1A; --rb-noite-2: #1B1226; --rb-noite-3: #251933;
  --rb-magenta: #FF0093; --rb-magenta-600: #E0007F; --rb-magenta-700: #C8006F; --rb-magenta-claro: #FF4FAE;
  --rb-laranja: #FF7B35; --rb-chama: #FF9F1C;
  --rb-nevoa: #FAF7FB; --rb-lavanda: #F3EEF6;
  --rb-rastro: linear-gradient(135deg, #FF7B35 0%, #FF0093 100%);
  --rb-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rb-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --rb-r-campo: 10px; --rb-r-cartao: 14px; --rb-r-janela: 18px;
}

Dúvidas sobre o uso da marca? Escreva para contato@rocketbrowser.online.