Camarim.
Actress, actor or model portfolio styled as the dressing room before opening night: mirror with lit bulbs, agency comp card, Polaroid digitals and work in call-sheet order. Warm dark, bulb amber and a touch of lipstick red.
- Type
- Landing page
- Theme
- Dark
- Headings
- Italiana
- Body
- Jost
ForCasting directors, bookers and directors evaluating an artist before the audition
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForCasting directors, bookers and directors evaluating an artist before the audition
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Italiana for headings, Jost for body text.
HeadingsItaliana
Aag!
Camarim in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyJost
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.
- artist who works with an agency (booker)
- personal, one-person portfolio
- theater, TV, advertising and fashion
- company or product
- store with a catalog
- brand that needs a light, cheerful theme
- tech/SaaS
Tone
What makes it Camarim
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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".
Two files.
One prompt.
Camarim 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 Camarim.
