Largada.
Nighttime sports look with a full-screen video of a female runner, giant lowercase words around her body and markers with guide lines. Late-night neutrals and a starting-line lime green, cinematic scroll with GSAP.
- Type
- Landing page
- Theme
- Dark
- Headings
- Urbanist
- Body
- Urbanist
ForAdults 25-50 who run or want to start, recurring service with group training and a training plan
Page sections01/09pill nav
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.
From DESIGN.md, which is in Portuguese for now.
ForAdults 25-50 who run or want to start, recurring service with group training and a training plan
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Urbanist for headings, Urbanist for body text.
HeadingsUrbanist
Aag!
Largada in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyUrbanist
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.
- sports brand with a signal color (lime, orange)
- business with a fixed training schedule
- client who has video or photos of their own athlete in action
- young, urban audience
- clinical healthcare and physical therapy (tone too aggressive)
- brand with a pastel or light palette
- business with no photos or video of people
- senior audience
Tone
What makes it Largada
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Take Largada
to your client.
In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.
Similar
Landings that share a tone or niche with Largada.
