Largada.
Look sportif de nuit avec vidéo plein écran d'une coureuse, mots géants en minuscules autour du corps et repères avec lignes-guides. Neutres de petit matin et vert citron de ligne de départ, défilement cinématographique avec GSAP.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Urbanist
- Texte
- Urbanist
PourAdultes de 25 à 50 ans qui courent ou veulent s'y mettre, service récurrent avec entraînement en groupe et plan d'entraînement
Sections de la page01/09nav en pilule
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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 25 à 50 ans qui courent ou veulent s'y mettre, service récurrent avec entraînement en groupe et plan d'entraînement
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Urbanist pour les titres, Urbanist pour le texte.
TitresUrbanist
Aag!
Largada en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteUrbanist
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque sportive avec couleur de signalisation (citron, orange)
- activité avec planning d'entraînement fixe
- client qui a des vidéos ou photos de son propre athlète en action
- public jeune et urbain
- santé clinique et kinésithérapie (ton trop agressif)
- marque à palette pastel ou claire
- activité sans photo ni vidéo de personnes
- public senior
Ton
Ce qui fait Largada
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Emmenez Largada
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Similaires
Des landings qui partagent un ton ou un secteur avec Largada.
