Camarim.
Book de actriz, actor o modelo como el camerino antes del estreno: espejo con bombillas encendidas, comp card de agencia, digitales en polaroid y trabajos en orden del día. Oscuro cálido, ámbar de bombilla y un toque de labial.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Italiana
- Texto
- Jost
ParaDirectores de casting, bookers y directores que evalúan a un artista antes de la audición
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaDirectores de casting, bookers y directores que evalúan a un artista antes de la audición
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Italiana en los títulos, Jost en el texto.
TítulosItaliana
Aag!
Camarim en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoJost
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- artista que trabaja con agencia (booker)
- portafolio personal de una sola persona
- teatro, TV, publicidad y moda
- empresa o producto
- tienda con catálogo
- marca que pide tema claro y alegre
- tech/SaaS
Tono
Lo que lo hace Camarim
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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".
Dos archivos.
Un prompt.
Camarim se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Camarim.
