Design Vaultby Ravox
Landingescuroenérgicoousadojovem
CChoque

Choque.

Energia no talo: preto, amarelo elétrico e rosa-choque, títulos gigantes com palavras em contorno, faixas cruzadas em X e cartões brutalistas.

Tipo
Landing page
Tema
Escuro
Títulos
Bricolage Grotesque
Texto
DM Sans

ParaJovens 16-35 que querem intensidade: treino, noite, moda de rua

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/choque

Seções da página01/08nav

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Energia no talo. Parece cartaz colado no poste de festa: preto, amarelo elétrico, rosa-choque, letra gigante e adesivo torto.

ParaJovens 16-35 que querem intensidade: treino, noite, moda de rua

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Bricolage Grotesque nos títulos, DM Sans no texto.

TítulosBricolage Grotesque

Aag!

Choque em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoDM Sans

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • marca com amarelo, rosa, laranja ou verde neon
  • grade de horários ou programação de evento
  • planos mensais ou ingressos
  • público que vive no Instagram/TikTok
Evitar para
  • saúde/clínica
  • advocacia, contabilidade ou B2B sério
  • luxo discreto
  • público acima de 50 anos
  • beleza delicada
Nichos
academiatreino funcionalcrossfitlutadançafestaeventofestivalstreetwearmarca jovembebida energética

Tom

enérgicoousadojovembarulhento

O que faz ser Choque

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Título que alterna palavra preenchida e palavra em contorno (.choque-contorno, componente Alterna).

  2. 02

    Duas faixas cruzadas em X: amarela inclinada para um lado correndo para a esquerda, rosa inclinada para o outro correndo para a direita.

  3. 03

    Cartões brutalistas: borda de 2px clara + sombra sólida deslocada (shadow-[8px_8px_0_var(--d-primary)]), sem desfoque. No hover a sombra cresce.

  4. 04

    Adesivos rotacionados e balançando (.choque-adesivo + --giro), com borda preta grossa.

  5. 05

    Botões que "afundam" no hover: andam para a sombra e a sombra diminui.

  6. 06

    Rótulo de seção com raio (Zap) em mono rosa.

  7. 07

    Fundo pontilhado no hero (.choque-pontos) com brilhos rosa e amarelo desfocados.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo preto #0b0b0b, cartões #151515 e #1f1f1f. Bordas #2e2e2e.
  • Texto off-white #f5f5f0; secundário #a3a39b.
  • Primária amarelo elétrico #ffe600 com texto preto: CTA, plano destacado, faixa A, chamada final.
  • Destaque rosa-choque #ff2d87: sombras sólidas, adesivos, faixa B.
  • Fontes: Bricolage Grotesque extrabold em caixa-alta com tracking-tighter nos títulos; DM Sans no texto; JetBrains Mono em rótulos, horários e níveis.

Regras

  • Amarelo e rosa são as únicas cores. Nada de terceira cor vibrante.
  • Máximo de 2 adesivos por tela; eles são tempero, não conteúdo.
  • Título de seção sempre em 2 partes alternando preenchido/contorno.
  • Contorno só em fonte grande (acima de 48px). Em texto pequeno ele some.
  • As faixas cruzadas são decorativas (aria-hidden): nenhuma informação importante só nelas.

Adaptar à marca do cliente

  • Troque --d-primary e --d-accent pelas duas cores mais fortes da marca. A primária precisa aguentar texto preto em cima.
  • Marca com laranja: --d-primary: #ff6a00 e --d-accent: #00e5ff mantêm o choque.
  • Festa/festival: corAula no Landing vira cor por palco ou gênero musical.
Como usar

Dois arquivos.
Um prompt.

O Choque vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Choque.

Ver catálogo
LandingclaroVer design

Delírio

LandingescuroVer design

Ruído

LandingclaroVer design

Feira

LandingclaroVer design

Faixa