Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingDarkenergeticboldyouthful
CChoque

Choque.

Full-throttle energy: black, electric yellow and shocking pink, giant headlines with outlined words, crossed X bands and brutalist cards.

Type
Landing page
Theme
Dark
Headings
Bricolage Grotesque
Body
DM Sans

ForYoung people 16-35 who want intensity: training, nightlife, streetwear

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/choque

Page sections01/08nav

All the copy lives in content.ts and the colors in tokens.css.
Concept

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

From DESIGN.md, which is in Portuguese for now.

ForYoung people 16-35 who want intensity: training, nightlife, streetwear

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Bricolage Grotesque for headings, DM Sans for body text.

HeadingsBricolage Grotesque

Aag!

Choque in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyDM Sans

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • brand with yellow, pink, orange or neon green
  • class schedule or event lineup
  • monthly plans or tickets
  • audience that lives on Instagram/TikTok
Avoid for
  • healthcare/clinic
  • law, accounting or serious B2B
  • discreet luxury
  • audience over 50
  • delicate beauty
Niches
gymfunctional trainingCrossFitcombat sportsdancepartyeventfestivalstreetwearyouth brandenergy drink

Tone

energeticboldyouthfulloud

What makes it Choque

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

Choque becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Choque.

Browse catalog
LandingDarkView design

Largada

LandingLightView design

Delírio

LandingDarkView design

Íris

LandingDarkView design

Ruído