Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Instalar el KitGuía
LandingOscuroenérgicoaudazjoven
CChoque

Choque.

Energía a tope: negro, amarillo eléctrico y rosa chicle intenso, títulos gigantes con palabras en contorno, franjas cruzadas en X y tarjetas brutalistas.

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

ParaJóvenes de 16 a 35 que buscan intensidad: entrenamiento, noche, moda urbana

Obtener acceso · desde 49 BRLo todos los diseños por 297 BRL al año
Abrir en pantalla completa Usar con IA
/preview/choque

Secciones de la página01/08nav

Todo el texto está en content.ts y los colores en tokens.css.
Concepto

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

Del DESIGN.md, que por ahora está en portugués.

ParaJóvenes de 16 a 35 que buscan intensidad: entrenamiento, noche, moda urbana

Paleta

Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.

Tipografía

Bricolage Grotesque en los títulos, DM Sans en el texto.

TítulosBricolage Grotesque

Aag!

Choque en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoDM Sans

La fuente de lectura sostiene párrafos largos sin cansar.

Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.

0123456789 · $1.234,56 · 25/09 a las 19:30

Para quién es

Lo que la IA compara con el cliente para elegir el diseño.

Ideal para
  • marca con amarillo, rosa, naranja o verde neón
  • grilla de horarios o programación de evento
  • planes mensuales o entradas
  • público que vive en Instagram/TikTok
Evitar para
  • salud/clínica
  • abogacía, contabilidad o B2B serio
  • lujo discreto
  • público mayor de 50 años
  • belleza delicada
Nichos
gimnasioentrenamiento funcionalcrossfitartes marcialesbailefiestaeventofestivalstreetwearmarca jovenbebida energética

Tono

enérgicoaudazjovenruidoso

Lo que lo hace Choque

Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.

  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.

Reglas del juego

Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.

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.
Cómo usarlo

Dos archivos.
Un prompt.

Choque se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.

Prompt para el agente Usar con IA

Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.

  1. 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
  2. 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
  3. 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
  4. 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.

Similares

Landings con tono o nicho en común con Choque.

Ver catálogo
LandingOscuroVer diseño

Largada

LandingClaroVer diseño

Delírio

LandingOscuroVer diseño

Íris

LandingOscuroVer diseño

Ruído