# M1 · «Mostruário»

**Referência:** [70Materia](https://styles.refero.design/) — refero.design
**Família:** mostruário de arquitetura · `DESIGN.md` lido a 2026-08-18

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

> *«Architectural sample board on white paper — the UI is the mount, never the
> artwork.»*

## Porque é que serve a EAB

A EAB **vive de enviar amostras**. O pedido de amostra é uma funcionalidade que
o próprio cliente especificou por escrito, e a matéria — a espuma — é o assunto.
Uma interface que se assume como **moldura** e nunca como quadro é a tradução
literal disso. A 70Materia é uma biblioteca de materiais de arquitetura: pedra,
terrazzo, pigmento. Troca-se a pedra por espuma e a estrutura serve.

## O que copiar da estrutura

- **Página estreita: `max-width` 960 px.** Muito mais estreita do que o costume.
- **Gaps de secção de 100–180 px.** O vazio é a estrutura.
- **Hero de fotografia full-bleed, sem overlay, sem gradiente, sem texto por
  cima.** O primeiro ecrã é 100% material; a UI só aparece como nav.
- **Uma só família sans, sempre em peso 400.** Hierarquia por **tamanho e
  espaço**, nunca por bold. Aqui: **IBM Plex Sans 400** em tudo.
- **Companheira monoespaçada a 10–12 px**, `letter-spacing` 0.02–0.04em, para
  rótulos, navegação, botões e códigos de produto. Aqui: **IBM Plex Mono**.
- **Numerais tabulares (`tnum`) em tudo o que tem números.** A tabela das cinco
  formulações vive disto.
- **Raios: 0 em tudo, 3 px só nos botões.** O sistema é de aresta viva.
- **Botões: retângulos de 1 px de contorno**, fundo transparente. Só uma
  superfície cheia escura, usada com parcimónia.
- **Etiqueta de produto persistente** no canto inferior, em mono maiúsculo — uma
  legenda de museu.
- **Input sublinhado** (1 px em baixo), nunca caixa fechada.

## A paleta

Achromática, como a referência: **`#000000` · `#1E1E1E` · `#BABABA` ·
`#FFFFFF`**.

⚠️ **Adaptação declarada:** a 70Materia proíbe qualquer acento cromático — *«all
chromatic energy is outsourced to the product photography»*. A EAB tem uma folha
verde no logótipo, que não é negociável. **Resolução:** o verde existe **só
dentro da marca**. Zero verde em UI. Isso mantém o espírito da referência e
respeita a marca.

## A animação

⚠️ O `DESIGN.md` da referência **não descreve movimento** — é um documento de
tokens. O que se segue é derivado da estrutura, não copiado.

- **A revelação é de moldura, não de conteúdo:** ao entrar no viewport, cada
  secção revela-se por um filete de 1 px que se **desenha** da esquerda para a
  direita, e só depois o texto aparece. Lento, sem bounce.
- **A etiqueta de museu troca ao rolar:** o rótulo fixo no canto inferior
  esquerdo muda para o da amostra que está no viewport.
- **Nas amostras, `scale(1.02)` em 600 ms no hover**, sem sombra, sem borda.
- Curvas longas (`cubic-bezier(.2,0,0,1)`), 400–700 ms. Nada salta.

## O risco

**Depende de fotografia que não temos.** O hero full-bleed sem texto é 100%
imagem, e das 44 fotos só 4 passam dos 3000 px. Com o macro do granulado
funciona; com um plano de fábrica a sério funcionaria muito melhor. Regista isto.