Design System Zeide — v0.1

Para a ferramenta de coding: este documento + tokens.css são a especificação. Os tokens são a única fonte de cor/tipo/espaço — nada hardcoded. Os componentes usam o prefixo z-. A maquete viva está em wireframes.html (abre no navegador; já usa estes tokens).

1 · Princípios visuais#

1. Papel e tinta. O site parece um documento vivo: fundo marfim, tinta quente, serifas na narrativa. Nada de gradientes chamativos, glassmorphism ou animação gratuita.
2. A voz dele é a hierarquia máxima. Citações verbatim em serif itálico com o chip de timestamp — nenhum outro elemento pode competir com elas na página.

3. A taxonomia é visível sempre — cor + ícone + forma (nunca só cor):

   Tipo	Cor	Ícone	Forma
   ENTREVISTA	--c-entrevista	microfone	ponto cheio ●
   DOCUMENTO	--c-documento	folha	quadrado ■
   HISTÓRIA	--c-historia	globo	ponto vazado ○
   INFERÊNCIA	--c-inferencia	balão	losango ◇ + borda tracejada

   Graus de certeza sempre textuais/simbólicos: confirmado · provável · hipótese.

4. Sobriedade nos capítulos da Shoá. Telas/painéis de morte: sem parallax, sem hover lúdico, paleta reduzida, mais espaço em branco. Componente z-cw (aviso) antecede scans de documentos de morte.
5. Grande e legível. Base 18px, alvo de toque ≥ 44px, contraste AA em tudo (AAA no corpo).
6. O Memorial é cinema. Sempre sobre --memorial-bg (escuro), independentemente do tema.

2 · Tipografia#

• Serif (--font-serif, Source Serif 4): títulos, narrativa do Memorial, todas as citações dele. Itálico reservado à voz dele.
• Sans (--font-sans, Source Sans 3): UI, corpo, transcrição (leitura longa).
• Mono (--font-mono): timestamps [mm:ss], números de atos/sygnatury.
• Escala: --fs--1 a --fs-5 (1.25). Título de página: --fs-4 serif. Nunca justificar texto.
• Fontes self-hosted (woff2 em assets/fonts/) — sem chamadas a CDNs externos.

3 · Componentes (contratos)#

z-header#

Fixo no topo (--header-h), fundo --bg translúcido com blur leve. Esquerda: wordmark "Zeide" + tagline truncável. Centro/direita: nav (Jornada · Entrevista · Pessoas · Arquivo · Não sabemos · Guia · Sobre), z-lang-switch (PT/EN). Mobile: menu hamburger full-screen. (Toggle de tema retirado — tema único escuro, decisão 41.)

z-timestamp#

Chip mono [mm:ss] clicável. Estados: default (--ink-3), hover (--accent), .is-current (fundo --accent-soft). Clique → evento global seek(t). Sempre <button>, aria-label "Ir para mm:ss no vídeo".

z-quote#

A citação verbatim: serif itálico --fs-1, aspas tipográficas, barra lateral 3px --c-entrevista, z-timestamp ao fim + botão ▶ (12px de padding, alvo 44px). Fundo --c-entrevista-soft opcional (painéis). Nunca cortar com ellipsis automático — citações são curadas à mão.

z-player / z-pip#

Player HTML5 próprio. Modos: docked (na página Entrevista, 16:9, sticky no mobile), floating/PiP (--pip-w, canto inferior-direito, arrastável, --z-pip, sombra --pip-shadow; botões: play, ±10s, expandir, fechar), expanded (lightbox). Legendas WebVTT PT/EN, ligadas por padrão (PT). Emite timeupdate → sincronização. Persistência de posição (localStorage).

z-transcript / z-turn#

Container --container-narrow. Cada z-turn: rótulo do falante (MOJSIE em --c-entrevista, ITA em --ink-3, versalete), z-timestamp, texto. .is-current (sincronizado ao vídeo): fundo --accent-soft, scroll suave até o turno (respeitando reduced-motion). Abas Verbatim/Revisada (estado na URL: ?trilha=verbatim). Marcações [?]: sublinhado pontilhado + tooltip "por que não chutamos" (link ao método). Busca com highlight. Âncoras por fita (1–5).

z-timeline (a Jornada)#

Full-bleed, scroll horizontal com scroll-snap por capítulo; teclado ←/→ (evento a evento), PgUp/PgDn (capítulo). z-ruler: régua superior com anos — escala distorcida por capítulo; trechos comprimidos exibem hachura e título "anos comprimidos" no hover (honestidade da régua). z-chapter: cabeçalho fixo do capítulo (nome + intervalo + contador z-more-count "+N detalhes" que expande o nível 2). Trilha vida (linha superior, eventos z-event-dot) e z-track-world (linha inferior, tom --c-historia, toggle no filtro). z-event-dot: forma+cor da taxonomia, título curto ao lado; estados hover/focus/.is-open/.is-current (sincronizado ao vídeo). Mobile: vira vertical (coluna única, mundo intercalado com etiqueta).

z-filterbar#

Barra sticky sob o header na Jornada: chips da taxonomia (multi), pessoas, lugares, toggle "o mundo", toggle Mapa (v3), busca. Estado na URL (?tipo=doc&pessoa=majer). Chip ativo: fundo soft da categoria + .

z-event-panel#

Desliza da direita (--panel-w, --z-panel, --t-base); a timeline permanece visível e escurecida 20%. Estrutura: título + data · z-badge-source + z-badge-degree · foto(s) (z-figure com legenda e proveniência) · texto "o que se sabe" · z-quote com ▶ · fontes (lista com links "ver no arquivo D##" / "saiba mais" contexto) · nav ant/próx evento. Fecha: X, Esc, clique fora. Mobile: bottom-sheet (peek 30% → full), arrastável. Deep-link: /jornada#e-1939-12-02.

z-badge-source / z-badge-degree#

Pills --fs--1: ícone + rótulo, cores da taxonomia (INFERÊNCIA com borda tracejada). Grau: // + palavra ("confirmado"). Sempre com title explicando o critério.

z-doc-card (Arquivo)#

Card --surface, --radius-m, --shadow-1: thumbnail do scan (fundo --surface-2), ID mono (D07), título, ficha resumida (origem/data), badges. Click → página do documento com visor de zoom (pan/zoom, dupla-tap mobile), proveniência completa, "a voz dele" relacionada, download se os termos permitirem. z-cw antes de documentos de morte.

z-person-card (Pessoas)#

Retrato (ou silhueta com iniciais em --surface-2), nome + datas documentadas, papel ("o pai", "a irmã que ninguém registrou"), 2 linhas de resumo, selos de grau. Página da pessoa: "o que ele disse" (z-quotes) / "o que os arquivos dizem" (z-doc-cards) / posição na árvore. "Nomes recuperados" (Frania, Majer): selo especial + micro-história.

z-audio-chip (Memorial)#

Botão pill sobre fundo escuro: ▶ "ouvir na voz dele · 22s". Nunca autoplay. Tocando: vira barra de progresso fina; texto da fala aparece como legenda sincronizada. Um por tela (A1–A12).

z-memorial-scene#

Tela full-viewport, --memorial-bg: imagem (object-fit: cover, máscara vinheta), texto serif --memorial-ink (--fs-5→--fs-3 mobile), z-audio-chip opcional. Parallax sutil (translateY ≤ 8%) — desligado em telas de morte e sob reduced-motion (vira crossfade). Barra de progresso de cena (pontos), botão persistente "pular para a Jornada" (--memorial-dim).

z-cw (aviso de conteúdo)#

Faixa sóbria --surface-2: "Este capítulo contém documentos de morte." + botão "mostrar". Sem cores de alarme. Lembra a escolha na sessão.

Rodapé z-footer#

Tagline · nav · contato flavio@fpripas.com · "Faça pela sua família" em destaque · créditos/fontes · última atualização (data do build).

4 · Acessibilidade (obrigatório)#

Foco visível em tudo (:focus-visible, anel --focus-ring) · navegação completa por teclado (timeline: setas; painel: Esc) · prefers-reduced-motion respeitado globalmente · cor nunca é o único canal (taxonomia = cor+ícone+forma) · contraste AA mínimo (testado nos dois temas) · legendas por padrão · lang correto por trecho (pt-BR/en; nomes poloneses com lang="pl") · imagens com alt descritivo (as legendas do acervo já existem) · skip-link para o conteúdo.

5 · i18n#

Rotas espelhadas / (PT) e /en/; z-lang-switch preserva a página. Strings de UI em i18n/{pt,en}.json; conteúdo compilado por idioma. Timestamps e IDs (D07, P02) são invariantes. Datas: "12 de dezembro de 1914" / "December 12, 1914".

6 · Performance e implementação#

Estático (decisão 15): build .md → JSON + páginas; zero dependência de runtime pesado — JS vanilla/leve por página (player+sync ~10 KB; timeline ~15 KB). Imagens: derivadas responsivas (AVIF/WebP + fallback) geradas no build a partir de fontes/fotos e pesquisa/docs; originais intocados. Vídeo: MP4 único (faststart ) servido pelo nginx com range; poster = still da entrevista. Fontes: woff2 subset latin+latin-ext (nomes poloneses!). GA (decisão 27) só na área pública. Print CSS nas páginas de pessoa/evento/guia.

Extensão v0.2 — design avançado ( decisão 33, 01/09/2026)#

O DS ganhou uma camada aprovada de experiência: 10-design-avancado.md (o fio da vida com a série de dados completa; o site feito da fita — fundos/posters/sprite/waveform; View Transitions MPA declarativas com os nomes vt-*; scroll-driven em CSS; estética do arquivo com a linha ética anti-IA-generativa; tipografia editorial; metas de performance normativas; ritual de teste com a família) e 11-build-assets.md (todos os comandos de geração de assets + as verificações que falham o build, incluindo a denylist de pedidos-prontos.md e dados de vivos). Os tokens novos (--thread-*, --ghost-year-ink, --fs-ghost, --grain-opacity, ::selection, .u-tabular) estão no bloco "v0.2" do tokens.css. Nenhuma regra do v0.1 foi alterada.