# Design System — Hotel Sistema de tokens e componentes para o nicho **hotel**. Tematização por demo via `themeJson`. Estrutura semântica e escalas fixas; cor, tipografia e densidade variam por posicionamento. > Regra de ouro: **fotografia manda**. Tipografia se subordina à imagem. Componentes não competem com a foto — emolduram. --- ## 1. Tokens ### 1.1 Cores semânticas | Token | Função | Boutique urbano | Pousada praia | Lodge serra | |---|---|---|---|---| | `--color-primary` | Marca, divisores, CTAs secundários | `#1B1B1B` | `#3FA9C9` | `#4F6B3A` | | `--color-secondary` | Apoio, legendas, ícones | `#7B6E5C` | `#E87858` | `#A18A65` | | `--color-accent` | "Reservar agora", melhor preço, badge | `#B5573A` | `#E8B23C` | `#C77F1A` | | `--color-bg` | Fundo da página | `#E8E2D6` (linho) | `#F5EBD6` (areia) | `#1F1A14` (madeira escura) | | `--color-surface` | Card de quarto, painel buscador | `#FFFFFF` | `#FFFFFF` | `#2A231B` | | `--color-text` | Texto principal | `#1B1B1B` | `#2A2820` | `#E8DFCC` | | `--color-muted` | Metadata, legenda foto | `#7B6E5C` | `#7A6E55` | `#A89E88` | Aux: `--color-border`, `--color-success`, `--color-warning`, `--color-danger`. Validar contraste sobre foto **com overlay** (gradient escuro/claro 30–50%). ### 1.2 Tipografia | Demo | `--font-heading` | `--font-body` | |---|---|---| | Boutique urbano | Fraunces / GT Super (serif editorial) | Inter / Söhne | | Pousada praia | Recoleta / DM Serif Display (display vintage) | Karla / Inter | | Lodge serra | Cormorant Upright / Canela Deck uppercase wide | Inter / Untitled Sans | Escala (rem): | Token | rem | px | Uso | |---|---|---|---| | `text-xs` | 0.75 | 12 | legais, metadata foto | | `text-sm` | 0.875 | 14 | badges, links footer | | `text-base` | 1.0 | 16 | corpo | | `text-lg` | 1.125 | 18 | lead | | `text-xl` | 1.25 | 20 | preço pequeno | | `text-2xl` | 1.5 | 24 | título de card | | `text-3xl` | 1.875 | 30 | título seção | | `text-4xl` | 2.25 | 36 | hero mobile | | `text-5xl` | 3.0 | 48 | hero tablet | | `text-6xl` | 3.75 | 60 | hero desktop | | `text-7xl` | 4.5 | 72 | hero editorial premium | Tracking: `tight (-0.02em)` em display grande, `wider (0.18em)` em kicker uppercase. ### 1.3 Espaço (4px) `0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32`. - Padding lateral mobile: `5` (20px). Desktop: `8`/`12`. - Espaço entre seções: `20` mobile, `32` desktop (hotel respira). - Hero ocupa 80–100% do viewport altura em desktop. ### 1.4 Raio | Token | Valor | Uso | |---|---|---| | `--radius-none` | 0 | demos lodge / boutique brutalista | | `--radius-sm` | 4px | inputs, badges | | `--radius-md` | 8px | cards padrão | | `--radius-lg` | 16px | cards quarto destaque | | `--radius-xl` | 24px | painel buscador, hero card | | `--radius-full` | 9999px | pílulas, ícones circulares | Boutique urbano tende a `radius-none/sm` (editorial). Praia tende a `radius-lg/xl` (orgânico). Lodge tende a `radius-none/sm` (técnico). ### 1.5 Sombra | Token | Valor | Uso | |---|---|---| | `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.04)` | inputs em foco | | `--shadow-md` | `0 8px 24px rgba(0,0,0,0.06)` | card de quarto | | `--shadow-lg` | `0 30px 60px rgba(0,0,0,0.18)` | buscador flutuante sobre hero | --- ## 2. Componentes-base ### 2.1 Botão (`btn`) **Variantes**: `btn-primary`, `btn-accent` (reserva), `btn-ghost`, `btn-on-photo` (com fundo glass/blur para usar sobre foto). **Tamanhos**: `sm` (h-9), `md` (h-11), `lg` (h-14). Reserva sempre `lg` no buscador. **Estados**: hover (-8% luminância), focus (anel 2px accent), disabled (opacity 50), loading (spinner). **Do**: um botão de reserva dominante por viewport. **Don't**: empilhar "reservar agora" 4x na mesma tela. ### 2.2 Card de quarto (`card-room`) **Anatomia**: foto (4:3 ou 3:4) · nome do quarto · descrição curta (1 linha) · amenities chip (wifi, café, vista) · preço "a partir de R$ X" · CTA "Ver disponibilidade". Padding: `5`. Sombra: `--shadow-md`. Hover: elevação para `--shadow-lg` + scale(1.01) na foto. Estado `sold-out`: foto em grayscale, badge "Sem disponibilidade nestas datas". ### 2.3 Header Sticky. Transparente sobre hero (texto claro), vira `--color-surface` ao scrollar. Logo + nav + botão "Reservar". Mobile: hamburguer + drawer. Botão "Reservar" persiste como FAB no rodapé. ### 2.4 Hero fullbleed **Anatomia**: foto fullscreen (90–100vh) + overlay gradient bottom + headline editorial + sub + buscador flutuante. Variantes: - `hero-magazine`: headline assimétrico, número de "issue", buscador discreto à direita. - `hero-postcard`: ilustração + foto, tipografia desbotada vintage, buscador centralizado. - `hero-lodge`: foto natureza + ficha técnica (altitude, temperatura, distância) em mono, buscador inferior. ### 2.5 Booking bar (buscador) **Anatomia**: check-in date · check-out date · adultos · crianças · CTA "Buscar". Em desktop: barra horizontal flutuante sobre hero, sombra `--shadow-lg`. Em mobile: sticky no topo após scroll, abre fullscreen como overlay ao tocar. **Don't**: copiar widget genérico do Booking. Estilizar com tipografia e cor do demo. ### 2.6 Gallery Grid masonry ou carrossel horizontal por categoria (Quartos / Áreas comuns / Café / Experiências). Lightbox ao clicar. Lazy load. Legenda em italic abaixo da foto. ### 2.7 Map block Mapa estilizado (não embed cru do Google). Hotel marcado como pin tipográfico. Atrações próximas numeradas com distância em pé/carro. ### 2.8 Policy block Tabela ou lista limpa: check-in / check-out / cancelamento / crianças / pets / café / estacionamento. Sem letrinha miúda. ### 2.9 Testimonial Aspas grandes + texto curto (180 caracteres) + autor + origem (cidade/país) + data + estrelas. Nunca inventar — placeholders devem soar realistas. ### 2.10 FAQ Accordion. 6–10 perguntas focadas em objeções: estacionamento, café, cancelamento, transfer, crianças, pets, política de grupo. ### 2.11 Footer Colunas: marca + endereço · navegação · contato (WhatsApp, telefone, e-mail) · redes + selos (Cadastur quando aplicável). Faixa inferior: CNPJ, política, **disclaimer demo**. --- ## 3. Estados | Componente | Estados | |---|---| | Botão | default, hover, focus, active, disabled, loading | | Input data | default, focus, filled, error, disabled | | Card quarto | default, hover, selected, sold-out | | Gallery item | thumbnail, expanded | | Accordion | collapsed, expanded | --- ## 4. Regras de uso 1. **Foto manda.** Toda página tem pelo menos uma foto fullbleed dominante. 2. **Buscador acessível mas elegante.** Não copiar Booking. Estilizar tipografia, espaçamento, foco. 3. **Reserva direta com vantagem.** Sempre exibir o que o hóspede ganha reservando direto (welcome drink, late checkout grátis, melhor preço). 4. **Política transparente.** Cancelamento, check-in/out e regras visíveis ao lado do preço. 5. **Contraste sobre foto.** Texto branco sobre overlay gradient escuro (30–50%) é regra; texto direto sobre foto crua é proibido. 6. **WhatsApp como apoio.** FAB para tirar dúvidas pré-reserva; nunca substitui o buscador. 7. **Galeria categorizada.** Nunca um grid único de 60 fotos sem categoria. 8. **Mapa com referências.** Distância para atrações reais, não só pin. 9. **Linguagem pt-BR**, segunda pessoa formal-acolhedora. Sem "garantido", "imperdível", "único". 10. **LGPD + Cadastur** no rodapé. --- ## 5. Como tematizar Cada demo carrega o `themeJson` como `:root` no ` ``` Markup permanece idêntico; só os tokens mudam.