Faixa.
École d'arts martiaux pour enfants racontée par la progression des ceintures : tissu cousu en séparateur, mur de ceintures suspendues, tatami en mousse EVA et autocollants de réussite. Énergique et joyeux, mais qui parle aux parents.
- Type
- Landing page
- Thème
- Clair
- Titres
- Titan One
- Texte
- Nunito
PourParents d'enfants de 3 à 17 ans qui cherchent une activité avec discipline et sécurité
Sections de la page01/12nav
Escola de luta para crianças contada pela progressão de faixas. Creme de tatame, vermelho e amarelo de adesivo, fonte redonda e gorda. Enérgico e alegre, mas quem lê são os pais: disciplina, respeito e segurança vêm antes do "pow". Nada de octógono, luva ou foto de academia de adulto.
Extrait du DESIGN.md, en portugais pour l'instant.
PourParents d'enfants de 3 à 17 ans qui cherchent une activité avec discipline et sécurité
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Titan One pour les titres, Nunito pour le texte.
TitresTitan One
Aag!
Faixa en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteNunito
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.
- marque aux couleurs primaires vives (rouge, jaune, bleu)
- activité avec progression par niveaux, grades ou ceintures
- groupes par âge avec planning
- activité qui convertit grâce à un cours d'essai gratuit
- salle de combat pour adultes, MMA ou muay thaï de compétition
- marque sobre, de luxe ou corporate
- clinique ou service de santé
- public adulte sans enfants
Ton
Ce qui fait Faixa
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
A página sobe de faixa ao rolar: cada seção abre com uma divisória de tecido costurado (
Divisa), da amarela à preta, com nó à direita e legenda mono (03 · faixa laranja). Ela se estica ao entrar na tela. - 02
Rótulo-ponteira: o rótulo de cada seção é a ponta da faixa, na cor da seção, com a ponteira preta e dois graus brancos (na preta, ponteira vermelha).
- 03
Nó de faixa em SVG (
Laco) com contorno grosso: no logo, nos cartões, amarrando a foto do hero e no bloco final. As pontas balançam de leve. - 04
Parede de faixas na jornada: faixas penduradas num suporte de madeira, cada uma mais longa, balançando no hover. No celular viram faixas deitadas crescendo.
- 05
Tatame de EVA (
faixa-tatame) como textura: creme no hero, vermelho na aula experimental. - 06
Adesivos de conquista: estrela recortada com borda branca, selo redondo de idade e a caderneta do aluno (papel pautado com margem vermelha) com adesivos de valores.
- 07
Vale-aula destacável na aula experimental e botões de apertar (afundam no hover/clique).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo creme
#fbf7ef(tatame claro), cartões brancos, bloco alternado#f3ebdc. - Texto quase preto
#141414; secundário#5f5a52. - Primária vermelho
#e63946: botão principal, bloco da aula experimental, destaque do título. - Destaque amarelo
#f4c430: adesivo, vale-aula, sublinhado do título, botão sobre o vermelho. - Cores das faixas (só em faixas, rótulos e ícones, nunca em fundo de seção): branca
#fff, amarela#f4c430, laranja#f28c28, verde#2a9d5c, azul#2563c9, roxa#7b3fa0, marrom#7a4a2a, preta#141414. Ficam emFAIXASnoLanding.tsx. - Fontes: Titan One nos títulos (um peso só, nunca negrito falso), Nunito no texto (bold/extrabold em rótulos), JetBrains Mono em horário, número e registro.
Regras
- Colorido por faixa, não por arco-íris: cada bloco usa a cor da própria faixa e o resto é creme.
- Cor da faixa com texto: branco sobre verde, azul, roxa, marrom e preta; preto sobre as outras.
- Máximo de 2 botões por tela. O principal sempre leva para a aula experimental.
- Animação: entrada (
data-sobe), revelar ao rolar (data-revela), letreiro das modalidades, pontas do nó e divisória esticando. Tudo para comprefers-reduced-motion. - Fotos: placeholders em gradiente no formato final (4/5). Criança só com autorização por escrito dos responsáveis; sem ela, use foto do espaço, do tatame ou do professor.
Adaptar à marca do cliente
- Cor da marca vermelha, azul ou laranja: troque
--d-primarye a sombra do botão (--sombraem.faixa-botao). Mantenha o creme e o amarelo dos adesivos. - Uma modalidade só (ex.: só jiu-jitsu): troque o letreiro por lemas da escola e ajuste as faixas da jornada à graduação oficial dela (no jiu-jitsu infantil entram a cinza e as mistas).
- Capoeira como carro-chefe: as faixas viram cordas; mantenha a divisória de tecido e troque o nó.
- Escola com público adulto forte ou foco em competição: este design não é o certo.
Deux fichiers.
Un prompt.
Faixa 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.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 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.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 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 Faixa.