amare/DESIGN.md

---
name: Heritage Editorial
description: Quiet luxury editorial para uma assessoria de eventos humana, precisa e atemporal.
---

<!-- SEED: established with the user before implementation; re-run /impeccable document once there's code to capture the actual tokens and components. -->

# Design System: Heritage Editorial

## Overview

**Creative North Star: "Heritage Editorial"**

Amare deve parecer uma publicação de alta qualidade dedicada a encontros memoráveis: serena, criteriosa e tátil, sem parecer distante. Quiet luxury vem de composição, tipografia, ritmo e materialidade; nunca de ornamento acumulado. Marca une sensibilidade humana e precisão operacional.

Sistema usa papel quente, oliva botânico, fotografia curada e grandes pausas editoriais. Coração facetado da identidade funciona como selo, assinatura ou marca de capítulo. Conteúdo factual e imagens reais devem ocupar centro; interface recua para dar autoridade ao trabalho.

**Key Characteristics:**
- Editorial minimalista com assimetria controlada.
- Paleta orgânica, baixa excitação e contraste AA.
- EB Garamond como voz única, do display ao formulário.
- Superfícies planas, linhas finas e cantos retos.
- Fotografia ampla, tratada com saturação contida.
- Movimento lento e discreto, sempre dispensável.

## Colors

Paleta relaciona papel, tinta e vegetação. Cores comprometem regiões inteiras; não aparecem como acentos dispersos.

### Primary
- **Oliva Herança** (`#556B2F`): marca, botões primários, iconografia e estados interativos de maior ênfase.
- **Oliva Profundo** (`#3E5219`): títulos, áreas de contraste e hover do primário.

### Secondary
- **Sálvia Silenciosa** (`#8B9D77`): metadados, divisórias, legendas e acentos de baixa ênfase.

### Neutral
- **Papel Marfim** (`#FBF9F4`): fundo dominante e base editorial.
- **Papel Profundo** (`#F0EEE9`): blocos tonais, formulários e pausas entre capítulos.
- **Papel Arquivo** (`#E4E2DD`): estados passivos e camadas secundárias.
- **Tinta Oliva** (`#1B1C19`): texto de leitura e contraste principal.
- **Tinta Suave** (`#5D6155`): texto secundário e apoio.
- **Linha Botânica** (`#C5C8B8`): bordas, regras e divisórias.
- **Branco de Prova** (`#FFFFFF`): texto sobre oliva e superfícies estritamente funcionais.

**The Paper Field Rule.** Papel Marfim ou Oliva Profundo deve dominar cada região; cartões brancos soltos não formam composição.

**The Honest Contrast Rule.** Texto longo usa Tinta Oliva sobre papel claro. Sálvia nunca substitui cor de leitura quando contraste cair abaixo de WCAG AA.

## Typography

**Display Font:** EB Garamond, Garamond, Georgia, serif
**Body Font:** EB Garamond, Garamond, Georgia, serif
**Label Font:** EB Garamond, Garamond, Georgia, serif

**Character:** Uma única família cria continuidade de livro e identidade. Contraste vem de escala, peso, caixa e espaçamento, não de mistura tipográfica.

### Hierarchy
- **Display** (500, `clamp(3rem, 7.7vw, 5.875rem)`, 0.94): mensagens de abertura; tracking negativo e largura curta.
- **Headline** (500, `clamp(2.375rem, 5.2vw, 4rem)`, 1.02): títulos de capítulo e chamadas editoriais.
- **Title** (500, `clamp(1.875rem, 4vw, 2.875rem)`, 1.08): serviços, casos e agrupamentos.
- **Body Large** (400, `clamp(1.25rem, 2vw, 1.5rem)`, 1.45): argumentos centrais e introduções, limitados a cerca de 34rem.
- **Body** (400, `1rem–1.125rem`, 1.5–1.6): leitura, descrições e conteúdo funcional.
- **Label** (600, `0.75rem–0.875rem`, 0.08em–0.14em, uppercase): navegação, metadados, campos e índices.

**The Single Voice Rule.** EB Garamond ocupa todas as funções. Não introduzir sans-serif como atalho para modernidade.

**The Locked Display Rule.** Displays usam tracking apertado, entrelinhas compactas e no máximo 10–13 caracteres por linha quando a composição permitir.

## Layout

Estrutura base usa grade central de 12 colunas no desktop e 4 no mobile, com largura máxima de `1120px`. Gutter responde entre `20px` e `64px`; margens largas funcionam como material premium, não espaço desperdiçado.

Composições editoriais alternam colunas assimétricas, imagens em diferentes proporções e blocos de leitura curtos. Formulários, listas e navegação mantêm alinhamento estrito. Ritmo estrutural usa múltiplos de `8px`; ajustes tipográficos usam `4px`.

Desktop aceita spreads, conteúdo deslocado e relações 5/7 ou 4/5. Nas aberturas narrativas com fotografia, o spread padrão reserva 5/12 para o texto e 7/12 para a mídia; a coluna de leitura não passa de 470px, e o título mantém quebra normal. Mobile lineariza a ordem para texto seguido da fotografia sem esconder conteúdo essencial e mantém CTA acessível. Fotografia pode ocupar viewport amplo, desde que texto e ação permaneçam legíveis.

**The Editorial Rhythm Rule.** Seções alternam imagem, texto, densidade e silêncio; repetição de grades idênticas por toda página é proibida.

## Elevation & Depth

Sistema é plano e tátil. Profundidade nasce de campos tonais, sobreposição editorial, recorte fotográfico e regras de 1px. Sombras não aparecem em conteúdo regular. Overlays estritamente funcionais podem usar difusão ampla com oliva em baixa opacidade; nunca sombra curta e cinza de cartão SaaS.

Cabeçalho pode usar Papel Marfim translúcido e desfoque discreto quando sobreposto ao conteúdo. Estado hover muda tom, linha ou deslocamento mínimo; não eleva cartões.

**The Tonal Layer Rule.** Troca de papel precede qualquer sombra como mecanismo de hierarquia.

## Shapes

Linguagem é arquitetônica e afiada: botões, inputs, contêineres e imagens usam cantos retos (`0px`). Bordas finas e cortes precisos remetem a papelaria, impressão e blocos editoriais.

Círculos ficam reservados para retratos ou indicadores que exigem forma circular. Coração facetado da Amare é geometria proprietária; não autoriza polígonos decorativos genéricos no restante da interface.

**The Sharp Edge Rule.** Arredondamento casual, pills e cartões flutuantes quebram identidade.

## Do's and Don'ts

### Do:
- **Do** usar espaço em branco como mecanismo de foco e cadência.
- **Do** tratar fotografia como conteúdo editorial amplo, com saturação e contraste contidos.
- **Do** preservar coração facetado como assinatura reconhecível, com respiro proporcional.
- **Do** usar linhas de 1px, campos tonais e alinhamento para construir hierarquia.
- **Do** manter estados de foco visíveis, navegação por teclado e movimento reduzido.
- **Do** marcar imagens demonstrativas e substituir por acervo autorizado antes da publicação.

### Don't:
- **Don't** usar gradientes, glassmorphism, brilhos, sombras de cartão ou superfícies glossy.
- **Don't** arredondar botões, inputs, imagens ou contêineres.
- **Don't** misturar famílias tipográficas sem redefinição explícita da identidade.
- **Don't** transformar oliva em pequenos acentos sobre uma página dominada por branco puro.
- **Don't** inventar cases, números, credenciais, clientes ou prova corporativa.
- **Don't** usar decoração de casamento genérica como corações, flores desenhadas ou dourado ornamental.