ADR-0005: Design System e Experiência de Leitura (Wiki & Blog)

Este documento especifica a decisão de design e os requisitos de interface (EARS) para o design de layouts visuais do gerador de sites estáticos.

1. Contexto e Motivação

Como uma Wiki de documentação técnica de alta performance, a facilidade de leitura e a rastreabilidade contextual são fundamentais para a Developer Experience (DX). A estruturação atual em HTML puro exige uma estilização modularizada que previna a fadiga visual e promova a acessibilidade (SEO / A11y), mantendo uma estética de luxo e simplicidade (Rich Aesthetics).

2. Decisão Arquitetural e de UX

Adotamos o framework utilitário *Tailwind CSS* para a composição dos estilos do Lustre SSR nos layouts modulares, sob as seguintes regras:

1. *Containerização de Leitura (Line Length):* - Para evitar fadiga ocular, a largura útil das colunas de texto é fixada em um número ideal de 65-75 caracteres por linha. - *Wiki Layout:* Largura do conteúdo principal delimitada em max-w-3xl (48rem). - *Blog Layout:* Largura útil delimitada em max-w-2xl (42rem) para leitura focada.
2. *Anatomia do Layout Wiki:* - *Header:* Logotipo e links globais corporativos. - **Sticky Sidebar (aside):** Menu lateral fixo (sticky top-20) para navegação hierárquica categorizada, com rolagem independente (overflow-y-auto). - *Breadcrumbs:* Trilha contextual (Início > [Categoria] > [Título]) no topo do artigo. - *Main Content:* Conteúdo em Djot renderizado.
3. *Anatomia do Layout Blog:* - *Header Centralizado:* Badge da categoria em rosa (pink-500), título grande (text-4xl text-white font-extrabold) e mocks de autor/data em tom secundário (slate-400). - *Foco Absoluto:* Omissão total de menus laterais ou links de navegação cruzada na área de leitura.
4. *Paleta de Cores Premium (Dark Mode):* - Fundo principal: bg-slate-950. - Textos principais: text-slate-300 (corpo) e text-white (títulos). - Bordas e divisores: border-slate-800. - Destaques interativos: pink-500, pink-400 e sky-400.

3. Requisitos EARS

*Requisitos Ubíquos (Ubiquitous Requirements)* - *UBQ-01 (Responsividade):* A interface da Wiki deve ocultar ou mover a Sidebar lateral em dispositivos móveis (telas menores que 768px) para evitar congestionamento na tela. - *UBQ-02 (Acessibilidade de Contraste):* Os textos e títulos devem manter contraste em conformidade com as diretrizes WCAG AA/AAA contra o fundo bg-slate-950.

*Requisitos Orientados a Eventos (Event-Driven Requirements)* - *EVD-01 (Destaque de Sidebar):* Quando o usuário estiver em uma determinada página Wiki, o link respectivo na Sidebar de navegação deve herdar a classe de destaque ativa (text-pink-500 font-semibold border-l-2 border-pink-500 pl-2).

*Requisitos Orientados a Estado (State-Driven Requirements)* - *STD-01 (Breadcrumbs Contextuais):* O layout de Wiki deve computar o nome da categoria pai e o título do documento para compor dinamicamente a trilha visual no topo do main container. - *STD-02 (Foco de Leitura no Blog):* O layout de Blog deve remover toda e qualquer Sidebar em telas de qualquer tamanho, mantendo o conteúdo centralizado horizontalmente no navegador.