Faixa.
Escuela infantil de artes marciales contada por la progresión de cinturones: tela cosida como divisor, pared de cinturones colgados, tatami de goma EVA y stickers de logros. Enérgico y alegre, pero habla con los padres.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Titan One
- Texto
- Nunito
ParaPadres y madres de niños de 3 a 17 años que buscan una actividad con disciplina y seguridad
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaPadres y madres de niños de 3 a 17 años que buscan una actividad con disciplina y seguridad
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Titan One en los títulos, Nunito en el texto.
TítulosTitan One
Aag!
Faixa en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoNunito
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.
- marca con colores primarios vivos (rojo, amarillo, azul)
- actividad con progresión por niveles, grados o cinturones
- grupos por edad con grilla de horarios
- negocio que convierte con clase de prueba gratis
- gimnasio de combate para adultos, MMA o muay thai de competición
- marca sobria, de lujo o corporativa
- clínica o servicio de salud
- público adulto sin hijos
Tono
Lo que lo hace Faixa
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Faixa 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.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 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.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 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 Faixa.