Delírio.
Psicodelia de los 70 en cartel: sol-ojo giratorio con texto en arco, títulos groovy con sombra en capas de colores, ondas entre secciones y entradas como tickets desprendibles.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Shrikhand
- Texto
- DM Sans
ParaJóvenes adultos de 18 a 40 que salen de noche y consumen música, arte y moda
Secciones de la página01/08Topo e navegação
Psicodélico anos 70 em formato de cartaz de show. Cor saturada, formas redondas e movimento lento, como um pôster de festival colado na parede.
Del DESIGN.md, que por ahora está en portugués.
ParaJóvenes adultos de 18 a 40 que salen de noche y consumen música, arte y moda
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Shrikhand en los títulos, DM Sans en el texto.
TítulosShrikhand
Aag!
Delírio en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoDM Sans
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.
- agenda de eventos o fechas
- venta de entradas
- marca con magenta, naranja, morado o amarillo
- identidad retro/años 70
- público que ama el color
- salud/clínica
- abogacía y servicios formales
- B2B corporativo
- lujo discreto
- público que busca calma
Tono
Lo que lo hace Delírio
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Sol-olho em SVG: pétalas girando devagar, anéis concêntricos pulsando e um olho no centro, com texto girando em arco (
textPath). - 02
Título com sombra sólida em camadas coloridas (
.delirio-camadas); versão leve (.delirio-camadas-leve) em títulos menores. - 03
Ondas em SVG entre as seções (componente
Onda). - 04
Blob com gradiente cônico (
.delirio-blob), inteiro ou desfocado no fundo. - 05
Adesivos em forma de flor com contorno tracejado, balançando.
- 06
Faixa de gêneros inclinada em mostarda com ✿ entre os itens.
- 07
Lineup em cartaz: headliners enormes, depois nomes médios e por fim os pequenos em caixa-alta.
- 08
Ingressos em tíquete: recortes nas laterais na linha de picote e serrilha embaixo.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo creme quente
#fff1dc, alternando com vinho profundo#3a0d2e(agenda, rodapé), pêssego#ffe4bd(ingressos) e laranja#ff6b1a(chamada final). Nunca branco puro nem preto. - Texto vinho escuro
#2a0a22; secundário#7a3f5c. - Paleta das artes (variáveis
--delirio-*): laranja#ff6b1a, magenta#e0218a(primária), roxo#6b2bd9, mostarda#ffc233, verde-água#2ec4b6. - Fontes: Shrikhand (groovy) em títulos, nomes de atrações, datas e preços; DM Sans no texto.
Regras
- Botões sempre em pílula com borda vinho de 2px e sombra sólida deslocada.
- No máximo 2 artes girando por tela; o resto fica parado.
- Texto corrido nunca em cima de gradiente: sempre sobre creme, vinho ou cartão.
- Animações próprias param com
prefers-reduced-motion.
Adaptar à marca do cliente
- Troque
--d-primarye as variáveis--delirio-*para a paleta da marca, mantendo 4 a 5 cores saturadas. - Estúdio de tatuagem: troque o creme por vinho em mais seções e use roxo e verde-água como principais.
- Loja de vinil/moda: a agenda vira "lançamentos" ou "drops", e os ingressos viram produtos.
- Marca de cor única e sóbria não combina com este design: escolha outro.
Dos archivos.
Un prompt.
Delírio 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 Delírio.