Sais Beach Living Hotel
Identidade Visual
Referência visual oficial da marca. Ponta Verde · Maceió, Alagoas. Use este guia para garantir consistência em todos os pontos de contato — digital, impresso e comunicação.
Paleta de Cores
Cores derivadas do ambiente de praia e natureza alagoana — areia, ouro, terra e mar. Paleta quente e sofisticada com profundidade escura.
Cores primárias
Escala Gold
Escala Dark
Escala Areia
Tokens — referência completa
| Token | Valor | Uso |
|---|---|---|
| --sais-gold | #8B7240 | CTAs, destaques, logotipo dourado |
| --sais-gold-deep | #6A5530 | Hover do gold, estados ativos |
| --sais-divider | #CFC19A | Linhas divisórias, bordas suaves |
| --sais-areia | #EBE3CF | Textos sobre escuro, fundos |
| --sais-cream | #F5F0E4 | Fundos muito claros |
| --sais-dark | #2B1A0D | Fundo principal, sidebar |
| --sais-dark-800 | #3A1F0E | Seções alternadas escuras |
| --sais-mid | #6B4E2E | Texto corpo, tons intermediários |
| --sais-branco | #FAFAF8 | Texto puro sobre escuro |
Tipografia
Domaine Sans Text Regular e Italic — para todos os textos. Domaine Display — exclusivamente para numerais e tarifas. Hierarquia por peso e tamanho, não por família.
Viva o melhor
do litoral alagoano
Uma experiência à beira-mar em Ponta Verde
Quartos com vista para o mar, conforto e design
Uma hospedagem pensada para quem busca o equilíbrio entre luxo e autenticidade
O Sais Beach Living Hotel nasceu da vontade de oferecer uma experiência genuína no litoral de Maceió. Cada detalhe — da arquitetura ao serviço — foi pensado para que o hóspede se sinta em casa, com toda a sofisticação que o destino merece.
Check-in a partir das 14h · Check-out até as 12h · Ponta Verde, Maceió
Ponta Verde · Maceió · Alagoas
Temporada Alta
"O mar de Alagoas tem uma luz que não existe em nenhum outro lugar do mundo. O Sais captura isso em cada detalhe."
Uso: feature cards, hero prices, métricas de destaque — nunca em parágrafos ou títulos textuais.
Tokens de tipografia
| Token | Valor |
|---|---|
| --sais-font-display | 'Domaine Display' — numerais e tarifas apenas |
| --sais-font-body | 'Domaine Sans Text' — todo o restante · Regular ou Italic |
| --sais-text-h1 | clamp(2.25rem, 5vw, 3.75rem) |
| --sais-text-h2 | clamp(1.625rem, 3.5vw, 2.5rem) |
| --sais-text-h3 | clamp(1.25rem, 2.5vw, 1.75rem) |
| --sais-weight-light | 300 |
| --sais-weight-regular | 400 |
| --sais-weight-medium | 500 |
| --sais-weight-bold | 700 |
| --sais-weight-black | 900 |
Espaçamento & Grid
Escala em base-4. Container máximo de 1200px com 12 colunas em desktop, 8 em tablet, 4 em mobile.
Escala de espaçamento
Grid de 12 colunas (desktop)
Sombras & Bordas
Sombras baseadas na cor escura do sistema — nunca preto puro. Bordas sempre 0 de radius para manter a estética retilínea da marca.
Sombras
Border Radius
0 (padrão)
2px
4px
8px
pill
⚠ Botões, cards e inputs da marca usam border-radius: 0 — estética retilínea e arquitetônica.
Bordas
| Token | Valor |
|---|---|
| --sais-border | 1px solid rgba(139,114,64,0.15) |
| --sais-border-medium | 1px solid rgba(139,114,64,0.28) |
| --sais-border-gold | 1px solid rgba(207,193,154,0.45) |
| --sais-border-focus | 2px solid var(--sais-gold) |
Motion
Transições intencionais — rápidas para feedback imediato, lentas para entradas de conteúdo. O movimento reforça a calma e sofisticação da marca.
Parallax — Profundidade suave ao rolar
Parallax scroll · role a página para sentir o efeito
Viva o melhor
do litoral alagoano
Use .sais-parallax + .sais-parallax__bg.
Desloca o fundo em ~18% do offset de scroll. Sempre com will-change: transform.
Animate In — Entrada gradual ao rolar
Adicione data-animate ao elemento.
O JS adiciona .is-visible via IntersectionObserver quando entra na viewport.
Botões
Hierarquia de ação clara: CTA dourado para conversão principal, areia para destaque secundário, outline para ações terciárias.
Microcopy de conversão
Badges
Indicadores contextuais — usados com moderação para sinalizar categorias, status e atributos especiais.
Tokens de badges
| Classe | Uso |
|---|---|
| .sais-badge--authority | Gold · diferenciais premium, prêmios, destaques |
| .sais-badge--info | Areia · informação temporal, datas, condições |
| .sais-badge--location | Areia suave · localização, geolocalização |
| .sais-badge--capacity | Divider · capacidade, disponibilidade |
| .sais-badge--required | Dark · obrigatoriedade, avisos |
Cards
Quatro tipos de card para contextos distintos: quarto, feature numérica, prova social e informação prática.
Card de Acomodação
Suíte Beira-Mar
Vista panorâmica para o mar, varanda privativa, cama king size e banheira de imersão.
A partir de R$ 890 / noiteSuíte Garden
Jardim privativo, ducha ao ar livre, climatização silenciosa e decoração contemporânea.
A partir de R$ 690 / noiteQuarto Deluxe
Conforto elegante com vista parcial para o mar, cama queen e varanda compartilhada.
A partir de R$ 490 / noiteFeature Card
Prova Social
Uma das hospedagens mais memoráveis que já tive em Alagoas. O ambiente, a atenção e a localização são simplesmente impecáveis.
O Sais tem tudo que buscamos — privacidade, conforto e aquele ar sofisticado sem ser pretensioso. Voltamos todo ano.
Info Card
Formulários
Inputs com estados claros: padrão, foco (gold), erro (vermelho) e sucesso (verde). Sempre fundo escuro translúcido.
Accordion
Usado para FAQs, políticas e informações de serviços. Um item abre por vez — transição suave com cubic-bezier.
Ícones
Biblioteca: Lucide Icons. Estilo: stroke, stroke-width 1.5, sem fill. Tamanho base: 20×20px. Cor padrão: herda do contexto.
Tamanhos
Biblioteca: Lucide Icons · stroke-width sempre 1.5 · nunca fill · cor herda do elemento pai
Sticky CTA
Barra fixa de conversão — aparece após rolar 40% da página. Contém preço, resumo e botão principal. Z-index var(--sais-z-sticky).
Em produção: position:fixed;bottom:0 · aparece via JS após scroll trigger · translateY(100%) → translateY(0)
Seções Modelo
Templates de seção para a landing page. Cada padrão tem variação de fundo escuro e claro.
Hero — Fundo escuro com headline e CTA
Viva o melhor
do litoral alagoano
12 suítes exclusivas a poucos passos do mar. Hospedagem contemporânea onde o design encontra a natureza de Alagoas.
Split — Imagem + Texto
Suítes pensadas para quem exige o melhor
Cada espaço foi projetado com atenção obsessiva ao detalhe — desde a escolha dos materiais até a posição estratégica das janelas para capturar a luz do mar.
Features — Grid de atributos
Uma experiência que você não encontra em outro lugar
Imagens & Logo
Critérios para seleção de imagens e regras de uso do logotipo em todos os contextos.
Logotipos — variações por fundo
Fundo escuro · Logo + Tagline Branco
Fundo claro · Logo + Tagline Preto
Fundo escuro · Logo + Tagline Dourado
Fundo escuro · Logo Branco
Fundo claro · Logo Preto
Fundo mid · Logo Dourado
Fundo escuro · Selo Branco
Fundo escuro · Selo Dourado
Fundo claro · Selo Preto
Diretrizes de fotografia
Checklist de Qualidade
Verifique estes itens antes de publicar qualquer peça de comunicação da marca Sais.
O que Evitar
Erros comuns que comprometem a identidade da marca. Cada item documenta o porquê da restrição.
✓ "Últimas disponibilidades para o período."
Acessibilidade
Conformidade com WCAG 2.1 AA. Luxo acessível — excelência não exclui.
Pares de contraste aprovados
Princípios de Design
Os valores que guiam cada decisão visual e de comunicação da marca Sais.
Ponta Verde · Maceió, Alagoas