Palco.
Página de lanzamiento oscura y dorada: video de ventas destacado, cuenta regresiva de cierre, módulos en acordeón, bonos, oferta en cuotas y sello de garantía.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Sora
- Texto
- Inter
ParaPersonas que compran conocimiento online: cursos, mentorías y programas con cohorte
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaPersonas que compran conocimiento online: cursos, mentorías y programas con cohorte
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Sora en los títulos, Inter en el texto.
TítulosSora
Aag!
Palco en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- venta por cohorte con fecha de apertura y cierre
- video de ventas (VSL)
- producto con módulos y bonos
- marca con negro, dorado, violeta o vino
- servicio presencial local
- tienda con muchos productos
- clínica o salud
- B2B de venta consultiva
- quien no tiene un plazo real de inscripción (quitar la cuenta regresiva)
Tono
Lo que lo hace Palco
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Palco se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Palco.
