Lobby.
Recepción de hotel de los años 30 reinterpretada: verde botella, latón, crema y terracota, con ventanas en arco con abanico, placas de puerta, ficha de check-in y llavero antiguo. Sobrio y con carácter de lugar, no de sitio de reservas.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Marcellus
- Texto
- Karla
ParaViajeros de 25 a 60 años que prefieren un lugar con historia a una cadena de hoteles; negocio pequeño que quiere reservas directas
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaViajeros de 25 a 60 años que prefieren un lugar con historia a una cadena de hoteles; negocio pequeño que quiere reservas directas
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Marcellus en los títulos, Karla en el texto.
TítulosMarcellus
Aag!
Lobby en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoKarla
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.
- edificio antiguo, fachada o interior con historia
- marca en verde, dorado, vino o terracota
- negocio que quiere evitar la comisión de las plataformas de reserva
- pocas habitaciones o unidades con personalidad
- resort de playa u hotel familiar colorido
- tech/SaaS
- marca joven y vibrante
- precio bajo y volumen
- clínica o salud
Tono
Lo que lo hace Lobby
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Lobby 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 Lobby.