Lobby.
Réception d'hôtel des années 30 réinterprétée : vert bouteille, laiton, crème et terre cuite, avec fenêtres en arc à éventail, plaques de porte, fiche d'enregistrement et vieux porte-clés. Sobre et plein de caractère, loin d'un site de réservation.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Marcellus
- Texte
- Karla
PourVoyageurs de 25 à 60 ans qui préfèrent un lieu chargé d'histoire à une chaîne d'hôtels ; petite structure qui veut des réservations directes
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourVoyageurs de 25 à 60 ans qui préfèrent un lieu chargé d'histoire à une chaîne d'hôtels ; petite structure qui veut des réservations directes
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Marcellus pour les titres, Karla pour le texte.
TitresMarcellus
Aag!
Lobby en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteKarla
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.
- bâtiment ancien, façade ou intérieur avec une histoire
- marque en vert, or, bordeaux ou terre cuite
- établissement qui veut éviter les commissions des plateformes de réservation
- peu de chambres/unités avec de la personnalité
- resort de plage ou hôtel familial coloré
- tech/SaaS
- marque jeune et vibrante
- petits prix et gros volume
- clinique ou santé
Ton
Ce qui fait Lobby
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Lobby 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 Lobby.