Palco.
Dark and gold launch page: featured sales video, closing countdown, accordion modules, bonuses, installment offer and guarantee seal.
- Type
- Landing page
- Theme
- Dark
- Headings
- Sora
- Body
- Inter
ForPeople buying knowledge online: courses, mentorships and cohort programs
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForPeople buying knowledge online: courses, mentorships and cohort programs
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Sora for headings, Inter for body text.
HeadingsSora
Aag!
Palco in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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.
- cohort sales with opening and closing dates
- sales video (VSL)
- product with modules and bonuses
- brand with black, gold, purple or burgundy
- local in-person service
- store with many products
- clinic/healthcare
- consultative B2B sales
- anyone without a real enrollment deadline (remove the countdown)
Tone
What makes it Palco
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Palco becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Palco.