# M2 · «Manifesto»

**Referência:** [Freitag](https://styles.refero.design/) — refero.design
**Família:** catálogo industrial suíço · `DESIGN.md` lido a 2026-08-18

## A frase que a referência usa para se descrever

> *«Swiss industrial catalog — a printed manifest of truck tarpaulins laid flat
> on poured concrete, where the only color is the recycled product itself.»*

## Porque é que serve a EAB

A Freitag faz malas com lonas de camião em fim de vida. A EAB faz espuma com
**borracha de pneus em fim de vida, pó de cortiça, caroço de azeitona, casca de
arroz e borra de café**. É a mesma história — matéria de segunda vida tratada
como argumento técnico e não moral — e a Freitag resolveu-a sem uma única
imagem de floresta.

O truque de assinatura da referência é o que a EAB precisa: **a página lê-se
como uma folha de especificação técnica ou uma guia de remessa**, não como uma
montra.

## O que copiar da estrutura

- **Grelha modular estrita:** hero 50/50 full-bleed, depois blocos de categoria
  a 3 colunas, depois **matrizes de produto a 6 colunas**.
- **Células de catálogo com filete de 1 px em todos os lados**, formando uma
  grelha contínua e regrada. Sem sombras, sem cartões soltos.
- **Tipografia comprimida e a puxar a maiúsculas.** Display a 48 px com
  `line-height` 0.97 e `letter-spacing` **-0.48 px** — o efeito de cartaz
  industrial comprimido.
- **`letter-spacing` de 0.04–0.05 em em tudo o que é ≤ 11 px**, para os rótulos
  lerem como números de série carimbados.
- **Pílulas em tudo o que é interativo:** `border-radius: 9999px` em botões,
  badges e controlos. **Retângulos não existem neste sistema.**
- **Etiqueta de estado** (NEW / BESTSELLER) em pílula, absoluta no canto
  inferior direito da imagem.
- **Comutador de língua e região** em dois contentores-pílula no topo direito.
- **Indicador de voltar ao topo:** só uma seta ↑, sem cromo de botão.
- **Sensação de carimbo, não de desenho.** Filetes finos, grelhas hairline,
  quase nenhuma profundidade.

## A paleta

Monocromática com um amarelo de aviso, como a referência:
**`#000000` · `#FFFFFF` · `#CACACA` · `#616161`** + **amarelo `#FFDD00`** em
faixas de destaque e fundos de ênfase.

⚠️ **Adaptação a testar e a medir:** o amarelo `#FFDD00` e a folha verde-oliva
`#57672B` do logótipo estão na mesma família cromática (amarelo-verde), por isso
devem conviver. **Se a olho brigarem, a faixa passa a bege `#EEE0C5`** e o
relatório diz porquê. Mede o amarelo com texto preto por cima.

## A animação

⚠️ O `DESIGN.md` da referência **não descreve movimento**. O que se segue é
derivado do registo de «guia de remessa».

- **Movimento mecânico, não orgânico:** as transições **encaixam**, não
  deslizam. 120–180 ms, `steps()` ou `ease-out` curto.
- **Fita de especificações a correr** no topo da matriz de produto: espessuras,
  densidades e larguras em mono, em marquee contínuo e lento. Pausa no hover.
- **Pílulas que se enchem** de preto no hover, com o texto a inverter.
- **As células da matriz revelam a linha de dados** (densidades, larguras) no
  hover, empurrando a altura da célula sem mexer nas vizinhas.
- **O número de prova conta** de 0 até ao valor quando entra no viewport.

## O risco

**A referência é uma loja e a EAB não vende online.** A matriz de 6 colunas
existe para SKUs; aqui vai servir formulações e serviços, que são 5 e 4. Se a
grelha ficar vazia, a variante perde a força — resolve com densidade de dados,
não com preenchimento.