Lobby.
A 1930s hotel reception reimagined: bottle green, brass, cream and terracotta, with arched fanlight windows, door plates, a check-in card and an old key fob. Sober and full of place, not a booking-site look.
- Type
- Landing page
- Theme
- Dark
- Headings
- Marcellus
- Body
- Karla
ForTravelers 25-60 who prefer a place with history over a hotel chain; small business that wants direct bookings
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForTravelers 25-60 who prefer a place with history over a hotel chain; small business that wants direct bookings
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Marcellus for headings, Karla for body text.
HeadingsMarcellus
Aag!
Lobby in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyKarla
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.
- old building, facade or interior with history
- brand in green, gold, burgundy or terracotta
- business that wants to avoid booking-platform commissions
- few rooms/units with personality
- beach resort or colorful family hotel
- tech/SaaS
- young, vibrant brand
- low price/high volume
- clinic or healthcare
Tone
What makes it Lobby
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Lobby 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 Lobby.