M23 — Decorative Type

Faixa horizontal com tipografia decorativa de grande dimensão que atravessa a página de um lado ao outro, com um pequeno efeito de movimento quando o utilizador faz scroll. Serve como elemento separador entre secções, dando ritmo visual e destaque à identidade tipográfica do hotel.

Campo	Valor
Módulo	M23 — Decorative Type
Estado	Rascunho
Figma Desktop	Abrir no Figma
Figma Mobile	Abrir no Figma
Figma Variantes	Abrir no Figma
Zoho Task	P894-T626
Criada	2026-04-21
Aprovada	—
Aprovada por	—

Screenshots de Referência

Desktop (1440px)

Mobile (375px)

Todas as variantes e temas

Links Figma: Desktop | Mobile | Todas as variantes

Descrição Geral

O Decorative Type é um módulo puramente visual: apresenta uma palavra ou curta expressão em tipografia de grande dimensão, repetida várias vezes ao longo de uma faixa horizontal que atravessa toda a largura da página. As repetições estão separadas por traços longos (ex: “Lorem Ipsum Dolor — Lorem Ipsum Dolor — Lorem Ipsum Dolor”) e o texto extravasa as margens do ecrã nos lados, criando um efeito de continuidade.

Quando o utilizador faz scroll na página, a faixa desloca-se ligeiramente na horizontal, criando um efeito subtil de profundidade. O módulo não tem botões, imagens (exceto na variante própria) nem outros elementos interativos — é pensado como respiração e transição entre secções de conteúdo.

Aparece tipicamente em páginas institucionais, páginas de apresentação de um hotel, entre módulos de conteúdo para dar ritmo, e em zonas onde o objetivo é reforçar a marca com um detalhe tipográfico.

Variantes

Variante 1 — Fundo branco

Como utilizador, quero ver uma faixa tipográfica limpa, com texto em destaque sobre fundo branco, para que o módulo funcione como uma pausa visual discreta e elegante entre secções claras de conteúdo.

Elementos visíveis:

Fundo branco
Texto em tipografia serifada de grande dimensão, cor do tema do hotel (geralmente dourada ou escura)
Texto repetido 3 vezes, separado por traços longos (em-dash)
O texto extravasa o ecrã à esquerda e à direita

Critérios de Aceitação:

A faixa ocupa toda a largura do ecrã
O texto aparece repetido, com traços de separação entre as repetições
O texto extravasa os limites do ecrã dos dois lados (parte do texto é cortada nas extremidades)
A faixa movimenta-se suavemente quando o utilizador faz scroll
O fundo é branco

Variante 2 — Fundo claro

Como utilizador, quero ver uma faixa tipográfica com fundo suave (bege/creme), para criar contraste entre secções de conteúdo com fundo branco.

Elementos visíveis:

Fundo de cor suave (bege, creme ou tom claro definido pelo tema do hotel)
Mesma estrutura de texto da variante 1

Critérios de Aceitação:

O fundo é uma cor suave definida pelo tema do hotel
Todos os outros comportamentos funcionam como na variante 1

Variante 3 — Fundo escuro

Como utilizador, quero ver uma faixa tipográfica com fundo escuro, para criar um contraste forte e um momento de destaque visual na página.

Elementos visíveis:

Fundo escuro (navy, púrpura escura ou outra cor escura do tema do hotel)
Texto em cor clara (dourado ou branco, consoante o tema)
Mesma estrutura de repetição e traços

Critérios de Aceitação:

O fundo é uma cor escura definida pelo tema do hotel
O texto é legível sobre o fundo escuro
Todos os outros comportamentos funcionam como nas variantes anteriores

Variante 4 — Imagem decorativa

Como utilizador, quero ver uma faixa horizontal com uma imagem decorativa (padrão, textura, detalhe arquitetónico) em vez de texto, para introduzir um elemento visual diferente entre secções de conteúdo.

Elementos visíveis:

Faixa horizontal com uma imagem (em vez de texto)
Versão para computador e versão para telemóvel
Sem efeito de movimento durante o scroll

Critérios de Aceitação:

A imagem ocupa toda a largura da faixa
A versão para computador é usada em ecrãs grandes; a versão para telemóvel é usada em ecrãs pequenos
A imagem não se movimenta durante o scroll

Interações do Utilizador

Este módulo é maioritariamente visual, com um único efeito automático:

Interação	Descrição
Fazer scroll na página	A faixa de texto desloca-se ligeiramente na horizontal, em sentido contrário ou a favor do scroll, criando um efeito subtil de profundidade

Notas adicionais:

O utilizador não interage diretamente com o módulo (não há cliques, botões nem links)
O movimento é sempre suave e limitado (o texto desloca-se no máximo cerca de 200 pixels em cada direção)
Utilizadores que preferem menos animação (configuração do sistema) não veem o movimento — a faixa fica estática
Na variante com imagem, o movimento não acontece — a imagem fica sempre estática

Elementos

Conteúdos geridos no backoffice para este módulo:

Elemento	Tipo	Obrigatório	Descrição
Texto decorativo	Título	Sim	Palavra ou expressão curta em destaque. O editor escolhe o nível de cabeçalho. O texto é repetido 3 vezes na faixa com traços de separação entre as repetições.
Imagem decorativa (computador)	Imagem	Não	Usado apenas na variante “Imagem”. Substitui o texto por uma faixa ilustrada. Dimensões recomendadas: ~1440×240 px
Imagem decorativa (telemóvel)	Imagem	Não	Usado apenas na variante “Imagem”. Versão da faixa ilustrada para telemóvel. Dimensões recomendadas: ~375×180 px

Nota: O texto é obrigatório quando o módulo é usado nas variantes de fundo branco, claro ou escuro. Se o editor preencher as imagens, o módulo passa automaticamente para a variante “Imagem” e o texto é ignorado.

Opções de Configuração

Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:

Opção	Valores possíveis	Valor padrão	Descrição
Fundo	Branco / Claro / Escuro	Branco	Cor do fundo da faixa (ignorada quando é usada a variante com imagem)
Direção do movimento	Automática / Esquerda / Direita	Automática	Sentido em que a faixa se desloca durante o scroll. Em “Automática”, o sistema alterna os sentidos quando há várias faixas na mesma página (a primeira vai para a esquerda, a segunda para a direita, etc.)
Ativar/Desativar	Ativo / Inativo	Ativo	Permite esconder o módulo sem o apagar

Comportamento Responsive

Elemento	Ecrã grande (computador)	Ecrã pequeno (telemóvel)
Faixa	Ocupa toda a largura do ecrã, texto em tamanho grande	Ocupa toda a largura, texto em tamanho ainda maior relativamente ao ecrã
Texto	Repetido 3 vezes com traços de separação	Repetido 3 vezes, os traços e as repetições laterais ficam cortadas nas extremidades
Efeito de movimento	Deslocamento horizontal subtil ao fazer scroll	Mesmo efeito, adaptado à velocidade e tamanho do ecrã
Imagem (quando usada)	Carrega a versão para computador	Carrega a versão para telemóvel
Altura da faixa	Adapta-se ao tamanho do texto (tipografia de grande dimensão)	Adapta-se — normalmente menor em altura, mas com texto proporcionalmente maior

Estados Visuais

Estado	Descrição
Inicial	A faixa aparece com o texto repetido, parcialmente cortado nas extremidades laterais
Durante scroll	A faixa desloca-se ligeiramente na horizontal (no máximo ~200 pixels em cada direção)
Fora da vista	Quando a faixa está fora da janela de visualização, o movimento pausa para poupar desempenho
Voltar a ficar visível	O movimento retoma a partir do ponto atual, sem saltos visuais
Preferência de menos animação	A faixa fica estática — não se movimenta durante o scroll
Variante com imagem	A imagem fica sempre estática, mesmo durante o scroll
Ecrã muito largo	As repetições continuam a ser visíveis com os traços entre elas
Texto muito longo	O texto mantém-se em uma linha; as repetições continuam lado a lado

Acessibilidade

O texto é apresentado com um título semântico (o editor escolhe o nível — H2, H3, etc.) para que os leitores de ecrã entendam a importância do texto no contexto da página
Os traços que separam as repetições são decorativos e são ignorados pelos leitores de ecrã
A faixa não contém elementos interativos, por isso não é necessário acesso por teclado
Utilizadores com leitor de ecrã ouvem o texto apenas uma vez, mesmo que visualmente apareça repetido
Utilizadores que configuram o sistema para “menos animação” não veem o movimento — a faixa fica estática
O contraste entre o texto e o fundo cumpre os requisitos de acessibilidade visual em todas as variantes (branco, claro, escuro) e em todos os temas
Na variante com imagem, a imagem tem uma descrição alternativa para leitores de ecrã (ou é marcada como decorativa quando o editor assim o indica)

Temas

O módulo adapta-se visualmente a cada hotel: a cor do texto, a tipografia e as tonalidades de fundo claro/escuro seguem a identidade visual do hotel.

Os 8 hotéis suportados:

Savoy Signature
Savoy Palace
Royal Savoy
Saccharum
The Reserve
Calheta Beach
Gardens
Hotel Next

Diferenças visuais observadas entre temas:

Savoy Palace — Texto em tom dourado sobre fundo branco, creme ou roxo muito escuro
Saccharum — Tom terra/castanho sobre bege, creme ou fundo escuro
Calheta Beach — Tipografia sem serifa em tom verde-azulado, variantes de fundo adaptadas ao tema
Hotel Next — Tipografia sem serifa em tom escuro, fundos neutros
Savoy Signature — Tipografia serifada clara sobre fundos escuros, preto ou creme

Em todos os temas, a estrutura, a repetição do texto e o efeito de movimento mantêm-se idênticos — apenas a cor do texto, o tom do fundo e a tipografia variam.

Changelog

Data	Estado	Descrição
2026-04-21	Rascunho	Versão inicial criada a partir do Figma e do código já implementado
2026-04-21	Publicada	Publicada no Docmost (nova página)