Largada.
Esportivo noturno com vídeo de corredora em tela cheia, palavras gigantes em caixa baixa em volta do corpo e marcadores com linha-guia. Neutros de madrugada e um verde-limão de largada, rolagem cinematográfica com GSAP.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Urbanist
- Texto
- Urbanist
ParaAdultos 25-50 que correm ou querem começar, serviço recorrente com treino em grupo e planilha
Seções da página01/09nav em pílula
Landing de assessoria de corrida (marca fictícia, São Paulo). Escura, urbana, de madrugada: um vídeo de corredora em tela cheia e três palavras gigantes em caixa baixa em volta do corpo dela.
ParaAdultos 25-50 que correm ou querem começar, serviço recorrente com treino em grupo e planilha
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Urbanist nos títulos, Urbanist no texto.
TítulosUrbanist
Aag!
Largada em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoUrbanist
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 esportiva com cor de sinalização (limão, laranja)
- negócio com agenda de treinos fixa
- cliente que tem vídeo ou foto do próprio atleta em ação
- público jovem e urbano
- saúde clínica e fisioterapia (tom agressivo demais)
- marca com paleta pastel ou clara
- negócio sem nenhuma foto ou vídeo de pessoas
- público idoso
Tom
O que faz ser Largada
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Palavras em volta do corpo (
largada-palavra,largada-w1..w3): "corra / mais / longe" em três pontos do quadro. A do meio usamix-blend-mode: difference: inverte sobre o céu claro e fica clara sobre a silhueta, então o corpo "corta" a palavra. Ela é um filho direto doh1absoluto dentro do hero (que temisolation: isolate); não envolva em elemento com transform/opacity, senão o blend some. - 02
Marcadores com linha-guia (
largada-marca+ SVGFio): número curto em 600 + texto de 2 linhas e uma linha de 1px que sai na horizontal e sobe em diagonal até um ponto, apontando para a atleta. Sempre fato do serviço ("3 treinos em grupo por semana"), nunca número de clientes. - 03
Nav em pílulas finas: logo, links e um único CTA verde. O CTA verde é o único bloco sólido de cor.
- 04
Passos presos na rolagem: no desktop a seção do método prende e os 4 passos correm na horizontal com uma barra de progresso verde de 2px.
- 05
Tabela da semana: treino em grupo marcado por um traço verde de 3px antes do dia.
- 06
Assinatura gigante no rodapé: o nome da marca em peso 200 cortado pela borda de baixo.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Peça central: vídeo em tela cheia de uma atleta em movimento, contra a luz, com a câmera atrás. Tudo o que é interface fica fino e pequeno perto dele: pílulas de 1px, marcadores com linha-guia.
- Tipografia: Urbanist do fino ao forte. Palavras e títulos em peso 200–300, caixa baixa, entreletra negativa (-0,05 a -0,07em), entrelinha 0,78–0,9. Rótulos e nomes em 600. Sem serifa, sem mono.
- Cor: neutros de noite e amanhecer (
#0b0c0d,#131517,#f1efe9, cinza#a4a7a9) e um acento de largada, verde-limão#e4ff3a. Areia#cdb99esó em informação secundária (ciclo de prova). - Forma: botões e navegação em pílula; todo o resto é reto (linhas de 1px, colunas, tabelas). Nada de card com sombra.
Regras
- Um só acento. O verde vai em: CTA, traço de treino em grupo, topo do plano em destaque, barra de progresso, foco e o ponto do logo. Nunca em texto corrido nem em fundo de seção.
- Sem glow, gradiente, vidro ou sombra na interface. Luz e cor ficam dentro do vídeo/foto.
- Imagens sempre de gente correndo de verdade no contexto do negócio (pista, parque, prova). Foto sem relação com o serviço derruba o design.
- Contraste AA: texto sobre vídeo tem véu plano
rgba(11,12,13,.3); sobre foto de faixa,.42. - Foco visível: contorno verde de 2px (no botão verde, contorno claro).
- Celular: as três palavras empilham a ~29vw, os marcadores laterais somem e fica um; links viram
details"menu". A tabela rola dentro do próprio bloco (overflow-x-auto), nunca a página. - Sem depoimento, logo de cliente, nota ou contagem de alunos. Preço, horário e data são de exemplo.
Adaptar à marca do cliente
- Troque o vídeo pelo do cliente (atleta dele, de costas ou de lado, contra a luz, com céu claro no meio do quadro para o blend da palavra do meio funcionar). Ajuste
object-positionem.largada-midia. - Troque as três palavras (curtas, 4–6 letras, caixa baixa) e os três marcadores por fatos do serviço.
- Acento: troque
--d-primarypor uma cor de sinalização da marca (laranja, vermelho, ciano). Mantenha um só.--d-primary-fgprecisa de contraste AA sobre ela. - Outros esportes: ciclismo (semana = pedais), natação (piscina e horário), triathlon (3 colunas de modalidade na tabela). A estrutura hero → método → semana → planos → calendário serve a todos.
- Troque o registro do rodapé pelo do cliente (CREF real) e os locais de encontro.
Leve o Largada
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Largada (largada)
Parecidos
Landings com tom ou nicho em comum com Largada.