Rocktron

Solicitar cotação

Sistema de design

Padrão Rocktron

Este manual não descreve o padrão — ele é feito com o padrão. Cada cor, tamanho, raio e curva desta página vem dos mesmos tokens que constroem o site. Quando o sistema muda, esta página muda junto, sozinha.

Rocktron · engenharia elétrica de baixa tensão · desenvolvido pela Noctu

O princípio

Um laranja elétrico sobre papel morno. O sistema é achromático em tudo, menos na ação: onde há laranja, há algo a fazer. A marca aparece por contraste, não por enfeite.

01

Uma cor só

O laranja é o único preenchimento cromático da interface. A assinatura tem um azul próprio, mas ele não sai de dentro do logotipo: não pinta botão, link nem fundo.

02

Sem elevação

Camadas se separam por tom, nunca por sombra. Nenhum componente tem sombra projetada — o único uso de box-shadow é inset sem desfoque, que é borda, não elevação.

03

Dois pesos

400 para texto, 500 para ênfase. Não existe 600 nem 700. A contenção é a assinatura.

Assinatura

O logotipo carrega três cores, e é de onde vem o laranja do sistema. Duas delas — o azul e o laranja — são triângulos encaixados nas letras.

Logotipo Rocktron em grafite, com um triângulo azul no R e um triângulo laranja no t. Sobre fundo claro
Versão branca do logotipo Rocktron, com o triângulo azul. Sobre fundo escuro
Grafite da assinatura #404040 O corpo das letras. Não é o mesmo grafite do texto do site — este pertence ao arquivo do logotipo.
Azul da assinatura #426bba O triângulo do R. Vive só aqui: não pinta botão, link, fundo nem estado. É a única cor do sistema que não tem uso de interface.
Laranja da assinatura #de8703 O triângulo do t. É a origem do laranja de ação: o #e18600 da interface é este mesmo tom, ajustado para passar em contraste.
  • O azul não sai do logotipo. Ele é parte da marca, não da interface. Um botão azul, um link azul ou uma faixa azul quebram o sistema.
  • Duas versões, dois fundos. Grafite sobre claro, branca sobre escuro. Não existe versão laranja da assinatura.
  • O selo R é a marca reduzida à inicial, em disco laranja. Serve de chapéu em família e solução, onde o logotipo inteiro não caberia.
  • Área de respiro: no mínimo a altura da letra R em volta de toda a assinatura.

Cor

Nove valores, e só um deles é colorido. Cada amostra abaixo está pintada com o token que documenta, e traz o contraste medido contra a superfície em que ela é usada.

A cor da ação

#e18600 Laranja Rocktron

É o único preenchimento cromático do sistema: fundo de botão primário, banda de destaque, marcador de item ativo. Não é cor de texto corrido, não é cor de ícone decorativo, não é cor de fundo de seção inteira.

  • Sempre com texto grafite. Grafite sobre laranja dá 5,65:1 — passa em AA.
  • Nunca com texto branco. Branco sobre laranja dá 2,76:1 e reprova em qualquer critério.
  • Nunca em gradiente. O laranja já é saturado; um gradiente só embarra.

A paleta achromática

Todo o resto do sistema. Nenhuma destas é cor de marca: são superfícies e tinta.

Grafite #20242a Todo o texto, títulos, ícones. Preto morno, menos clínico que o preto puro sobre papel. 15,59:1 sobre branco.
Grafite claro #3d424a Texto corrido longo, quando o grafite cheio pesa demais. 10,11:1 sobre branco.
Cinza texto #646970 Apoio, legenda, rótulo. O valor mais claro que ainda passa em AA sobre papel: 4,98:1.
Branco #ffffff Fundo da página e superfície mais alta. É o repouso do sistema.
Papel #f4f3ef Off-white morno. Superfície de cartão e banda alternada. Substitui o cinza frio.
Papel fundo #eceae4 Um passo abaixo do papel. É a resposta do cartão ao ponteiro — a “elevação” do sistema.
Régua #dedcd7 Linha de 1px que separa seção de seção. O sistema usa régua, não só espaço em branco.
Traço #848b94 Contorno de botão secundário e traço fino. 3,44:1 sobre branco — o mínimo do critério 1.4.11.
Ilha escura #2f3238 Bloco invertido, usado com parcimônia. Branco sobre ele dá 12,85:1.

Superfícies

Quatro níveis, e a ordem importa. O que sobe na pilha não ganha sombra: ganha tom. Este é o mecanismo de profundidade do sistema inteiro.

Nível 0 · branco · página
Nível 1 · papel · cartão
Nível 2 · laranja · ação
Nível 3 · ilha escura

Nenhuma das quatro camadas acima usa sombra. Elas se distinguem só pelo tom.

Por que não usamos sombra

Compare os dois. O da direita é o do sistema.

Com sombra

Fica pesado, datado, e a borda embaça em telas de baixo contraste.

Não
Com tom

Fica plano, editorial e rápido. A separação continua clara em qualquer tela.

Sim

Tipografia

Uma família só carrega o sistema inteiro, do título de 90px ao rótulo de 10px. Dois pesos. Sem itálico, sem versão condensada, sem uma segunda fonte para display. A contenção é a assinatura.

Aa 400 · texto Corpo, apoio, legenda, ícone. É o peso padrão de tudo que se lê corrido.
Aa 500 · ênfase Título, rótulo, botão. É o único peso de destaque — 600 e 700 não existem aqui.

A escala, no tamanho real

Cada linha abaixo está renderizada exatamente no tamanho, entrelinha e entreletras que documenta.

Painéis

display · 90pxentrelinha 0.89 · entreletras −0.03em · peso 500

Soluções sob medida

título grande · 60pxentrelinha 1 · entreletras −0.03em · peso 500

Corpo técnico de excelência

título · 28pxentrelinha 1.14 · entreletras −0.02em · peso 500

Cada projeto é dimensionado para a aplicação que vai servir.

subtítulo · 22pxentrelinha 1.18 · entreletras normal · peso 400

O painel é projetado por quem entende a norma e montado por quem já viu o que falha em operação. Este é o tamanho de leitura do sistema.

corpo · 16pxentrelinha 1.5 · entreletras normal · peso 400

Legenda de imagem, nota de rodapé e texto de apoio.

corpo pequeno · 14pxentrelinha 1.29 · peso 400

Engenharia elétrica de baixa tensão

micro-rótulo · 10–12pxcaixa alta · entreletras +0.1em · peso 500
  • Entreletras acompanha o tamanho: −0.03em de 28px para cima, normal no corpo, +0.1em só em caixa alta miúda.
  • A entrelinha fecha quando o tipo cresce: 0.89 no display, 1.5 no corpo.
  • Caixa alta só no micro-rótulo. Título em caixa alta não existe neste sistema.
  • Nada em px: a escala é declarada em rem, para respeitar quem aumenta a fonte do navegador.

Espaço e forma

Base de 4px. Raios largos e constantes. O ritmo vertical entre seções é deliberadamente amplo — é o que faz a página respirar como peça editorial.

Raio

Um cartão e um botão têm o mesmo raio, de propósito. Passe o mouse em cada peça.

28px Cartão, painel, botão, imagem contida. O raio do sistema.
18px Elemento aninhado dentro de um cartão. Nunca o mesmo raio da peça que o contém.
Pílula Etiqueta, tag, indicador de estado.
8px Campo de formulário. É o único canto curto do sistema, porque ali a borda é a afordância.

Espaço

4
8
12
16
24
40
64
80
120
  • Entre seções: 80 a 120px. É o intervalo que dá o ritmo editorial.
  • Dentro do cartão: 32 a 48px de respiro interno.
  • Entre elementos irmãos: 16 a 24px.
  • Medida da página: 1200px, centralizados. Texto corrido nunca ocupa essa largura inteira.

Componentes

São componentes reais, não imagens. Passe o mouse e navegue por teclado em cada um: o que você vê aqui é o que o site faz.

Botões

Ação · o único botão preenchido do sistema. Laranja com texto grafite.
Secundário · contorno de 1px, sem preenchimento. Não existe um segundo botão colorido.
Leia mais da nossa história Link · a linha embaixo é a afordância. Sem troca de cor, sem preenchimento.
Desabilitado · sem interação, sem foco.

Cartão e etiqueta

Painéis

Painéis elétricos de baixa tensão

Papel morno sobre branco, raio de 28px, sem borda e sem sombra. Ele se levanta da página por tom.

Serviços

Cartão sobre papel

Quando a banda de fundo já é papel, o cartão inverte e fica branco. A pilha nunca colapsa em dois tons iguais.

Raro

Ilha escura

O momento invertido do sistema. Usado com parcimônia: um por página, no máximo.

Campo e régua

Borda de 1px, canto de 8px, fundo branco. A borda é a afordância — o campo não precisa de mais nada.

Régua de 1px. O sistema marca limite de seção com linha, não só com espaço em branco.

  • Foco: anel sólido de 3px em grafite, com 2px de afastamento. Nunca laranja translúcido — não alcança os 3:1 exigidos.
  • Foco sobre escuro: o mesmo anel de 3px, em branco. Sobre foto ou ilha escura o grafite desaparece, e um anel invisível não é foco. Laranja continua fora: ele significa ação, não posição.
  • Botão sobre a banda laranja: ali o preenchido inverte para grafite. Não é um segundo botão colorido — é o mesmo botão, desenhado na única cor que sobrevive sobre laranja.
  • Contorno não é sombra: o botão secundário usa box-shadow: inset 0 0 0 1px como borda, sem desfoque. É um fio de 1px que não ocupa espaço de layout, não elevação.
  • Alvo de toque: mínimo de 24px, pelo critério 2.5.8 do WCAG 2.2.
  • Ícone é tipográfico: glifo da própria fonte, 16 a 24px, em grafite. Sem biblioteca de ícones ilustrados.

Movimento

Uma curva só, em todo o site: cubic-bezier(0.2, 0, 0, 1). Sai imediato e assenta devagar — a sensação de um mecanismo bem ajustado, que responde na hora mas não bate no fim do curso.

A curva, lado a lado

Rocktron
linear

Mesma distância, mesma duração. O de cima chega antes na maior parte do trajeto e desacelera no fim — por isso parece mais rápido, mesmo levando o mesmo tempo.

As quatro durações, para sentir

Cada exemplo abaixo roda exatamente na duração que documenta.

120ms Cor, borda e opacidade. Curto o bastante para parecer instantâneo, longo o bastante para não piscar. background-color 120ms
Cartão que responde
200ms Deslocamento e resposta ao ponteiro. O olho acompanha sem perder o objeto de vista. transform, background-color 200ms
Abrir camada

Menu, diálogo e qualquer coisa que cubra conteúdo. Mais lento de propósito: a pessoa precisa perceber de onde a camada veio.

320ms Entrada de camada: menu móvel, diálogo, painel lateral. grid-template-rows 320ms
Primeiro Segundo Terceiro
500ms Entrada de conteúdo ao rolar. Mais longa porque acontece uma vez só, longe do dedo de quem clicou. opacity, transform 500ms + 70ms por irmão
  • Anima-se apenas transform, opacity e cor. Nunca largura, altura ou posição de layout.
  • Movimento reduzido: com prefers-reduced-motion, tudo aparece de uma vez. Nada deixa de funcionar.
  • Sem carrossel automático, parallax ou rolagem suave forçada.
  • O movimento não carrega informação. Se ele não rodar, nada se perde.

Imagem

Fotografia é inserção editorial, não atmosfera. Ela entra para explicar alguma coisa — o produto, o processo, o contexto — e sai quando não tem o que explicar.

A varredura térmica, rodando

Mesma duração e mesma faixa do hero da home: 7,5s por travessia. A cor não é pintada sobre a superfície — ela clareia o que está embaixo, que é o que faz a leitura ser de calor e não de filtro.

Uma vez por site, só sobre fotografia de operação.

  • Contida no raio do sistema: 28px quando é peça de página, 18px quando está aninhada num cartão.
  • Sobre branco ou papel. Nunca sobre a banda laranja.
  • Sem laranja na imagem. A cor é reservada à interface: se aparecer numa foto, deixa de significar ação.
  • Uma exceção, com nome e limite: a varredura térmica. No hero da home uma faixa laranja percorre a foto de cima a baixo, imitando a passagem de uma câmera termográfica — que é serviço que a Rocktron presta. Ela usa mix-blend-mode: screen, ou seja, clareia o que está embaixo em vez de pintar por cima. Vale uma vez por site, só sobre fotografia de operação, e nunca sobre um produto que precise ser lido em cor real.
  • Sem foto de banco de imagens e sem composição sobreposta. Se a foto não for da Rocktron, ela não entra.
  • Texto alternativo escrito depois de olhar a imagem, descrevendo o que está lá — não repetindo a legenda.

Voz

A Rocktron fala como engenheiro que já viu o painel falhar em campo: direto, específico e sem adjetivo de folheto.

Assim
  • “O painel é projetado por quem entende a norma e montado por quem já viu o que falha em operação.”
  • “Traga o escopo. A gente responde com o que é tecnicamente adequado.”
  • “Duas unidades, com funções distintas na cadeia.”
Assim não
  • “Soluções inovadoras e disruptivas para o seu negócio!”
  • “Somos os melhores do mercado em qualidade e excelência.”
  • “Clique aqui e revolucione sua instalação elétrica agora mesmo!!!”
  • Número em vez de adjetivo. “Mais de 30 anos de experiência” diz mais que “vasta experiência”.
  • Uma exclamação por página, no máximo. Normalmente zero.
  • Não invente dado. Se não está confirmado com o cliente, não vai para a página.

Faz e não faz

O resumo operacional. Em caso de dúvida, é esta lista que decide.

Faz

  • Usar o laranja como única cor de botão preenchido.
  • Raio de 28px em todo cartão e botão primário; pílula em etiqueta e tag.
  • Peso 500 em título, rótulo e botão; 400 em texto e apoio.
  • Entreletras de −0.03em em qualquer texto de 28px para cima.
  • Montar a profundidade como branco → papel → laranja → ilha escura.
  • Caixa alta com +0.1em só em micro-rótulo de 10 a 12px.
  • Deixar o grafite #20242a carregar todo o texto.
  • Manter 80 a 120px entre seções.

Não faz

  • Sombra em cartão. O sistema separa por tom, não por elevação.
  • Preto puro #000 em texto. O grafite é mais morno e mais nosso.
  • Um segundo acento na interface — azul, vermelho ou qualquer outro. O laranja é a única voz cromática de componente. O azul da assinatura fica no logotipo e em lugar nenhum além dele.
  • Misturar raios dentro do mesmo tipo de componente.
  • Texto branco sobre laranja: 2,76:1, reprova.
  • Botão laranja espremido. A cor é alta; ela precisa de respiro.
  • Peso 600 ou 700. O sistema vive em 400 e 500.
  • Gradiente. O laranja já é saturado; gradiente só embarra.