ADN Racing

Design system

A identidade da equipe, tirada do folder ADN Racing Experience. Toda peça nova (site, redes sociais, folder, adesivo de carro) parte daqui. O código do site lê tudo de um único arquivo: /css/tokens.css.

Logo

Versão principal: branca sobre preto ou grafite.
Sobre fundo claro, use a versão preta. Sobre o laranja, só a branca.
Deixe em volta da logo um espaço livre igual à altura do "A".
Não distorça, não gire, não aplique sombra nem contorno, e nunca use a logo em laranja sobre preto (o laranja é dos detalhes).
Tamanho mínimo: 70 px de largura na tela, 20 mm no impresso.

Cores

O preto domina; o laranja ADN marca o que importa (títulos em caixa, números, botões, quadriculado). Use o laranja em no máximo um quinto da peça.

Laranja ADN#F76201 · --adn-laranja

Laranja claro#FF8A3D · --adn-laranja-claro

Laranja escuro#C94F00 · --adn-laranja-escuro

Preto#0B0B0C · --adn-preto

Grafite#1C1C1F · --adn-grafite

Grafite 2#2A2A2E · --adn-grafite-2

Cinza#9A9AA1 · --adn-cinza

Branco#FFFFFF · --adn-branco

Gelo#E9E9EC · --adn-gelo

Tipografia

Três famílias livres (licença SIL Open Font), servidas pelo próprio site. Michroma, larga e técnica como a do folder, só para títulos em caixa alta. Barlow Condensed para números, preços e rótulos. Barlow para textos corridos.

Display · MichromaPure Racing

Título 1 · MichromaSobre nós

Título 2 · MichromaCalendário 2027

Título 3 · MichromaVelopark

Número · Barlow Condensed5.0

Rótulo · Barlow CondensedTrack & racing plans

Texto · BarlowA ADN Racing nasceu da paixão pela velocidade e da busca constante por performance.

Pequeno · BarlowDatas sugeridas. A equipe confirma todas as datas em janeiro.

Componentes

Faixa quadriculada

A bandeira de chegada da marca. Laranja sobre preto na abertura das peças; branca e fina como divisória ao lado dos títulos.

<div class="quadriculado"></div> · variações: quadriculado--branco, quadriculado--fino, quadriculado--grande

Título em caixa

CarrosTrack day

Botões

Reservar track day Ver os carros Ver detalhes

Selos

Sugerida Confirmada

Lista

Equipe completa
Telemetria
Câmera onboard

Tabela de voltas e preços

Plano **track day**
Voltas	Total
10	R$ 1.000
20	R$ 1.800

Cartão de carro e cartão de data

Ford GT40

500 hp · 5 marchas · tração traseira

5.0

Plano **track day**
Voltas	Total
10	R$ 2.800

1º track day 10.ABR/27

Autódromo deVelopark

Nova Santa Rita · RSSugerida

Formulário, aviso e ficha

Usados nas telas da conta do piloto: entrar, criar conta e meu cadastro. Nessas telas o formulário fica num cartao-vidro, dentro de uma tela-cheia tela-cheia--formulario: a foto ocupa a tela, o texto entra de um lado e o formulário fica do outro. Num formulário longo (reservar, inscrever), some tela-cheia--formulario-longo: o título fica no alto e acompanha a rolagem. O cartão do formulário não usa entra: o que a pessoa precisa preencher nunca depende de uma animação para aparecer.

<main class="tela-cheia tela-cheia--formulario tela-cheia--respira">
  <img class="tela-cheia__midia" src="..." alt="...">
  <div class="tela-cheia__texto">
    <div class="tela-cheia__chamada"> sobretitulo, titulo-grande e uma frase, com entra </div>
    <div class="cartao-vidro"> aviso, formulario, botões </div>
  </div>
</main>

Para criar a conta, aceite o aviso de privacidade.

Nome atualizado.

Continuar com o Google

Nome: Piloto de Exemplo
Cadastro: Piloto

Escolha em cartões e lista da equipe

A escolha em cartões é a pergunta de opções grandes da reserva e da inscrição: cada cartão é um rádio, reage ao mouse e acende em laranja quando escolhido; o carro lotado fica apagado e não deixa escolher. A lista da equipe é a tabela das telas da equipe; no celular cada linha vira um bloco, com o rótulo de cada célula em data-rotulo.

<fieldset class="escolhas"><legend>Carro</legend>
  <label class="escolha"><input type="radio" name="carro" value="celta">
    <span class="escolha__nome">Celta</span><span class="escolha__vagas">Restam 3 de 4 vagas</span></label>
  <label class="escolha escolha--lotada"><input type="radio" name="carro" value="gt40" disabled> ... Lotado</label>
</fieldset>

Carro Celta1.4 · 120 hpRestam 3 de 4 vagas Peugeot1.6 · 130 hpRestam 4 de 4 vagas Ford GT405.0 · 500 hpLotado

Data	Carro	Voltas	Contato
20/03/2027 · Interlagos	Celta	20	Piloto de Exemplo

Aprovado pelo Henrique em 12/11/2026

Novo visual

Imagem em tela cheia e movimento. Toda página do site segue esta linha: a inicial, a de cada carro, a de cada track day e a de cada corrida. As peças abaixo já estão em /css/componentes.css; o movimento vem de /js/movimento.js, carregado com <script src="js/movimento.js?v=20261112c" type="module">.

As sete regras

A imagem manda. Toda página abre com uma foto ou um vídeo do tamanho da tela inteira: o autódromo, o carro na pista, a equipe. O texto vem por cima, embaixo, sobre um véu escuro.
Tudo entra e sai da tela. Cada bloco aparece ao rolar, e a foto se move devagar. Nada surge parado.
O mouse dá resposta. Cartão, botão e pista reagem quando o mouse passa: aproximam, inclinam, acendem em laranja.
Uma ideia por tela. Título grande, uma frase, um botão. Tabela e detalhe ficam mais abaixo, ou na página do carro e do evento.
Laranja é para agir. O laranja ADN fica no botão principal, no número e no destaque do título. O resto é preto, grafite e branco.
Cantos arredondados. Foto e vídeo em moldura com 28 px, cartão com 24 px, botão em pílula. O canto vivo de 2 px fica só nos detalhes pequenos: selo, tabela e caixa de título.
O movimento nunca atrapalha. Quem pede menos movimento no aparelho vê a página parada e completa, todo vídeo que toca sozinho tem botão de pausar e não tem som, e o texto sobre foto sempre lê bem.

Tela cheia

Foto ou vídeo do tamanho da página, com o texto por cima. Na página ela ocupa a tela inteira; aqui está menor só para caber na vitrine. Passe o mouse no botão.

Viamão · RS

Tarumã

Ver as datas

<section class="tela-cheia tela-cheia--abertura tela-cheia--respira" data-progresso>
  <img class="tela-cheia__midia" src="..." alt="...">
  <div class="tela-cheia__texto">
    <p class="sobretitulo entra" style="--ordem: 0">...</p>
    <h1 class="titulo-gigante entra" style="--ordem: 1">...</h1>
    <a class="botao entra" style="--ordem: 2">...</a>
  </div>
</section>

tela-cheia--abertura   topo da página: a foto aproxima e o texto sobe ao rolar
tela-cheia--respira    a foto se move devagar, mesmo sem rolagem
tela-cheia--pilha      várias em sequência: cada uma desliza sobre a anterior (as pistas)
tela-cheia__tracado    o traçado da pista em laranja sobre a foto: entra girando e acende no mouse
                       (<img class="tela-cheia__tracado" src="img/tracados/..." alt="Traçado de ...">)

Títulos e botões

sobretitulo

Track day · para qualquer pessoa

titulo-gigante

Interlagos

titulo-grande

Escolha o seu.
A equipe cuida do resto.

botao · botao--vidro

Reservar track day Ver os carros

O botão virou pílula e o texto sobre o laranja passou a preto, que lê melhor. O botao--vidro é só para cima de foto ou vídeo.

Cartão-palco

O carro num palco escuro. Passe o mouse: o cartão inclina, o carro avança e o número acende. O cartão inteiro é o link para a página do carro.

Ford GT40

500 hp · 5 marchas · tração traseira

A partir de R$ 2.800 · 10 voltas

<a class="cartao-palco revela" data-inclina href="carro/index.html?id=gt40"> ... </a>
Vários lado a lado: dentro de <div class="trilho">, que rola para o lado.

Frase que acende

Para a frase que resume a página. As palavras acendem conforme a rolagem.

Carro de corrida, pista de verdade e uma equipe campeã inteira trabalhando para você.

<p class="frase-acende" data-acende>...</p>

Faixa quadriculada em movimento

A bandeira de chegada correndo. Abre e fecha um bloco de marca, como a resenha. Uma vez por página.

<div class="faixa-correndo" aria-hidden="true"></div> · variação: faixa-correndo--volta (corre para o outro lado)

Filme

O vídeo chega numa moldura e cresce até ocupar a tela. Toca sozinho, sem som, só enquanto aparece, e sempre com o botão de pausar. Vídeo curto, dos carros e da equipe da ADN, guardado em /img ou /video do próprio site.

<section class="filme" data-filme>
  <div class="filme__palco"><div class="filme__moldura">
    <video muted loop playsinline preload="metadata" poster="..."><source src="..."></video>
    <div class="filme__texto"><h2 class="titulo-grande">...</h2></div>
    <button class="filme__botao" type="button" data-filme-botao>Pausar vídeo</button>
  </div></div>
</section>

Entradas

entra é para o que está no topo da página e aparece sozinho. revela é para o resto, que aparece ao rolar. Para um depois do outro, style="--ordem: 0", 1, 2.

Cartão de evento

Cada data do calendário: o dia em laranja sobre a foto do autódromo, com o traçado no canto. Passe o mouse: a foto aproxima, o traçado gira e a borda acende. O cartão inteiro é o link para a página do evento. Vários juntos: dentro de grade-eventos. Na página inicial quem monta os cartões é /js/calendario.js, lendo /data/eventos-2027.json.

1º track day 20.MAR/27 Interlagos Autódromo de Interlagos · São Paulo/SP SugeridaVer detalhes

<div class="grade-eventos">
  <a class="cartao-evento" href="evento/index.html?id=...">
    <img class="cartao-evento__foto" src="img/autodromos/..." alt="">
    <img class="cartao-evento__tracado" src="img/tracados/..." alt="">
    <span class="sobretitulo">1º track day</span>
    <time class="cartao-evento__dia">20.MAR/27</time>
    <span class="cartao-evento__local">Interlagos</span>
    <span class="cartao-evento__cidade">...</span>
    <span class="cartao-evento__rodape"><span class="selo selo--sugerida">Sugerida</span><span class="cartao-evento__ver">Ver detalhes</span></span>
  </a>
</div>

Cartão de etapa

Um passo da jornada (Experiência, ADN Academy, Equipe de corrida) ou um valor da marca: número em laranja, título e uma frase. Acende no mouse. Vários juntos: grade-etapas; para cinco curtos, grade-etapas grade-etapas--miuda.

Experiência

Track day num carro de corrida

Para o apaixonado que nunca correu.

Ver as datas

Respeito

Pelo piloto, pela equipe, pelos outros times e pela pista.

<div class="grade-etapas">
  <article class="cartao-etapa">
    <span class="cartao-etapa__numero" aria-hidden="true">1</span>
    <p class="sobretitulo">Experiência</p>
    <h3 class="cartao-etapa__titulo">...</h3>
    <p>...</p>
  </article>
</div>

Palco do carro

A abertura da página de cada carro: o carro recortado ocupa a tela, com o nome gigante atrás. Ao rolar, o carro avança e cresce e o nome escorrega para o outro lado. As miniaturas trocam a foto grande e acendem no mouse. Na página ela ocupa a tela inteira; aqui está menor só para caber na vitrine.

Track day

Peugeot

<section class="tela-cheia tela-cheia--palco" data-progresso>
  <span class="tela-cheia__marca-dagua" aria-hidden="true">Peugeot</span>
  <div class="tela-cheia__carro entra"><img src="img/carros/..." alt="..."></div>
  <div class="tela-cheia__texto"> sobretitulo, titulo-gigante, galeria-minis, acoes </div>
</section>
Na página do carro quem monta é /js/carro.js, lendo /data/eventos-2027.json.

Valores lado a lado

Uma tabela de voltas por carro, cada uma num cartão de 24 px. A tabela continua com o canto vivo de 2 px.

Celta

Plano **track day**
Voltas	Total
10	R$ 1.000
20	R$ 1.800

<div class="grade-valores"> <div> <h4 class="h3">Carro</h4> <table class="tabela-voltas">...</table> </div> ... </div>

Barra do topo, blocos e detalhes da página

As peças que a página inicial usa em volta das telas cheias.

barra · data-barraBarra do topo fixa e transparente sobre a foto; depois de 40 px de rolagem vira vidro escuro. Logo à esquerda (barra__logo), menu no meio (barra__menu, some abaixo de 860 px) e o botão de reservar à direita.

pularLink "Pular para o conteúdo", primeiro da página; só aparece com o teclado.

bloco-palcoTela sem foto: espaço generoso em cima e embaixo. A cabeça (bloco-palco__cabeca) leva sobretítulo, título grande e uma frase.

texto-grande

Parágrafo de leitura em tela inteira, cinza, com o destaque em branco.

acoes · acoes--centro

Agir Segunda opção

legenda-fotoNome do lugar da foto de tela cheia, no canto de baixo à direita. Some no celular.

rolar-abaixoDica de rolar no pé da abertura; apaga quando a página anda e fica parada para quem pede menos movimento.

Celular primeiro

Regra policies/celular-primeiro.md: toda página nasce para o smartphone, e o computador é a adaptação. As peças abaixo já estão em /css/componentes.css.

--toque-confortavel · 48 pxAltura mínima do botão; --toque-minimo (44 px) para botão pequeno e link solto. Nada que se toca fica menor.

menu-celularAté 860 px, o menu da barra vira um botão redondo que abre a lista por cima, em fundo sólido, com itens de 56 px. É um <details>; tocar num link fecha (movimento.js).

barra-acao · tem-barra-acaoAté 860 px, a ação principal da página (reservar, quero correr, inscrever) fica presa embaixo, ao alcance do polegar, e sai do topo. Ponha class="tem-barra-acao" no <body>.

trilho no celularAté 760 px, a fila de cartões vira lista vertical: carro novo entra embaixo, sem rolar para o lado.

imagensAutódromo: foto (grande), fotoCelular (recorte vertical, com a pista inteira) e fotoCartao (800 px), no arquivo de eventos. Carro: ao lado de x.png, gere x.webp e x-celular.webp (800 px). As páginas usam <picture> e o celular baixa só a leve.

<body class="tem-barra-acao">
  <header class="barra"> ... <a class="botao botao--pequeno">Reservar</a>
    <details class="menu-celular"><summary aria-label="Abrir o menu"><span aria-hidden="true"></span></summary>
      <nav> <a href="...">Carros</a> ... </nav></details>
  </header>
  ...
  <div class="barra-acao"><a class="botao botao--largo" href="#calendario">Reservar track day</a></div>

<picture>
  <source media="(max-width: 760px)" srcset="img/autodromos/x-celular.jpg">
  <img class="tela-cheia__midia" src="img/autodromos/x.jpg" alt="...">
</picture>

Medidas do movimento

--tempo-entrada · 900 msBloco que entra na tela.

--tempo-toque · 450 msResposta ao mouse.

--tempo-dica · 1,9 sLaço da dica de rolar, na abertura.

--altura-barra · 56 pxAltura da barra do topo sobre a foto.

--curvaSai rápido e chega devagar, como um carro freando na entrada da curva.

--raio-midia · 28 pxFoto e vídeo em moldura.

--raio-cartao · 24 pxCartões grandes.

--raio-pilulaBotões.