Pular para o conteúdo

Tipografia

Uma família, a Hanken Grotesk, de 100 a 900. Contraste por tamanho, não por peso: display em 500, corpo em 400. No lugar de etiquetas em caixa alta, a própria escala organiza a página.

Escala

Fluida entre 375 e 1600 px de tela, sem saltos por ponto de quebra. Display com tracking negativo; corpo sem tracking, com entrelinha 1,6. Os números da Hanken já têm largura igual, então colunas de valores alinham sem ajuste.

Ênfase e linhas

Num título, <em> não vira itálico: é a mesma letra no tom suave. Uma frase por linha no desktop com .rq-linhas e <span>, nunca <br> escondido. .rq-junto impede a quebra em "e-commerce".

Título com ênfase e sobretítulo

.rq-d2 em · .rq-linhas · .rq-sobretitulo · .rq-junto
Aceleração

Tráfego sem método vira custo.

Na aceleração, cada marca tem um squad dedicado: head de marketing, gestor de tráfego e time criativo, com editores de vídeo e de imagem próprios.

Quando usar
O sobretítulo é opcional: só quando situar ajuda. Nada de numeração ou caixa alta.
Leitores de tela
Os <span> de linha não interrompem a leitura do título.

Mono para dados técnicos

JetBrains Mono (OFL) entra só onde o número precisa ficar parado e exato: latência, tokens, custo, status, horário, versão, identificador. Algarismos tabulares e zero cortado. Frase, título e botão continuam em Hanken Grotesk.

Valor e rótulo técnico

.rq-mono · .rq-rotulo-mono · --rq-fonte-mono · --rq-t-mono

Latência p95 · 7 dias

2.140 ms

A execução terminou às 09:12:19, com 13.030 tokens e 6 chamadas de ferramenta. Simulação.

Quando usar
Painel, telemetria, tabela de dados e código. Em página de venda, número grande pode ficar em Hanken; o rótulo mono não substitui título.
Tamanho
.rq-mono herda o tamanho (0,92 em, porque a mono parece maior). .rq-rotulo-mono usa --rq-t-mono, 12 px, caixa alta.

Lista com filete

O lugar dos cartões com contorno. O filete só entre as linhas; título e texto em duas colunas quando o próprio bloco tem 34rem ou mais (container query). Mude a largura na barra para ver.

Padrão

.rq-lista-filete · __titulo · __texto

  • Metas todos os dias

    Numa planilha de acompanhamento diário das metas.

  • Decisões pelo lucro

    O custo de aquisição é acompanhado de perto, não só o faturamento.

  • Rotina de alinhamento

    Feedbacks e reuniões semanais e quinzenais.

  • Tudo medido

    O que entregamos é medido num sistema próprio.

Com links

.rq-lista-filete--links

A linha inteira é o link; a seta anda no hover. Serve de navegação entre serviços sem cartão.

Numerada

.rq-lista-filete--numerada

  1. Descobrimos

    Conversa, briefing e coleta de referências.

  2. Desenhamos

    Layout exclusivo no Figma. Sem tema genérico.

  3. Codamos

    Tudo na Shopify com performance e responsividade.

Frase-seletor

A escolha vira parte da frase, ideia levantada na revisão da homepage para o modal de escolha de serviço. Cada escolha é um <select> nativo: teclado, leitor de tela e celular funcionam sem JS.

Frase com duas escolhas

.rq-frase-seletor · __campo

Quero com .

Quando usar
Abertura de funil e de modal de escolha, com duas ou três escolhas curtas.
Acessibilidade
Cada select tem um rótulo próprio, visível só para leitores de tela.

Citação e prosa

Citação grande

.rq-citacao

As aspas fazem parte do texto e ficam penduradas na margem. Sem aspas decorativas soltas nem filete lateral.

“Não criamos lojas. Criamos presença digital de verdade.”

ChesslabManifesto da landing Shopify

Prosa

.rq-prosa

Texto longo (vagas, termos, artigos) com ritmo vertical próprio e medida de leitura de 66 caracteres.

Como a aceleração é acompanhada

Na aceleração, cada marca tem um squad dedicado: head de marketing, gestor de tráfego e time criativo, com editores de vídeo e de imagem próprios. Ele planeja, produz e otimiza as campanhas.

  • Metas todos os dias, numa planilha de acompanhamento diário.
  • Decisões pelo lucro: o custo de aquisição é acompanhado de perto.
  • Feedbacks e reuniões semanais e quinzenais.

Veja a página da aceleração para o método completo.

Destaques

Vieram da home v5. Um destaque por título, no máximo um por tela.

Barra

.rq-barra · data-revelar="barra"

Uma faixa atrás da parte de baixo da palavra, que se desenha ao entrar. Pistache no claro, Trama no escuro, Neve no pistache.

Feito para vender.

Onda

.rq-onda · data-revelar="onda"

Uma faixa Laranja passa uma vez pela expressão e termina na cor do texto. Sem Pistache no degradê: laranja não cola em verde.

Três frentes, um objetivo: vender mais.

Virada

.rq-virada__linha · data-revelar="virada"

Frase grande em linhas que sobem por trás de uma máscara, em sequência (aceleração). Cada linha é marcada à mão.

Tráfego sem método vira custo.