Largada.
Deportivo nocturno con video de corredora a pantalla completa, palabras gigantes en minúscula alrededor del cuerpo y marcadores con línea guía. Neutros de madrugada y un verde lima de largada, scroll cinematográfico con GSAP.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Urbanist
- Texto
- Urbanist
ParaAdultos de 25 a 50 que corren o quieren empezar, servicio recurrente con entrenamiento grupal y plan de entrenamiento
Secciones de la página01/09nav en píldora
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.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos de 25 a 50 que corren o quieren empezar, servicio recurrente con entrenamiento grupal y plan de entrenamiento
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Urbanist en los títulos, Urbanist en el texto.
TítulosUrbanist
Aag!
Largada en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoUrbanist
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca deportiva con color de señalización (lima, naranja)
- negocio con agenda de entrenamientos fija
- cliente que tiene video o fotos de su propio atleta en acción
- público joven y urbano
- salud clínica y fisioterapia (tono demasiado agresivo)
- marca con paleta pastel o clara
- negocio sin fotos ni video de personas
- público mayor
Tono
Lo que lo hace Largada
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Lleva Largada
a tu cliente.
En Claude Code, Cursor o cualquier IA: lee el DESIGN.md de este diseño y aplica tokens, fuentes y textos en el proyecto del cliente.
Similares
Landings con tono o nicho en común con Largada.
