Lote 1foto
Réveillon com vista para a orla
Três diárias em meia pensão, ceia da virada inclusa e acesso às três águas.
a partir deR$ 2.808por noite
O sistema que veste a virada em três águas.
Componentes, requisitos e movimento para tudo que o Réveillon Jatiúca publica numa tela — da loja de reservas ao e-mail de confirmação. Base clara, menu escuro, e uma linha de horizonte que atravessa a página inteira.
Três águas. Uma virada só.
O Jatiúca é o único hotel de Maceió com o mar, a piscina e a Lagoa da Anta na mesma hospedagem.
A campanha não inventa um tema para a virada: ela nomeia o que a casa já tem. O 31 de dezembro é apresentado pelas três águas da propriedade, do amanhecer à meia-noite, e cada hóspede vive esses ambientes do seu jeito — sem percurso obrigatório e sem atividade programada para cada água.
-
Amanhecer
O mar
Abertura contemplativa: o horizonte do último dia do ano, visto de um resort pé na areia. A interface recua e a imagem manda.
-
Dia
A piscina
O momento mais solar da campanha: convivência e diversão em família. É onde a loja de reservas trabalha, com contraste alto e controle grande.
-
Noite
A Lagoa da Anta
O clímax: a celebração e a queima de fogos lançada de uma embarcação na lagoa. É a única cena em que o movimento tem permissão para aparecer.
Troque o Jatiúca por qualquer concorrente da orla e o conceito cai.
É esse o teste que um conceito precisa passar para ser próprio. As três águas não são uma metáfora de virada — são uma configuração física que só esta casa reúne, e é dela que saem a paleta, a narrativa e a ordem das telas deste sistema.
- Diferenciação
- Beira-mar, piscina e a Lagoa da Anta na mesma propriedade. Nenhum concorrente direto de Maceió reúne as três.
- Fidelidade
- O posicionamento institucional de resort pé na areia e a ideia de haver mais de um jeito de viver o Jatiúca ganham forma concreta.
- Público
- Contemplação a dois no mar, família na piscina, celebração coletiva à noite. Os personagens mudam entre as cenas; a unidade vem do lugar.
- Mecanismo
- As três águas dão concretude ao desejo de se hospedar durante a virada — o argumento deixa de ser preço e passa a ser experiência.
Arquitetura verbal
Quatro camadas que não se substituem. Confundi-las é o erro mais comum na produção: a tagline não vira título de peça, e o conceito nunca aparece escrito.
- Conceito
- A experiência de 31/12 organizada pelas três águas, na sequência amanhecer → dia → noite. Estrutura a campanha inteira e não aparece escrito em peça nenhuma.
- Naming
- Réveillon Jatiúca: a virada em três águas. Vive no logotipo e na assinatura. Grafia com acento em Jatiúca, sempre.
- Tagline
- Três águas. Uma virada só. Fecho de peça e de filme. Recorrente, não editável.
- Headline
- Do mar à lagoa, mais de um jeito de viver a virada. Varia por peça, público e fase — sem alterar o conceito.
Na fase de pré-lançamento só circula informação confirmada: nome, tagline e ambientes. Preço, lote, desconto e escassez de vaga dependem de definição comercial — por isso nenhum template deste sistema nasce com campo de preço preenchido.
Amanhecer, com vista para o mar
A primeira água é a mais escura e a mais silenciosa. Aqui o sistema usa fundo sólido, tipografia grande e quase nenhum controle — é o modo em que a interface recua para a imagem falar.
mar.900 · #002732O que o sistema exige de quem constrói com ele
Oito requisitos que não dependem de gosto. Cada um existe porque falhar nele quebra alguma coisa concreta — a leitura, o teclado, o dedo, a marca ou a regra editorial do evento.
Contraste de 4,5:1, sempre
Texto de corpo e placeholder acima de 4,5:1. Texto grande acima de 3:1.
O dourado é o caso perigoso: #e9a23b sobre a base clara dá 1,97:1 e é ilegível. Dourado entra como preenchimento com tinta por cima, nunca como texto sobre claro.
Foco de teclado visível
Todo elemento focável mostra um anel. Sem exceção, sem outline: none órfão.
Anel de 2 px em dourado com 3 px de deslocamento — a única aplicação em que o dourado aparece sozinho sobre claro, porque ali ele é forma, não texto.
WCAG 2.4.7 · nível AAAlvo de toque de 44 px
Altura mínima de qualquer controle interativo, inclusive em tabela e menu.
A venda acontece no celular, muitas vezes na praia e com uma mão só. Controle de 36 px é onde a reserva morre.
Botão pequeno: 36 px apenas fora de fluxo de compraPiso de 12 px para texto funcional
Rótulo, cabeçalho de tabela, badge e legenda param em 12 px.
Caixa alta come legibilidade: acima de 25 caracteres, o rótulo vira caixa e baixa.
Corpo mínimo 15 px · medida de 65 a 75 caracteresNúmero é sempre tabular
Preço, lote, data, mesa e contagem usam tabular-nums.
Valor que dança na coluna quando o dígito muda parece erro de sistema — e o cliente está comparando preço entre lotes.
R$ 1.480 · 125 mesas · 794 lugaresTodo movimento tem caminho reduzido
Cada animação responde a prefers-reduced-motion com alternativa real.
Reduzido significa menos deslocamento, não ausência de resposta: o retorno que confirma uma ação continua legível.
Conteúdo visível por padrão, script só realçaSó token, nenhum hex solto
Cor, espaço, raio, elevação e duração saem de variável.
--mar-700 é preenchimento; --anchor é o mesmo azul escurecido para texto passar em 5,53:1. Confundir os dois reprova contraste.
A língua da casa
Jatiúca com acento em qualquer peça pública. Controle nomeia a ação.
Nenhum campo de preço nasce preenchido: a oferta de 2026/2027 ainda não foi ratificada e o sistema não pode ser o lugar onde um valor vaza.
Erro diz o problema e a saída, sem pedir desculpaFundações
Os valores que todo componente consome. A escala de cor carrega a narrativa das três águas; a de espaço, grade e movimento carrega o ritmo.
Cor
Espaço
s2 · 8
s4 · 16
s5 · 24
s6 · 32
s7 · 48
s8 · 64
s9 · 96
Movimento
rápido130 ms · retorno imediato
base220 ms · troca de estado
lento420 ms · camada e overlay
focal760 ms · entrada autoral
curvacubic-bezier(.16,1,.3,1)
saídasempre mais rápida que a entrada
Grade e diagramação
Doze colunas no desktop, oito no tablet, quatro no celular. A calha é constante em 24 px; o que muda entre telas é a quantidade de colunas, nunca a largura da calha.
Colunas
12 col · calha 24 px · margem 24 px · máx. 1180 pxPontos de quebra
as três larguras que o sistema atende| Faixa | Largura | Colunas | Calha | Comportamento |
|---|---|---|---|---|
| Celular | até 620 px | 4 | 16 px | Bloco único, cards empilham, barra de reserva vira coluna |
| Tablet | 621 – 1040 px | 8 | 24 px | Duas colunas, carrossel mostra 2 a 3 cards |
| Desktop | acima de 1040 px | 12 | 24 px | Grade cheia, carrossel de 4 cards |
Formas de diagramação
arranjos aprovados sobre as 12 colunas12 · faixa cheia, hero e faixa de água
8 · conteúdo editorial
4 · apoio, resumo ou preço
6 · par simétrico
6
4 · card
4 · card
4 · card
3
3
3
3 · carrossel
7 · mapa do salão
5 · painel do setor
Tipografia
Três águas. Uma virada só.
Escolha o seu setor no salão
A queima é lançada da Lagoa da Anta, e o salão inteiro vira de frente para ela.
Imagem ilustrativa. Consulte condições no canal oficial de reservas.
Lote 1 · até 30 de outubro
R$ 1.480 · 125 mesas · 794 lugares
Assets da marca
Os arquivos do kit, em vetor, nas duas versões. O menu usa a versão clara do logotipo; o rodapé também. Símbolo isolado para espaço reduzido e sobreposição, selo para carimbo e papelaria, favicon para 16 e 32 px.
Dia, na piscina
A água mais clara é onde a interface trabalha: fundo pálido, contraste alto, controle grande e legível sob sol. É o modo padrão da loja de reservas.
mar.200 · #d2f3f6Componentes
Cada peça vem com os estados que a produção realmente encontra: repouso, passagem do mouse, foco, desabilitado, carregando, erro e vazio. Tudo abaixo é operável — clique, tabule, digite.
Botões
Primário para a ação da página, dourado para a conversão comercial, fantasma para a saída.
Barra de reserva de hospedagem
Período, quartos, adultos e crianças com idade até 12 anos. Os dois modos usam a mesma estrutura e trocam apenas os tokens de superfície.
Modo claro
Modo escuro
A política da casa é gratuidade de 0 a 5 anos e tarifa reduzida de 6 a 12 — por isso o seletor de idade é obrigatório, e não opcional.
Mapa de setores
Passe o mouse ou tabule pelos setores. No celular, toque.
Lagoa da Anta · queima de fogos
Fundo do salão
Setor A
Alta procura
Frente · orla e palco. O setor mais procurado por quem paga.
Mesas38
Lugares292
Vagas livres80
LoteLote 1
R$ 1.680
por lugar · valor de exemplo
Números de mesas e lugares vêm da planta oficial do salão. Preço, lote e vagas são exemplos — a oferta de 2026/2027 ainda não foi ratificada e nenhum valor aqui pode ir para peça pública.
Cards de oferta
Tag, foto, texto, preço e botão. A área de foto está marcada como reservada: a fotografia da campanha ainda não foi produzida.
Vertical
Famíliafoto
Virada em família, na piscina
Buffet kids, creche de 2 a 10 anos e suporte médico no espaço infantil.
a partir deR$ 3.140por noite
Últimas mesasfoto
Ceia da virada, convite avulso
Buffet completo, estação ao vivo e a queima lançada da Lagoa da Anta à meia-noite.
a partir deR$ 1.280por lugar
Horizontal
Lote 1foto
Pacote três águas · quatro noites
Do amanhecer no mar à virada na Lagoa da Anta, com ceia inclusa para dois adultos e duas crianças de até 12 anos.
a partir deR$ 9.640no período
Densidade da grade
Carrossel · 4 colunas
Lote 1foto
Suíte vista mar
Três noites, meia pensão.
R$ 2.808/ noite
Lote 1foto
Suíte família
Quatro noites, ceia inclusa.
R$ 3.140/ noite
Convitefoto
Ceia · setor A
Frente para a orla.
R$ 1.680/ lugar
Convitefoto
Ceia · setor D
Frente e palco.
R$ 1.480/ lugar
Disponívelfoto
Ceia · setor E
Fundo do salão.
R$ 980/ lugar
Disponívelfoto
Ceia · setor B
Fundo do salão.
R$ 1.180/ lugar
Campos
Falta o domínio depois do @. Exemplo: nome@dominio.com.br
Seleção e sinalização
Confirmado
A validar
Bloqueador
Lote 1
Oferta
Tabela
Coluna numérica alinhada à direita e tabular. Cabeçalho com scope.
| Setor | Posição | Mesas | Lugares | Situação |
|---|---|---|---|---|
| A | Frente · orla e palco | 38 | 292 | Alta procura |
| D | Frente · orla e palco | 27 | 234 | Alta procura |
| E | Fundo do salão | 28 | 126 | Disponível |
| B | Fundo do salão | 28 | 118 | Disponível |
| C | Intermediário | 4 | 24 | Sob consulta |
Sobreposições
Só informação confirmada: nome, tagline, ambientes. Nenhum campo de preço.
Entra a oferta ratificada, com período, valores, condições e canal de reserva.
Vazio e carregando
Nenhuma mesa selecionada
Escolha um setor no mapa para ver as mesas livres e o valor por lugar.
Noite, na Lagoa da Anta
A terceira água é o clímax, e é onde o movimento tem permissão para aparecer. Todo o resto do sistema se move o mínimo necessário para não roubar esta cena.
mar.900 · #002732Movimento de entrada e de saída
Há um único momento autoral nesta página: o horizonte, que atravessa as três águas com a onda derivando em contramão do scroll. Todo o resto é retorno de estado. Os blocos abaixo demonstram o par entrada e saída — role para cima e para baixo e observe que eles saem mais rápido do que entram.
EntradaSobe 26 px, desfoque de 6 px até zero, opacidade de 0 a 1.760 ms · cubic-bezier(.16,1,.3,1)
EscalonamentoIrmãos entram em cascata de 70 ms, com teto de 280 ms no total.delay 0 · 70 · 140 · 210 ms
Saída para cimaAo sair pelo topo: −18 px, escala 0,97 e desfoque de 4 px.220 ms · cubic-bezier(.4,0,1,1)
Saída para baixoMesma curva, direção invertida — o bloco recua para onde o leitor voltou.220 ms · direção espelhada
Deriva do horizonteA onda e o símbolo derivam 34 px em contramão do scroll.animation-timeline: view()
Movimento reduzidoCom
prefers-reduced-motion, nada some e nada desloca: o conteúdo já nasce visível.sem deslocamento, sem desfoqueRegra de implementação
O padrão é visível. O script só entra depois de confirmar suporte.
Nenhum bloco desta página está parado em
opacity: 0 esperando um observador. A classe que esconde só é aplicada quando
o script confirma IntersectionObserver e o visitante não pediu movimento
reduzido — se qualquer uma das duas condições falhar, a página inteira permanece legível.
A deriva vive em @supports
(animation-timeline: view()) e é puramente decorativa: onde não houver suporte, as
camadas ficam paradas.