Delírio.
70s psychedelia as a gig poster: a spinning sun-eye with arched text, groovy headlines with layered colored shadows, waves between sections and tickets as tear-off stubs.
- Type
- Landing page
- Theme
- Light
- Headings
- Shrikhand
- Body
- DM Sans
ForYoung adults 18-40 who go out at night and consume music, art and fashion
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForYoung adults 18-40 who go out at night and consume music, art and fashion
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Shrikhand for headings, DM Sans for body text.
HeadingsShrikhand
Aag!
Delírio in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyDM Sans
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.
- event or date calendar
- ticket sales
- brand with magenta, orange, purple or yellow
- retro/70s identity
- audience that loves color
- healthcare/clinic
- law and formal services
- corporate B2B
- discreet luxury
- audience looking for calm
Tone
What makes it Delírio
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Delírio 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 Delírio.
