Delírio.
Psicodélico anos 70 em cartaz: sol-olho girando com texto em arco, títulos groovy com sombra em camadas coloridas, ondas entre seções e ingressos em tíquete destacável.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Shrikhand
- Texto
- DM Sans
ParaJovens adultos 18-40 que saem à noite, consomem música, arte e moda
Seções da 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.
ParaJovens adultos 18-40 que saem à noite, consomem música, arte e moda
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Shrikhand nos títulos, DM Sans no texto.
TítulosShrikhand
Aag!
Delírio em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoDM Sans
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.
- agenda de eventos ou datas
- venda de ingresso
- marca com magenta, laranja, roxo ou amarelo
- identidade retrô/anos 70
- público que gosta de cor
- saúde/clínica
- advocacia e serviços formais
- B2B corporativo
- luxo discreto
- público que busca calma
Tom
O que faz ser Delírio
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Delírio 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 Delírio.