Palco.
Página de lançamento escura e dourada: vídeo de vendas em destaque, contador de fechamento, módulos em acordeão, bônus, oferta parcelada e selo de garantia.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Sora
- Texto
- Inter
ParaPessoas comprando conhecimento online: cursos, mentorias e programas com turma
Seções da página01/11Topo e navegação
Página de lançamento com cara de evento premium: escuro, dourado e um toque de ametista. O vídeo e a oferta são as estrelas; o resto conduz até eles.
ParaPessoas comprando conhecimento online: cursos, mentorias e programas com turma
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Sora nos títulos, Inter no texto.
TítulosSora
Aag!
Palco em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- venda por turma com data de abertura e fechamento
- vídeo de vendas (VSL)
- produto com módulos e bônus
- marca com preto, dourado, roxo ou vinho
- serviço presencial local
- loja com muitos produtos
- clínica/saúde
- B2B com venda consultiva
- quem não tem prazo real de inscrição (tirar o contador)
Tom
O que faz ser Palco
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Vídeo de vendas 16:9 com borda em gradiente dourado→ametista, brilho dourado atrás e botão de play dourado pulsando.
- 02
Final do título do hero em texto com gradiente dourado.
- 03
Botão principal dourado com reflexo passando (
.palco-reflexo). - 04
Contador de fechamento em blocos mono logo abaixo do hero.
- 05
"É para quem / Não é para quem" lado a lado: o "sim" com check dourado, o "não" apagado.
- 06
Módulos numerados em acordeão, com o título da seção fixo ao lado no desktop.
- 07
Cartão de oferta com borda dourada, parcela gigante em dourado e lista do que está incluso.
- 08
Selo circular de garantia com texto girando e "7" no centro.
- 09
Barra fixa de compra no rodapé do celular.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo quase preto arroxeado
#0b0a10, superfícies#14121ce#1c1927, bordas#2a2637. - Texto marfim
#f4f1ea; secundário#a7a2b3. - Primária dourado
#f2c265, quase sempre em gradiente (.palco-ouro/.palco-ouro-texto) com texto escuro por cima. - Destaque ametista
#9b7edesó em brilhos desfocados e nos ícones dos bônus. - Fontes: Sora bold nos títulos (tracking apertado), Inter no texto, JetBrains Mono em rótulos, números do contador e numeração dos módulos.
Regras
- Todos os botões de compra levam para
#oferta. Um único CTA por bloco. - Dourado é para o que vende (botão, preço, check). Não usar em texto corrido.
- Animação: entrada no hero, revelar ao rolar, pulso do play e reflexo do botão. Nada além disso.
Adaptar à marca do cliente
- Marca sem dourado: troque
--d-primarye os três tons do gradiente emtokens.css(claro, médio, escuro) pela cor da marca. Precisa ser clara o bastante para texto escuro por cima. - Marca em vinho ou azul-marinho: use como
--d-accente deixe a primária dourada. - Evento online com data única: troque
prazo.rotulopor "O evento começa em" e aponteprazo.fimpara o início.
Dois arquivos.
Um prompt.
O Palco vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Palco.