01Marca e voz

1.1Os dois nomes

1.2Logotipo

A marca escrita é QUAR.TOP — uma palavra única em EB Garamond regular, maiúsculas, com espaço entre as letras (tracking 0,14em) e o ponto colado entre R e T, sem espaço antes nem depois. O ponto é sempre terracota #C4502B.

1.3Símbolo

Sol de oito raios em terracota, traço fino, círculo central — desenhado em linha, nunca preenchido sólido pesado. Acompanha a marca escrita no topo e no rodapé.

1.4Personas e entrada

02Cores

2.1Base e tinta

O fundo de toda a interface é o creme da marca #F9F5EE (amostrado da arte original). Texto principal em ardósia profunda #3E4562; textos de apoio #6F6A60; rótulos apagados #A39C8E. Hairlines #E6DFCF e #D8D0BC.

2.2A paleta de sete

2.3Versões fortes (para carregar texto claro)

03A regra das pílulas

3.1As duas espécies

3.2Estados diferentes, cores diferentes

Estados ativos, de sucesso, de atenção e de informação nunca dividem a mesma cor — a cor comunica o estado:

3.3Uma coisa por pílula

Cada filtro é uma pílula independente — cidade, bairro e faixa nunca se fundem numa barra única. Em uma fileira, as pílulas rotacionam as cores fortes para nunca monotonizar em um tom só (foi o caso do "só verde" e do "só azul" corrigidos).

3.4Contra-exemplos registrados

3.5Respiro interno

O conteúdo da pílula começa longe da curva: o ícone ou texto inicial mantém pelo menos 12px de distância da borda esquerda em cápsulas — nunca colado no arredondamento.

04Tipografia

4.1As famílias

4.2Entrelinha (line-height)

4.3Caixa

• Títulos de seção em Title Case ("Explore Quartos Perto de Você")
• Menus, kickers e tags em CAIXA ALTA com tracking 0,14–0,22em
• Corpo em case normal — caixa alta nunca em parágrafo

05Respiros e espaçamento

5.1Escala

06Componentes

6.1Botões

Sempre pílula. Primário em terracota #C4502B; secundário em ardósia #4A5578; dentro de seção escura, botão secundário em papel claro com tinta escura. Sem bordas em botão de ação — borda só em rótulo não-clicável.

6.2Cards e superfícies

Superfície #FCFAF3, borda hairline #E6DFCF, raio 18px, sem sombra pesada — sombra só em elementos flutuantes (busca, pílulas de notificação do hero). Estrutura do card de quarto: ilustração pastel → tag maiúscula sobre a arte → título Garamond → local com pin → atributos rotativos → fileira do anfitrião.

6.3Ilustrações e ícones

Flat, geométricas, traço de tinta 2.6px, paleta pastel do capítulo 2, sem gradientes. Ícones de linha 1.6–1.8px, cantos arredondados, sempre terracota quando standalone.

6.4Movimento

Um único momento animado por tela (pílulas flutuantes do hero, 7s ease-in-out). Tudo respeita prefers-reduced-motion. Sem animação em texto, sem carrossel, sem parallax.

6.5Formulários

Campos com fundo branco-creme, borda 1px #D8D0BC, raio 10–12px, foco em tinta escura. Rótulo acima do campo, corpo pequeno. Botão de envio sempre primário terracota.

07Checklist de auditoria

Antes de qualquer entrega, o material passa pelos sete testes — todos nascidos de erros reais corrigidos na criação da plataforma:

• Pílulas: nenhuma na cor do fundo, nenhuma transparente, nenhuma pastel com texto claro — todas sólidas fortes com texto #FFFBF3
• Estados: ativo, sucesso, atenção e informação em cores diferentes
• Variedade: fileiras de pílulas rotacionam cores fortes — nunca monocromáticas
• Tipografia: EB Garamond 100% regular/itálica; entrelinha por tipo de bloco; títulos em Title Case; menus em caixa alta espaçada
• Marca: QUAR.TOP com o ponto colado; texto institucional em primeira pessoa (QUARTOP)
• Respiros: seções com ar, botões justos, equilíbrio antes/depois, nada colado na lateral esquerda
• Verificação visual: renderizar e olhar cada tela antes de declarar pronto — captura em página longa gera falso positivo, seções isoladas dão o veredito