Lobby.
Recepção de hotel dos anos 30 reinterpretada: verde-garrafa, latão, creme e terracota, com janelas em arco com leque, placas de porta, ficha de check-in e chaveiro antigo. Sóbrio e com cara de lugar, não de site de reserva.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Marcellus
- Texto
- Karla
ParaViajantes 25-60 que preferem lugar com história a rede de hotel; negócio pequeno que quer reserva direta
Seções da página01/10Topo e navegação
Recepção de hotel dos anos 30 reinterpretada hoje: verde-garrafa profundo, latão, creme e terracota. Art déco sóbrio, com cara de lugar de verdade e não de template de booking.
ParaViajantes 25-60 que preferem lugar com história a rede de hotel; negócio pequeno que quer reserva direta
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Marcellus nos títulos, Karla no texto.
TítulosMarcellus
Aag!
Lobby em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoKarla
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.
- prédio antigo, fachada ou interior com história
- marca em verde, dourado, vinho ou terracota
- negócio que quer fugir da comissão de plataforma de reserva
- poucos quartos/unidades com personalidade
- resort de praia ou hotel familiar colorido
- tech/SaaS
- marca jovem e vibrante
- preço baixo/volume
- clínica ou saúde
Tom
O que faz ser Lobby
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Janela em arco com leque (
Janela): foto sempre em 4:5 com topo em semicírculo, caixilho e raios em SVG por cima. No hero os raios acendem em sequência. - 02
Ficha de check-in em papel creme pautado, levemente torta, com carimbo terracota girando devagar.
- 03
Chaveiro antigo de latão com o número do quarto, balançando.
- 04
Placa de porta (
Placa) em latão com parafusos: numeração dos quartos. - 05
Planta baixa em traço de latão ao lado de cada quarto (área, cama, vista, diária).
- 06
Quadro da recepção: feltro sulcado, letras em mono, horários com pontilhado.
- 07
Leque pequeno (
Leque) como logo e marcador de rótulo; filete duplo de latão (lobby-filete); papel de parede de escamas (lobby-leques). - 08
Chamada final dentro de um portal em arco com moldura dupla.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo verde-garrafa
#0f2a22; superfícies#133429/#183d31; rodapé e faixa de topo#0a1f19. - Texto creme
#efe6d2; secundário#b5ad98. Nada de branco puro. - Primária latão
#c9a45c: botões (gradientelobby-lataocom brilho no hover), filetes, numeração. - Destaque terracota
#b5543c, só em detalhe: carimbo, janela da planta, ponto do hotel no mapa, brilho da chamada final. - Fontes: Marcellus (títulos, números de quarto), Karla (texto), JetBrains Mono em caixa-alta espaçada para rótulos tipo ficha/placa.
- Cantos quase retos (
--d-radius: 2px). A curva do design vem dos arcos, não dos cantos.
Regras
- Seções
py-28, larguramax-w-6xl. Numeração em algarismo romano (I, II, III) ou placa de porta, nunca ícone colorido. - Ícones lucide finos (
strokeWidth 1.5), sempre em latão. - Máximo de 2 botões por tela; o de latão é o principal.
- Animações próprias (raios, carimbo, chaveiro, brilho) param em
prefers-reduced-motion.
Adaptar à marca do cliente
- Marca em vinho, azul-petróleo ou grafite: troque
--d-bg/--d-surface*mantendo o latão e o creme. - Cor própria dourada/cobre: troque
--d-primarye as cores do gradiente de.lobby-lataoe do chaveiro. - Fotos reais: entram dentro de
Janela(mesmo formato 4:5 em arco), o caixilho SVG continua por cima com opacidade menor. - Marca de cor saturada ou público infantil/praia: esse design não é o certo.
Dois arquivos.
Um prompt.
O Lobby 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 Lobby.