Faixa.
Escola de luta infantil contada pela progressão de faixas: tecido costurado como divisória, parede de faixas penduradas, tatame de EVA e adesivos de conquista. Enérgico e alegre, mas fala com os pais.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Titan One
- Texto
- Nunito
ParaPais e mães de crianças de 3 a 17 anos procurando atividade com disciplina e segurança
Seções da 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.
ParaPais e mães de crianças de 3 a 17 anos procurando atividade com disciplina e segurança
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Titan One nos títulos, Nunito no texto.
TítulosTitan One
Aag!
Faixa em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoNunito
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- marca com cores primárias vivas (vermelho, amarelo, azul)
- atividade com progressão por níveis, graus ou faixas
- turmas por idade com grade de horários
- negócio que converte por aula experimental grátis
- academia de luta para adultos, MMA ou muay thai de competição
- marca sóbria, de luxo ou corporativa
- clínica ou serviço de saúde
- público adulto sem filhos
Tom
O que faz ser Faixa
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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).
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Faixa vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Faixa.