Camarim.
Book de atriz, ator ou modelo como o camarim antes da estreia: espelho com lâmpadas acesas, comp card de agência, digitals em polaroid e trabalhos em ordem do dia. Escuro quente, âmbar de lâmpada e um toque de batom.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Italiana
- Texto
- Jost
ParaProdutores de elenco, bookers e diretores que avaliam um artista antes do teste
Seções da página01/08Topo e navegação
Book de atriz, ator ou modelo montado como o camarim meia hora antes da estreia: madeira escura, lâmpada acesa em volta do espelho, bilhete de colega preso no canto. Íntimo e de bastidor, não de tapete vermelho.
ParaProdutores de elenco, bookers e diretores que avaliam um artista antes do teste
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Italiana nos títulos, Jost no texto.
TítulosItaliana
Aag!
Camarim em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoJost
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.
- artista que trabalha com agência (booker)
- portfólio pessoal de uma pessoa só
- teatro, TV, publicidade e moda
- empresa ou produto
- loja com catálogo
- marca que pede tema claro e alegre
- tech/SaaS
Tom
O que faz ser Camarim
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Espelho de camarim no hero:
.camarim-espelhocom quatro.camarim-fileirade.camarim-lampada; uma pisca (--pisca/--pisca-2), uma queimada (--queimada). O retrato fica em.camarim-vidro(reflexo diagonal), com um bilhete de papel e fita crepe (.camarim-fita) e uma polaroid enfiada na moldura. Recado escrito "de batom" no vidro, em Italiana vermelha. - 02
Comp card frente (retrato grande + nome) e verso (4 fotos 3:4, medidas em mono, bloco de representação com a agência). Em papel, levemente girados; endireitam no hover.
- 03
Digitals em
.camarim-polaroidpresas com fita, girinhos diferentes, legenda à mão e data. - 04
Ordem do dia (call sheet): cabeçalho de folha de produção + tabela com chamada, data, produção, personagem e veículo. Teatro ganha a etiqueta vermelha.
- 05
Lista de ensaio: habilidades com horário em mono, como quadro de sala de ensaio.
- 06
Claquete do reel: braço listrado que fecha no hover, campos em giz, timecode em mono âmbar e luz de REC piscando.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo marrom quase preto
#1a1411(bastidor); blocos alternados emsurface#231b17. - Texto creme
#f3e6d4; secundário#b3a08c. Nada de branco puro. - Primária âmbar de lâmpada
#ffc86b: botão principal, horários, timecode, pontinho aceso. - Destaque vermelho de batom
#b3243b, com moderação: escrita no espelho, fio do contato direto, etiqueta de teatro, luz do REC. Nunca em fundo grande. Em texto pequeno use#e46a7e. - Papel
#efe4d2com tinta#2a1d17para o que é impresso (comp card, bilhete, polaroid). - Fontes: Italiana (display, fina, sempre grande: nome, títulos, produção, legenda à mão), Jost (texto, peso leve), Red Hat Mono (rótulos, medidas, horários, timecode).
Regras
- Composição assimétrica: nome à esquerda com a segunda linha recuada, espelho à direita.
- Um botão cheio por tela (âmbar). O resto é link sublinhado ou contorno âmbar.
- Italiana nunca abaixo de ~18px (é fina demais). Texto corrido em Jost leve.
- Animação:
data-sobeno hero,data-revelaabaixo. Lâmpadas e REC param emprefers-reduced-motion. - Texto na primeira pessoa, com voz de atriz real: prático, de bastidor ("minha booker", "antes do teste"), sem adjetivo vazio.
Adaptar à marca do cliente
- Troque só o âmbar (
--d-primary) se o artista tiver cor própria, mantendo um tom de luz quente. O fundo escuro é a alma do design; não clareie. - Ator: troque o recado do espelho e o bilhete; medidas passam a terno/camisa/calçado.
- Modelo sem atuação: remova ordem do dia e claquete, dobre as digitals e mantenha o comp card.
- Cantora/bailarina: a lista de ensaio vira repertório ou técnicas; a claquete vira "vídeo de palco".
Dois arquivos.
Um prompt.
O Camarim 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 Camarim.