# M3 · «Ateliê»

**Referência:** Orenda — `~/projects/inspira/library/items/2026-08-17-orenda-template-webflow-io/`
**Família:** `dark-atelier-editorial` — Ateliê editorial escuro

## O que a família é

> *«Fundo quase preto do princípio ao fim, sem secções brancas a interromper o
> percurso. Uma serifa alta e de grande contraste assina os títulos, apoiada por
> rótulos em versaletes de tracking largo. Fotografia real flutua em cartões de
> cantos muito arredondados sobre o preto, e um único acento vivo marca botões,
> palavras e números de prova.»*

## Porque é que serve a EAB, e porque é a mais arriscada

**Serve** porque a EAB não é uma fábrica qualquer: 36 anos, mesma geração
fundadora, especialização na gelificação do látex. Um registo de ateliê trata
isso como ofício e não como commodity. E porque **nenhuma das cinco da 1.ª volta
usava serifa** — é a lacuna mais óbvia daquela ronda.

**É a mais arriscada** porque o comprador é B2B industrial e quer números. Se
sair «luxo», falha. O contrapeso está na tabela: a serifa assina, os dados
mandam.

## O que copiar da estrutura

- **Fundo escuro contínuo do topo ao rodapé.** Nenhuma secção clara a
  interromper — é a regra que define a família.
- **Hero assimétrico a 3 colunas:** imagem + número de prova à esquerda, título
  gigante ao centro, marca de confiança + segunda imagem à direita.
- **Título enorme em serifa de alto contraste**, com **uma palavra no acento**.
  No original: `INTERIORS THAT WIN BY **DESIGN**`.
- **Números de prova na mesma serifa dos títulos**, nunca no corpo.
- **Rótulos, navegação e eyebrows em maiúsculas com tracking largo**, sempre.
- **Eyebrow com ponto** (`• MATERIAIS`) e barras de palavras-chave separadas por
  ponto.
- **Botões em pílula**, um cheio no acento e um contornado.
- **Fotografia em cartões de cantos arredondados** a flutuar sobre o preto.

⚠️ **Adaptação:** os cantos «muito arredondados» do original brigam com o
«industrial na estrutura» da marca. Puxa para **12–16 px** — arredondado a
sério, mas não cápsula.

## A paleta

Escura contínua, na estrutura do original (`#000000` · `#161616` · `#1C1C1C` ·
`#2A2A2A` · branco · `#8A8A8A`), com **o acento alterado**.

🔴 **O acento NÃO pode ser o `#57672B` da marca:** mede **2,83:1** sobre preto e
é ilegível. O original usa um amarelo-lima `#E6E646`.

**Propõe um verde-lima derivado da folha** — a mesma família cromática, subido em
luminosidade até passar o contraste sobre `#000000`. Ponto de partida:
**`#C9DE4A`**. **Mede-o antes de o usares** e escreve o número no relatório. A
folha do logótipo continua `#57672B` porque a arte não se toca — e é justamente
isso que faz o acento ter de ser outro tom.

## A animação

É a variante onde o movimento mais pesa, porque o preto contínuo pede ritmo.

- **Entrada por linha de título:** cada linha da serifa sobe de baixo com
  `clip-path`, desfasada 80 ms entre linhas.
- **A palavra do acento acende depois** das outras, com 200 ms de atraso.
- **Números de prova contam** ao entrar no viewport.
- **Cartões de fotografia com paralaxe curta** (translação ≤ 24 px) e
  `scale(1.03)` lento no hover.
- **Filete que se desenha** por baixo de cada rótulo de secção.
- Curvas suaves e longas (600–900 ms). Nada mecânico — esta é a variante
  «respirada».

## O risco

Dois. **Fotografia:** a família pede fotografia quente e real em cartões, e as
nossas são de produto sobre fundo claro — vão precisar de tratamento para
assentar no preto. **Registo:** é a variante que mais facilmente escorrega para
«luxo» e deixa de falar com um comprador de palmilhas.