Letreiro.
An old theater marquee at night: a frame of bulbs that light up in sequence, swappable NOW SHOWING plates, a velvet curtain, a spotlight and perforated roll tickets. Nocturnal, festive and art deco.
- Type
- Landing page
- Theme
- Dark
- Headings
- Limelight
- Body
- Libre Franklin
ForCulture and leisure audience, 18-65, who buys tickets per show and wants to know day, time and age rating
Page sections01/09Topo e navegação
A marquise de um teatro antigo, à noite, com o letreiro aceso. Lâmpadas, veludo, holofote e ingresso de rolo. Festivo sem ser balada; nostálgico sem ser sépia.
From DESIGN.md, which is in Portuguese for now.
ForCulture and leisure audience, 18-65, who buys tickets per show and wants to know day, time and age rating
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Limelight for headings, Libre Franklin for body text.
HeadingsLimelight
Aag!
Letreiro in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyLibre Franklin
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.
- venue with a per-show schedule and ticket sales
- brand with red, burgundy or gold
- space with history, a facade or its own marquee
- show with a limited run
- online course and digital launch
- electronic music festival or club
- light, minimalist brand
- service with no date and time
Tone
What makes it Letreiro
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 01
Marquise de lâmpadas (
Lampadas): acendem uma a uma ao redor (--n× 45ms) e depois correm em trios (--f= n % 3). Uma marquise por tela, no máximo. - 02
Placas trocáveis (
Placas): letras brancas em trilho, cada uma levemente torta. Só para 1 a 3 palavras curtas ("EM CARTAZ", "ESTREIA", "HOJE"). - 03
Cortina de veludo em gradiente repetido, com bambinela em arcos e franja dourada no topo.
- 04
Holofote: cone em
conic-gradientque varre devagar. Sempre atrás do texto. - 05
Ingresso de rolo: tiras coladas uma na outra, bordas picotadas (mask), canhoto "Admite um", numeração em mono e carimbo "Esgotado". É a programação, não um card genérico.
- 06
Estrela art déco de 8 pontas como marcador; moldura
letreiro-decocom cantos em degrau. - 07
Tablado de madeira com ribalta (luzinhas) fechando o hero e a chamada final.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo vinho quase preto
#140608; blocos emsurface#210c0f. Nunca preto puro. - Texto creme
#f6ead2; secundário#c9ae98. - Primária vermelho-veludo
#b8182e: botões de compra e cortinas. - Destaque dourado-lâmpada
#f5c451, sempre com brilho (letreiro-neon,--letreiro-brilho) quando for texto grande. Em fundo grande, só nos ingressos. - Fontes: Limelight (art déco) só em títulos, preços e horários. Libre Franklin no resto.
Regras
- Classificação indicativa é obrigatória em cada sessão e no espetáculo, com o selo nas cores oficiais (L verde, 10 azul, 12 amarelo, 14 laranja, 16 vermelho, 18 preto). Usar só a classificação informada pela produção; nunca inventar.
- Meia-entrada: sempre que houver preço, mostrar a meia e o bloco de quem tem direito (Lei nº 12.933/2013 e Decreto nº 8.537/2015: estudantes, 60+, PCD e acompanhante, ID Jovem). Conferir lei estadual/municipal do cliente (professores etc.) e ajustar a nota.
- Rodapé leva os dois avisos legais (classificação e meia-entrada).
- Animação: lâmpadas e holofote param com movimento reduzido; o resto é
data-sobe/data-revela. - Máximo de 2 botões por tela. Botão de compra sempre com ícone de ingresso.
- Seções com
py-24, larguramax-w-6xl.
Adaptar à marca do cliente
- Cor da marca vermelha, vinho ou dourada: troque
--d-primarye o vermelho da cortina. - Marca azul ou verde: a cortina pode virar veludo azul (troque as 6 paradas de
letreiro-cortinae da bambinela), mantenha o dourado das lâmpadas. - Cinema de rua: troque "Admite um" por "Sessão", sala por "Sala 1/2", mantenha a marquise.
- Espetáculo infantil: mantenha tudo, mas prefira placa "HOJE" e ingressos em amarelo e creme.
Two files.
One prompt.
Letreiro 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 Letreiro.