--- name: Heritage Editorial description: Quiet luxury editorial para uma assessoria de eventos humana, precisa e atemporal. --- # 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.