Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Installer le KitGuide
LandingSombreénergiqueaudacieuxjeune
CChoque

Choque.

Énergie à fond : noir, jaune électrique et rose fluo, titres géants avec mots en contour, bandes croisées en X et cartes brutalistes.

Type
Landing page
Thème
Sombre
Titres
Bricolage Grotesque
Texte
DM Sans

PourJeunes de 16 à 35 ans en quête d'intensité : entraînement, sorties, streetwear

Obtenir l'accès · à partir de 49 R$ou tous les designs pour 297 R$ par an
Ouvrir en plein écran Utiliser avec l'IA
/preview/choque

Sections de la page01/08nav

Tout le texte est dans content.ts et les couleurs dans tokens.css.
Concept

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

Extrait du DESIGN.md, en portugais pour l'instant.

PourJeunes de 16 à 35 ans en quête d'intensité : entraînement, sorties, streetwear

Palette

Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.

Typographie

Bricolage Grotesque pour les titres, DM Sans pour le texte.

TitresBricolage Grotesque

Aag!

Choque en une ligne

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TexteDM Sans

La police de lecture porte les longs paragraphes sans fatiguer.

Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.

0123456789 · 1 234,56 € · 25/09 à 19h30

Pour qui

Ce que l'IA compare avec le client pour choisir le design.

Idéal pour
  • marque avec jaune, rose, orange ou vert néon
  • planning de cours ou programmation d'événement
  • abonnements mensuels ou billets
  • public qui vit sur Instagram/TikTok
À éviter pour
  • santé/clinique
  • droit, comptabilité ou B2B sérieux
  • luxe discret
  • public de plus de 50 ans
  • beauté délicate
Secteurs
salle de sportentraînement fonctionnelCrossFitsports de combatdansesoiréeévénementfestivalstreetwearmarque jeuneboisson énergisante

Ton

énergiqueaudacieuxjeunebruyant

Ce qui fait Choque

Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.

  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.

Règles du jeu

Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.

Voir le 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.
Mode d'emploi

Deux fichiers.
Un prompt.

Choque devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.

Prompt pour l'agent Utiliser avec l'IA

Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.

  1. 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
  2. 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
  3. 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
  4. 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.

Similaires

Des landings qui partagent un ton ou un secteur avec Choque.

Voir le catalogue
LandingSombreVoir le design

Largada

LandingClairVoir le design

Delírio

LandingSombreVoir le design

Íris

LandingSombreVoir le design

Ruído