Camarim.
Book de comédienne, comédien ou mannequin façon loge avant la première : miroir aux ampoules allumées, comp card d'agence, polaroids de digitals et réalisations dans l'ordre du jour. Sombre et chaud, ambre d'ampoule et touche de rouge à lèvres.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Italiana
- Texte
- Jost
PourDirecteurs de casting, bookers et réalisateurs qui évaluent un artiste avant l'audition
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourDirecteurs de casting, bookers et réalisateurs qui évaluent un artiste avant l'audition
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Italiana pour les titres, Jost pour le texte.
TitresItaliana
Aag!
Camarim en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteJost
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- artiste qui travaille avec une agence (booker)
- portfolio personnel d'une seule personne
- théâtre, télévision, publicité et mode
- entreprise ou produit
- boutique avec catalogue
- marque qui demande un thème clair et joyeux
- tech/SaaS
Ton
Ce qui fait Camarim
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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".
Deux fichiers.
Un prompt.
Camarim devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Camarim.
