Faixa.
Kids' martial arts school told through belt progression: sewn fabric as dividers, a wall of hanging belts, EVA foam mat and achievement stickers. Energetic and cheerful, but speaking to parents.
- Type
- Landing page
- Theme
- Light
- Headings
- Titan One
- Body
- Nunito
ForParents of children aged 3 to 17 looking for an activity with discipline and safety
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForParents of children aged 3 to 17 looking for an activity with discipline and safety
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Titan One for headings, Nunito for body text.
HeadingsTitan One
Aag!
Faixa in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyNunito
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.
- brand with vivid primary colors (red, yellow, blue)
- activity with progression by levels, degrees or belts
- classes by age with a schedule grid
- business that converts through a free trial class
- adult combat gym, MMA or competitive Muay Thai
- sober, luxury or corporate brand
- clinic or healthcare service
- adult audience without children
Tone
What makes it Faixa
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Faixa 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.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 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.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 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 Faixa.
