helpDJhelpDJ Guia de marca
Identidade · Design System

Guia de marca
helpDJ

Logo, cores, fontes, componentes e regras de uso, num lugar só. Consulte, copie os códigos e baixe os arquivos.

01 · A ideia

Painel de equipamento

A helpDJ aluga equipamento de DJ em Belém, Ananindeua, Marituba e Benevides: o cliente reserva pelo celular, assina o contrato digital e paga o sinal de 50% no Pix. A promessa cabe em uma linha: "Seu som. Sem comprar nada."

A identidade é um painel de equipamento pro-áudio: fundo grafite quase preto, serigrafia em maiúsculas estreitas, LEDs azuis e um botão laranja que sempre significa "faça isto agora". Tudo na marca parece peça de equipamento: disco, mostrador, equalizador, colchetes de HUD.

Princípios

  1. Painel antes de decoração. Cada elemento tem função de equipamento: rótulo, mostrador, LED, botão. Nada de ornamento solto.
  2. Um laranja por tela. O laranja (cue-fill) é a ação principal e só aparece uma vez como botão. O azul (brand) é a marca e a informação.
  3. Escuro por padrão, papel quando imprime. Telas, posts e vídeo usam o tema escuro. Contratos, cartas, cartões e e-mails usam o tema claro (paper).
  4. Direto e verificável. Preço, sinal, saldo e prazo aparecem com número. Nada de "o melhor do mercado".
  5. Legível sempre. Texto passa de 4,5:1, bordas de controle de 3:1, estado nunca só por cor.
03 · Cor

Cores

Toque numa cor para copiar o código. O tema do botão no topo troca os valores mostrados.

Superfícies

Fundos, painéis e linhas.

Texto

Tinta principal, secundária e de serigrafia.

Azul (a marca)

Informação, link, LED aceso; botão azul usa brand-press.

Laranja (a ação)

Uma ação por tela: o botão principal.

Estados

Sempre junto com palavra ou ícone.

Mostrador e papel

Mostrador LCD e o papel dos impressos.

Estrutura

A paleta tem três famílias: superfícies (void, panel, panel-2, panel-3, rule), texto (ink, ink-dim, ink-faint) e marca (brand azul, cue laranja), mais os estados (signal, warn, danger) e o papel (paper, paper-ink, paper-rule). Há dois temas: escuro (padrão) e claro (papel). No tema claro, brand e cue escurecem (#1F63D6 e #A8400C) e os estados trocam para tons escuros que passam de 4,5:1 no papel.

Quando usar cada cor

Cor Uso Nunca
void Fundo da página, post e vídeo Texto
panel, panel-2 Cartões, campos, painéis Fundo da página inteira
brand Link, ícone, LED aceso, logotipo, números de destaque Preenchimento com texto branco (use brand-press)
brand-press Botão azul, faixas azuis com texto branco Texto sobre fundo escuro
cue-fill Botão principal, rótulo do disco, marca do prato Texto branco por cima
cue Texto e traço laranja de ação Fundo de botão
signal, warn, danger Estado, junto com palavra ou ícone Decoração

Contraste verificado (WCAG 2)

Par Razão Resultado
ink em void 17,8:1 Passa AAA
ink-dim em void / panel / panel-3 5,9 / 5,6 / 4,6:1 Passa AA
ink-faint em void / panel / panel-2 5,4 / 5,0 / 4,6:1 Passa AA; não usar em panel-3 (4,2:1)
brand em void / panel 5,3 / 4,9:1 Passa AA; não usar em panel-3 (4,1:1)
cue em void / panel 6,9 / 6,5:1 Passa AA
on-brand (branco) em brand-press 5,5:1 Passa AA
cue-ink em cue-fill 6,8:1 Passa AA
lcd-ink em lcd 6,4:1 Passa AA
signal, warn, danger em void 11,3 / 11,9 / 6,3:1 Passam AA
Tema claro: ink em paper 16,8:1 Passa AAA
ink-dim, ink-faint em paper 6,6 / 5,0:1 Passam AA
brand, cue em paper 5,1 / 5,7:1 Passam AA
signal, warn, danger em paper 4,6 / 5,4 / 5,4:1 Passam AA

Pares que não passam e ficam proibidos: branco sobre brand (#2E7FFF), 3,8:1; branco sobre cue-fill, 2,8:1; ink-faint antigo (#5C5C66) sobre void, 3,0:1; brand e cue sobre paper sem escurecer (3,4:1 e 2,6:1); rule como borda de campo (1,4:1).

Refinamentos feitos nesta versão

ink-faint subiu de #5C5C66 para #84848F; brand-press (#1F63D6) nasceu para texto branco sobre azul; cue-fill separou o laranja de preenchimento do laranja de texto; o void foi unificado em #0A0A0C; focus virou token (3:1 ou mais em todo fundo); lcd e lcd-ink entraram para o mostrador.

Estados e daltonismo

Verde e vermelho dos estados têm luminosidade parecida (1,8:1 entre signal e danger no escuro). Por isso todo estado leva palavra e ponto de LED: "Pago", "Aguardando Pix", "Recusado". Azul e laranja (Evento e Diária) diferem em matiz e em palavra.

Foco

Anel de 3px sólido em focus, deslocado 2px, em todo elemento interativo.

04 · Texto

Tipografia

Quatro famílias livres (SIL OFL 1.1). Os exemplos abaixo usam as fontes de verdade.

Display (Anton, sempre em MAIÚSCULAS)

display-xl76px · entrelinha 0.96 · peso 400 · tracking 0.005em
SEU SOM. SEM COMPRAR NADA.

Título de abertura de página, capa de peça e primeira linha de vídeo. Máximo 3 linhas, text-transform: uppercase. No site cai para 38px em telas pequenas.

display-lg52px · entrelinha 0.96 · peso 400 · tracking 0.005em
RESERVE PELO CELULAR

Título de seção e título de post. Uma ou duas linhas.

display-md33px · entrelinha 0.96 · peso 400 · tracking 0.005em
ESCOLHA A DATA

Título de cartão, passo de carrossel e número de preço pequeno.

display-sm24px · entrelinha 1 · peso 400 · tracking 0.01em
RESERVAR AGORA

Texto de botão e do logotipo em tamanhos pequenos. Tracking maior (0,01em) para não fechar.

Corpo (Archivo)

title19px · entrelinha 1.3 · peso 700
Evento com técnico no local

Subtítulo e título de item em lista.

body16px · entrelinha 1.55 · peso 400
O técnico entrega, monta e recolhe. O saldo é pago na entrega.

Texto corrido. Linhas de até 65 caracteres. Cor ink; descrições em ink-dim.

body-strong16px · entrelinha 1.55 · peso 600
Sinal de 50% no Pix

Destaque dentro do texto corrido (valores, prazos).

small14px · entrelinha 1.5 · peso 400
Datas ocupadas aparecem riscadas.

Legendas, textos de ajuda e rodapés. Nunca abaixo de 14px em tela.

Serigrafia e dados (JetBrains Mono)

silk10.5px · entrelinha 1 · peso 500 · tracking 0.18em
EVENTO · DIÁRIA · PIX

Rótulos de painel em MAIÚSCULAS com tracking aberto, como a serigrafia de um equipamento. Cor ink-faint, ou brand/cue quando acesos. Mínimo 10,5px em tela.

readout24px · entrelinha 1 · peso 700 · tracking 0.06em
R$ 200

Números do mostrador LCD, contagens e códigos de reserva.

Documento (Source Serif 4)

doc-title20px · entrelinha 1.3 · peso 600
Contrato de locação de equipamento

Título de contrato, carta e termos, sobre paper.

doc-body15px · entrelinha 1.7 · peso 400
As partes firmam o presente instrumento de locação.

Corpo de contratos, cartas e papel timbrado (11pt no impresso), cor paper-ink sobre paper.

Famílias

Anton (display) é condensada e pesada, como a serigrafia de um equipamento. Use sempre em MAIÚSCULAS, peso único (400), entrelinha 0,96 e tracking 0,005em (0,01em em tamanhos pequenos, como botões e logotipo). Nunca simule negrito ou itálico.

Archivo (400 a 800) é a fonte do texto: neutra, legível em tela pequena. Corpo 16px, entrelinha 1,55, linhas de até 65 caracteres.

JetBrains Mono (400, 500, 700) é para serigrafia, números e códigos. Rótulos em MAIÚSCULAS com tracking 0,18em, mínimo de 10,5px em tela. Números de preço, sinal e códigos de reserva em readout.

Source Serif 4 (400, 600) só em documentos: contratos, cartas e termos, sempre sobre paper, corpo de 11pt no impresso com entrelinha 1,7.

Escala

Estilo Tamanho Uso
display-xl 76px (38px no celular) Abertura de página e de peça
display-lg 52px Título de seção, de post
display-md 33px Título de cartão, de passo
display-sm 24px Botão, logotipo pequeno
title 19px, peso 700 Subtítulo, item de lista
body 16px Texto corrido
small 14px Legenda, ajuda, rodapé
silk 10,5px Rótulo de painel
readout 24px Mostrador e códigos

Regras

  1. Títulos em no máximo 3 linhas; quebre em ideias ("SEU SOM. / SEM COMPRAR / NADA.").
  2. Destaque dentro de um título com cor: brand para a informação, cue para a ação. Uma cor de destaque por título.
  3. Não centralize parágrafos; alinhe à esquerda. Títulos de capa e CTA podem ser centralizados.
  4. Números em Anton nos preços ("R$ 200"), em mono nos códigos.
  5. Mínimos em tela: 14px para texto, 10,5px para serigrafia.
  6. Fallback: Haettenschweiler, Arial Narrow Bold, Impact para Anton; system-ui para Archivo; ui-monospace para mono; Georgia para a serifada.

Licença

Anton, Archivo, JetBrains Mono e Source Serif 4 são livres (SIL Open Font License 1.1) e podem ser usadas em qualquer peça, inclusive comercial. Os arquivos WOFF2 estão na pasta de tipografia do pacote.

05 · Superfície

Espaço e forma

Cartões e painéis usam panel-2 para panel, borda rule, radius-lg e shadow-panel. Campos e botões usam radius-sm e radius-md. Chips de estado usam radius-pill. Espaçamento em múltiplos de 4px (space-1 a space-10). Brilho de LED (glow-brand, glow-cue) só no tema escuro.

Espaçamento

Base de 4px. Margens de peças impressas usam space-9 ou 10mm/20mm.

space-14pxRespiro mínimo: ícone e rótulo, entre LED e texto.
space-28pxEspaço entre elementos de um mesmo grupo (chips, botões lado a lado).
space-312pxPadding vertical de campos e botões compactos.
space-416pxPadding padrão de campos e botões; espaço entre linhas de formulário.
space-524pxPadding de cartões e painéis.
space-632pxEspaço entre blocos dentro de uma seção.
space-748pxEspaço entre seções em telas pequenas.
space-864pxEspaço entre seções em telas médias.
space-996pxEspaço entre seções em telas grandes e margens de peças impressas.
space-10128pxRespiro de abertura (hero) e margens de capa.

Raio

  • radius-xs4pxMarcas de LED, barras do equalizador e tags minúsculas.
  • radius-sm7pxCampos, chips retangulares, botões pequenos.
  • radius-md11pxBotões e controles padrão.
  • radius-lg16pxCartões e painéis.
  • radius-xl24pxModais, mockups de celular e blocos grandes de peças.
  • radius-pill100pxChips de estado e avatares redondos.

Sombra e brilho

Brilhos de LED só no tema escuro; no claro use apenas shadow-panel e shadow-pop.

  • shadow-panelCartão e painel: realce de 1px no topo mais sombra longa.
  • shadow-popMenus, modais e elementos flutuantes.
  • glow-brandBrilho de LED azul: botão azul, chip de marca, foco de seleção. Só no tema escuro.
  • glow-cueBrilho do botão laranja (a ação principal da tela). Só no tema escuro.
06 · Gráficos

Elementos e ícones

Elementos

Elemento O que é Onde usar
Sulcos Círculos concêntricos de vinil com a marca laranja do prato Fundo de capa, cartaz, cartão
Colchetes HUD Quatro cantos de 2px em ink-dim Enquadrar post, story e vídeo
Equalizador Barras alternando azul e laranja, topo claro Base de capa, rodapé, abertura de vídeo
Grade em perspectiva Chão de palco azul em fuga Vídeo, capa, fundo de seção
Feixes de luz Dois a quatro feixes azuis e laranja, borrados Cantos, atrás do equipamento
Linha-LED Traço de 2px antes de um rótulo de serigrafia Rótulos de painel

Regras: no máximo dois elementos por peça, sempre atrás do conteúdo, em baixa opacidade (30% a 70%), nas cores de azul, laranja e neutros. Nunca sobre texto.

Imagem

Render 3D da XDJ-R1 em fundo escuro, com luz azul de um lado e laranja do outro; recorte em foco no jog, no mixer ou nos pads. Os renders do pacote servem de base para posts, capas e cartazes.

Mockup de celular com a tela real do site, levemente inclinado (3° a 5°), sombra longa e brilho azul; chips de LED flutuando ao lado ("Pix 50% de sinal", "Contrato digital", "Identidade verificada").

Foto real de evento (quando houver): escureça com véu de void, saturação baixa, sem filtro colorido, enquadramento no equipamento e nas mãos, não em rostos reconhecíveis sem autorização.

Não faça: foto de banco de imagem genérica, emoji, clipart de nota musical, degradê roxo, ilustração de DJ de desenho animado.

Cartão de interface

Quando mostrar o produto, use o cartão do site (panel-2 para panel, radius-lg, shadow-panel): Evento R$ 200 e Diária R$ 250, com a legenda em ink-dim.

Elementos gráficos

Abrir sozinho ↗

Sulcos, grade, feixes, colchetes e equalizador

Cinco elementos tiram a cara de "painel de equipamento" da marca. Use no máximo dois por peça, sempre atrás do conteúdo e em baixa opacidade.

Sulcos: círculos concêntricos de vinil, no fundo de capas e cartazes; a marca do prato (ponto laranja) fica fora do texto. Grade em perspectiva: chão de palco, em vídeo e capas. Feixes de luz: azul e laranja, nos cantos. Colchetes HUD: quatro cantos de 2px em ink-dim que enquadram a peça. Equalizador: base de capas e rodapés.

Não faça: misturar mais de dois elementos; passar elemento por cima de texto; recolorir fora de azul, laranja e neutros.

Ícones

Abrir sozinho ↗

Traço 1,75 · grade 24 · pontas e juntas redondas

Conjunto próprio de 18 ícones de linha: grade de 24 px, traço de 1,75, pontas e juntas redondas, sem preenchimento. Usam currentColor: pinte com brand (padrão), ink-dim (neutro) ou cue (ação).

Faça: ícone sempre acompanhado de texto quando carrega significado; tamanhos de 20, 24 ou 32 px. Não faça: misturar com outro conjunto; emoji; preencher o ícone; usar o logo do Pix (o ícone qr-pix é genérico de propósito).

Baixar ícones e fundos em SVG (24 arquivos)
07 · Ritmo

Movimento e áudio

Tudo no compasso de 128 BPM.

Ritmo

Tudo se move no compasso de 128 BPM: uma batida = 0,46875 s (--beat). Cortes, entradas de texto e pulsos caem na batida; em vídeo, a cada 4 batidas (1,875 s) entra uma ideia nova.

Entradas e easing

Movimento Curva Duração
Interface (hover, abrir) --ease-out cubic-bezier(.22,1,.36,1) 0,12 a 0,3 s
Texto em vídeo (slam) --ease-slam cubic-bezier(.34,1.56,.64,1), com leve passada 1 a 3 quadros de impacto
Transição entre cenas Corte seco na batida, com flash de 2 quadros 0

Slam: o título entra grande, passa um pouco do tamanho final e assenta (a curva tem leve estouro), com divisão de canais RGB por 2 a 3 quadros. Sucesso (pagamento, reserva confirmada): onda de anéis verde e azul e confete em azul, laranja e branco.

Vídeo

Formato vertical 1080×1920, 30 fps, até 60 segundos (o comercial atual tem 52 s). Os primeiros 12 segundos precisam prender: o gancho "Seu evento. Seu som. Sem comprar nada." entra de cara, com cortes curtos de 1 a 2 batidas e o disco em primeiro plano; depois entra uma ideia nova a cada 4 batidas. Texto na tela sempre presente (muita gente assiste sem som). Fecha com "Reservar agora" e helpdj.tech.

Áudio

Base em 128 BPM com bumbo marcado e baixo curto. Scratch quente: timbre de vogal ("ahh"), filtrado em 2,4 kHz para não ter brilho estridente e com volume abaixo da música, para nunca machucar o ouvido. Impacto (slam) com queda grave, não com ruído branco agudo. Volume final em cerca de −14 LUFS integrados, com pico verdadeiro abaixo de −1 dBTP.

Acessibilidade

Respeite prefers-reduced-motion: sem animação contínua, só trocas de estado. Nada pisca mais de 3 vezes por segundo.

Equalizador

Abrir sozinho ↗

Barras alternadas azul e laranja, no compasso de 128 BPM

Barras de equalizador: alternam azul (brand) e laranja (cue-fill), com topo claro (ink), cantos radius-xs no topo. Animação, quando existe, pulsa no compasso: --beat = 0,46875s (128 BPM) e some com prefers-reduced-motion.

Faça: use como base de capas e rodapés de vídeo; 24 a 52 barras; alturas irregulares (nunca em degrau). Não faça: barras sobre texto; mais de duas cores; usar como gráfico de dados (é ornamento).

08 · Palavra

Tom de voz

Como a helpDJ fala

Direta, técnica e confiável. Fala "você", em português do Brasil, com frases curtas e números concretos. Soa como alguém que entende de equipamento e respeita o tempo de quem vai tocar.

Faça Evite
"Alugue pelo celular." "Realize a locação através da nossa plataforma."
"Sinal de 50% no Pix. O saldo é na entrega." "Pague metade para garantir." (vago)
"Técnico entrega, monta e recolhe." "Serviço completo e premium."
"Datas ocupadas aparecem riscadas." "Verifique a disponibilidade."
"Reservar agora" "Clique aqui"

Vocabulário fixo

Evento: o técnico entrega, monta e recolhe; o saldo é pago na entrega. Diária: 24 horas por sua conta, sem técnico. Sinal de 50%: pago no Pix para confirmar a data. Saldo na entrega: os outros 50%. Contrato digital: assinado pelo celular. Identidade verificada: CPF, e-mail e documento com prova de vida. Equipamento: XDJ-R1, testado e higienizado.

Valores vigentes nas peças: Evento R$ 200 e Diária R$ 250. Confirme no site antes de publicar qualquer peça com preço.

Frases-âncora

  • Promessa: Seu som. Sem comprar nada.
  • Gancho de vídeo: Seu evento. Seu som. Sem comprar nada.
  • Descritor: Locação de equipamento de DJ
  • Ação: Reservar agora, Pagar sinal, Ver datas
  • Endereço: helpdj.tech
  • Cidades: Belém · Ananindeua · Marituba · Benevides

Regras

  1. Frase curta primeiro, detalhe depois. Título de até 6 palavras.
  2. Todo preço vem com o que inclui ("Evento R$ 200: técnico entrega, monta e recolhe").
  3. Botão = verbo no infinitivo, até 3 palavras.
  4. Sem superlativos sem prova ("o melhor", "número 1") e sem garantia que não está no contrato.
  5. Sem gíria forçada e sem inglês decorativo; termos técnicos (jog, mixer, XDJ-R1) só quando o público conhece.
  6. Pix com P maiúsculo; R$ com espaço ("R$ 200"); horas como "24 h".
  7. Avise o que acontece depois ("Você recebe o contrato por e-mail e assina pelo celular").
09 · Peças

Aplicações e modelos

Os modelos estão no pacote em HTML editável (texto direto no arquivo), com PNG e PDF já exportados nos tamanhos finais. Abra o HTML no navegador, troque o texto, exporte. Dados de contato dos modelos são placeholders e precisam ser trocados antes de usar.

Modelo Tamanho Observações
Post preço 1080×1350 (4:5) Evento R$ 200 e Diária R$ 250, com botão laranja
Post manifesto 1080×1080 Frase de promessa sobre o disco
Post como funciona 1080×1350 Quatro passos com ícones e celular
Post produto 1080×1080 XDJ-R1, "a partir de R$ 200"
Post comunicado 1080×1080 Texto livre: datas abertas, avisos
Story 1080×1920 Zona segura: 250 px no topo, 340 px embaixo
Carrossel (5 lâminas) 1080×1350 Capa, passos 01 a 07, chamada final
Capa de perfil 1640×624 Canto esquerdo livre para o avatar
Imagem de link (OG) 1200×630 Pré-visualização de link no WhatsApp e redes
Cartaz A4 216×303 mm Sangria de 3 mm; QR para helpdj.tech
Cartão de visita 96×56 mm com sangria Frente escura, verso em papel com QR
Papel timbrado A4 210×297 mm Corpo em Source Serif 4
Assinatura de e-mail HTML Imagem do logo precisa estar hospedada

Antes de publicar

  1. O logo é o arquivo oficial, na versão certa para o fundo.
  2. Há um botão laranja e no máximo dois elementos gráficos.
  3. Texto passa nos contrastes da seção de cores.
  4. Preço, sinal e cidades conferem com o site.
  5. Telefone, e-mail e nome dos placeholders foram trocados.
  6. Em story: nada nas zonas de 250 px (topo) e 340 px (base).
  7. Em impressão: PDF com sangria de 3 mm e texto a 9 mm da borda; cores em RGB convertidas pela gráfica (azul e laranja saturados podem escurecer em CMYK).

Redes e plataformas

Avatar: símbolo redondo. Capa: modelo 1640×624. Favicon: símbolo simples 16, 32 e 180 px. Imagem de compartilhamento: modelo OG. Descrição curta: "Locação de equipamento de DJ em Belém e região. Reserve pelo celular."

Modelos prontos

Abrir sozinho ↗

17 modelos prontos em HTML, PNG e PDF

Modelos prontos para editar: abra o HTML no navegador, troque os textos e exporte (posts e capas em PNG nos tamanhos exatos; cartaz, cartão e papel timbrado em PDF com sangria de 3 mm). Os nomes, telefones e e-mails dos modelos são placeholders a substituir.

Zonas seguras do story: 250 px livres no topo e 340 px embaixo. Impressos: sangria de 3 mm e margem de segurança de 9 mm. Não faça: mudar fonte, cor ou posição do logo; empilhar mais de um botão laranja; texto sobre a foto sem escurecer.

Os modelos editáveis (HTML), PNG e PDF estão na Central de downloads e em Arquivos da identidade.

10 · Interface

Componentes

Peças de interface prontas, feitas só com os tokens. Cada pré-visualização acompanha o tema do botão no topo.

Botão

Abrir sozinho ↗

Laranja = a ação da tela; azul = ação de apoio

O botão é Anton em MAIÚSCULAS, como a serigrafia de um equipamento. Cada tela tem um único botão laranja (cue-fill), o que leva à reserva ou ao Pix. Ações de apoio usam o azul (brand-press, texto on-brand) ou o fantasma (borda ink-faint, texto ink).

Quem usa fornece: o texto do botão (verbo no infinitivo, até 3 palavras: "Reservar agora", "Pagar sinal", "Ver datas") e o destino.

Faça: texto cue-ink sobre cue-fill (6,8:1); anel de foco focus de 3px; brilho glow-cue só no tema escuro; estado pressionado desce 1px. Não faça: texto branco sobre laranja (2,8:1); dois botões laranja na mesma tela; botão azul brand (#2E7FFF) com texto branco, pois dá 3,8:1: use brand-press; rótulo vago ("Clique aqui", "Enviar").

Cartão

Abrir sozinho ↗

Painel de equipamento: realce no topo + sombra longa

Cartão = o painel do equipamento: degradê de panel-2 para panel, borda rule, radius-lg, shadow-panel e padding space-5. Título em display-md, descrição em ink-dim.

Quem usa fornece: rótulo (SilkLabel), título curto e uma frase de apoio. Faça: um cartão por ideia (Evento, Diária); no tema claro vira papel branco com sombra suave. Não faça: cartão dentro de cartão; faixa colorida na lateral; mais de 3 linhas de texto corrido.

Campo

Abrir sozinho ↗

Rótulo em serigrafia; erro com ícone e texto

Campo de formulário: rótulo em serigrafia (silk) acima, caixa panel com borda de 1,5px em ink-faint (3:1 ou mais em todos os fundos), texto body em ink, foco com anel focus e borda brand. Erro: borda danger mais mensagem com ícone "!" e texto; nunca só a cor.

Quem usa fornece: rótulo, valor, máscara/validação e a mensagem de erro (diga o que falta, não só "inválido"). Não faça: placeholder no lugar do rótulo; rótulo dentro da caixa; borda rule em controle (1,4:1).

Rótulo de serigrafia

Abrir sozinho ↗

Serigrafia: mono, MAIÚSCULAS, tracking .18em

Rótulo de painel, igual à serigrafia impressa num equipamento: JetBrains Mono 500, 10,5px, MAIÚSCULAS, tracking .18em, com uma linha-LED de 22px antes. Apagado (ink-faint) por padrão; aceso em azul (brand) para o passo atual ou em laranja (cue) para o que pede ação.

Quem usa fornece: texto curto, até 4 palavras (a variante plain aceita listas, como as cidades atendidas). Faça: use acima de títulos e campos; mantenha 10,5px ou mais. Não faça: parágrafos em serigrafia; ink-faint sobre panel-3 (4,2:1); itálico ou negrito.

Passos da reserva

Abrir sozinho ↗

Passos da reserva: concluído, atual, próximo

Indicador de etapas da reserva: disco numerado, linha rule entre eles. Concluído = signal com check; atual = brand-press com glow-brand; próximo = contorno ink-faint. O rótulo é mono 10,5px em MAIÚSCULAS; só o atual usa ink.

Quem usa fornece: lista de etapas (3 a 6) e o índice atual. Em telas estreitas, mostre só o número e o rótulo da etapa atual. Não faça: pular etapas visualmente; usar laranja (laranja é a ação do botão, não o progresso).

Chip de estado

Abrir sozinho ↗

Estado = ponto de LED + palavra; nunca só a cor

O chip é uma etiqueta de estado ou de categoria: ponto de LED colorido, borda da mesma cor e palavra sempre presente em ink. Verde e vermelho têm luminosidade parecida, então a cor sozinha nunca basta.

Mapa de uso: signal = pago, confirmado, livre; warn = aguardando Pix, prazo perto; danger = recusado, vencido; brand = Evento; cue = Diária; neutro = rascunho ou sem estado.

Quem usa fornece: a palavra (1 a 3 palavras, sem ponto final). Não faça: chip só com cor; texto colorido dentro do chip; mais de um chip de estado por item.

Mostrador (LCD)

Abrir sozinho ↗

Mostrador: dígitos azuis em fundo preto, nos dois temas

Mostrador de dados, como o display de um CDJ: fundo lcd (sempre escuro), dígitos lcd-ink em JetBrains Mono 700 (readout), rótulo em mono 10px. Serve para valores, códigos de reserva e contagens.

Quem usa fornece: rótulo curto e valor já formatado (R$ com vírgula, código completo). Não faça: texto corrido no LCD; trocar a cor dos dígitos; usar em fundo claro sem a moldura escura (ele já traz o fundo).

11 · Código

Tokens e código

Os mesmos valores deste guia, em arquivos para usar no site e no app.

Como usar

<link rel="stylesheet" href="fontes.css">
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="componentes.css">

<html lang="pt-BR" data-theme="escuro">   <!-- ou "claro" -->
<button class="dj-btn cue">Reservar agora</button>
<span class="dj-silk lit">Pix 50% de sinal</span>

As fontes Anton, Archivo, JetBrains Mono e Source Serif 4 são livres para uso comercial (SIL Open Font License 1.1).

helpDJ · Seu som. Sem comprar nada. · Locação de equipamento de DJ em Belém, Ananindeua, Marituba e Benevides