Design Vaultby Ravox
Landingescurofestivonoturnoteatral
LLetreiro

Letreiro.

Marquise de teatro antigo à noite: moldura de lâmpadas que acendem em sequência, placas trocáveis "EM CARTAZ", cortina de veludo, holofote e ingressos de rolo picotados. Noturno, festivo e art déco.

Tipo
Landing page
Tema
Escuro
Títulos
Limelight
Texto
Libre Franklin

ParaPúblico de cultura e lazer, 18-65, que compra ingresso por sessão e quer saber dia, hora e classificação

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/letreiro

Seções da página01/09Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

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.

ParaPúblico de cultura e lazer, 18-65, que compra ingresso por sessão e quer saber dia, hora e classificação

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Limelight nos títulos, Libre Franklin no texto.

TítulosLimelight

Aag!

Letreiro em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoLibre Franklin

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.

Combina com
  • casa com programação por sessão e venda de ingresso
  • marca com vermelho, vinho ou dourado
  • espaço com história, fachada ou letreiro próprio
  • espetáculo em temporada
Evitar para
  • curso online e lançamento digital
  • festival de música eletrônica ou balada
  • marca clara e minimalista
  • serviço sem data e horário
Nichos
teatrocinema de ruastand-up comedycasa de shows pequenacircocabaréescola de teatroespetáculo infantilcompanhia de dançasarau

Tom

festivonoturnoteatralnostálgicocaloroso

O que faz ser Letreiro

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 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.

  2. 02

    Placas trocáveis (Placas): letras brancas em trilho, cada uma levemente torta. Só para 1 a 3 palavras curtas ("EM CARTAZ", "ESTREIA", "HOJE").

  3. 03

    Cortina de veludo em gradiente repetido, com bambinela em arcos e franja dourada no topo.

  4. 04

    Holofote: cone em conic-gradient que varre devagar. Sempre atrás do texto.

  5. 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.

  6. 06

    Estrela art déco de 8 pontas como marcador; moldura letreiro-deco com cantos em degrau.

  7. 07

    Tablado de madeira com ribalta (luzinhas) fechando o hero e a chamada final.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo vinho quase preto #140608; blocos em surface #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, largura max-w-6xl.

Adaptar à marca do cliente

  • Cor da marca vermelha, vinho ou dourada: troque --d-primary e o vermelho da cortina.
  • Marca azul ou verde: a cortina pode virar veludo azul (troque as 6 paradas de letreiro-cortina e 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.
Como usar

Dois arquivos.
Um prompt.

O Letreiro 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.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 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 Letreiro.

Ver catálogo
LandingescuroVer design

Camarim

LandingescuroVer design

Lado B

LandingescuroVer design

Lobby

LandingescuroVer design

Ruído