# DESIGN.md — Especificação de Arquitetura de Informação & Design System
## Projeto: Acervo Digital — Padrão Vanguarda Internacional (Awwwards / FWA / Impeccable)

---

## 1. Visão Geral e Alinhamento Conceitual

O **Acervo Digital** é uma plataforma concebida para preservar, catalogar e democratizar o acesso a patrimônios culturais, artísticos e históricos. 

O alinhamento conceitual do projeto é categórico: **rejeitar o formato de catálogo administrativo burocrático ou de e-commerce de imagens**. O produto adota a estética visual e a usabilidade dos **sites mais bonitos do planeta** — projetos premiados com *Site of the Year* e *Site of the Month* no **Awwwards**, **FWA** e nos estúdios mundiais de maior prestígio (Resn, Basement Studio, Locomotive, Lusion).

---

## 2. Os 6 Mandamentos Estéticos Inegociáveis

1. **Dark OLED Puro (`#000000`) como Galeria Solene**:
   * O preto absoluto elimina qualquer tom cinza desbotado de "dashboard corporativo". Cria contraste infinito e faz as cores a óleo, gravuras e pátinas de bronze brilharem como em uma sala escura de museu com iluminação pontual direcionada.
2. **Tipografia Monumental Dual (Nobreza + Precisão)**:
   * **Serifa de Alto Prestígio** (*Cinzel* ou *Playfair*): Títulos heroicos (48px a 72px) para artistas, séculos e movimentos.
   * **Grotesca Geométrica Técnica** (*Plus Jakarta Sans* ou *Space Grotesk*): Para dados técnicos, dimensões físicas e facetas de catalogação.
3. **HUD de Vidro e Linhas de 1px (Padrão Basement Studio)**:
   * Bordas de 1px semi-transparentes (`rgba(255, 255, 255, 0.08)`) com `backdrop-filter: blur(20px)`.
   * A interface parece esculpida em placas de vidro lapidado, com dados apresentados com a precisão de um instrumento de alta relojoaria.
4. **Dinâmica Cinética Orgânica (Padrão Locomotive Scroll & Resn)**:
   * Transições fluidas com curvas de inércia Bezier: `cubic-bezier(0.16, 1, 0.3, 1)` entre 350ms e 500ms. O movimento tem peso físico natural.
5. **Proporção Sagrada da Arte (Masonry Adaptativo Real)**:
   * Vetado cortar (crop forçado) ou distorcer as obras para caber em grades quadradas uniformes. O layout se adapta à proporção nativa da peça.
6. **Interface Camaleão**:
   * Controles discretos que desaparecem suavemente durante a contemplação profunda da arte e ressurgem sob intenção ou movimento de cursor.

---

## 3. Paleta de Cores e Tokens Visuais

### 3.1 Tema Escuro (Identidade Primária / OLED Galeria)
* **Background Primário**: `#000000` (Preto puro absoluto)
* **Superfície 1 (Cards)**: `#0A0A0C`
* **Superfície 2 (Containers)**: `#141418`
* **Vidro Translúcido**: `rgba(18, 18, 22, 0.75)` com `backdrop-filter: blur(20px)`
* **Bordas & Divisores**: `rgba(255, 255, 255, 0.08)` a `0.15`
* **Texto Primário**: `#F4F4F6`
* **Texto Secundário / Metadados**: `#8E8E98`
* **Accent Gold / Curadoria**: `#E5B869`
* **Accent Ações**: `#38BDF8`

### 3.2 Tema Claro (Modo Estudo / Arquivo)
* **Background Primário**: `#F7F7FA` (Inspirado no Apple iOS human interface)
* **Card / Container**: `#FFFFFF`
* **Bordas & Divisores**: `rgba(0, 0, 0, 0.08)`
* **Texto Primário**: `#0E0E12`
* **Texto Secundário**: `#6B6B78`
* **Accent Gold**: `#B8860B`
* **Accent Ações**: `#0284C7`

---

## 4. Arquitetura de Informação & Telas-Chave

### 4.1 Home & Hub Heroico
* Entrada triunfal com tipografia monumental celebrando o peso histórico do acervo.
* Destaque rotativo da semana em alta definição com acesso em 1 clique ao visualizador IIIF.
* Eixos temáticos curados (século, tipologia, escola artística, narrativas históricas).

### 4.2 Catálogo & Busca Facetada
* Layout em Masonry fluido de colunas variáveis.
* Filtros em pílulas flutuantes: Domínio Público / CC0, Técnica, Século, Autor, Paleta Cromática.
* Hover states táteis com prefetching e blur-up progressivo sem flashes brancos.

### 4.3 Ficha do Objeto & Visualizador Imersivo (IIIF)
* 70% a 75% da viewport dominada pelo visualizador de alta resolução (OpenSeadragon).
* Cursor adaptativo inteligente com ampliação tátil suave.
* Painel sanfona lateral com ficha técnica em duas camadas:
  * *Camada Essencial*: Título, autor, datação, técnica, dimensões e status de direitos.
  * *Camada Pesquisa*: Proveniência, laudo de conservação, vocabulário Getty AAT e citação ABNT/Chicago pronta.

---

## 5. Benchmarks Mundiais de Referência

| Projeto | Destaque Visual | O que Absorver |
| :--- | :--- | :--- |
| **Tracing Art (Getty / Resn)** | *Awwwards Site of the Month* | Narrativa histórica, fundo solene, tipografia refinada. |
| **Basement Studio** | *Padrão Ouro Dark OLED* | Pure Dark `#000000`, botões pílula táteis, bordas 1px. |
| **Locomotive Studio** | *Agency of the Year* | Tipografia monumental, espaçamento generoso e respiro visual. |
| **Lusion** | *Site of the Year Winner* | Sensação tátil da matéria e luz dinâmica sobre as peças. |
| **The State of the Gallery** | *Site of the Day* | Microinterações com física fluida e interface discreta. |