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

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" 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)

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.

Medidas do movimento

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

--tempo-toque · 450 msResposta ao mouse.

--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.