Galeria de componentes
Este é o guia de estilo vivo da Vitrine: as cores, a tipografia, o papel e os carimbos da caixa de arquivo, e cada peça do museu de família funcionando com os dados de exemplo da família Silveira Moreira e da realeza de Bragança.
27 antepassados em 4 gerações
Uma caixa de arquivo: pastas de papel manilha, folhas de livro-razão, documentos antigos, fita vermelha e carimbos de borracha. O vermelho é o único destaque e sempre significa agir, fonte ou perigo; todo o resto é tinta sobre papel. À noite as paredes escurecem e os documentos continuam papel. Troque o tema para ver os valores da noite.
design/tokens.css, DESIGN.md
Papéis das cores
%20{%20.f%20{%20fill:%20%23EE7466%20}%20.s%20{%20stroke:%20%23EE7466%20}%20}%3c/style%3e%3cdefs%3e%3cfilter%20id='ink-fav'%20x='-5%25'%20y='-5%25'%20width='110%25'%20height='110%25'%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='7'%20result='n'/%3e%3cfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='2.2'%20result='d'/%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05'%20numOctaves='3'%20seed='18'%20result='blot'/%3e%3cfeColorMatrix%20in='blot'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-1.5%201.62'%20result='m1'/%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='1.6'%20numOctaves='1'%20seed='12'%20result='grain'/%3e%3cfeColorMatrix%20in='grain'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.4%202.25'%20result='m2'/%3e%3cfeComposite%20in='m1'%20in2='m2'%20operator='arithmetic'%20k1='1'/%3e%3cfeComposite%20in='d'%20operator='in'/%3e%3c/filter%3e%3c/defs%3e%3cg%20filter='url(%23ink-fav)'%20transform='rotate(-6%2080%2080)'%3e%3ccircle%20class='s'%20cx='80'%20cy='80'%20r='69'%20fill='none'%20stroke-width='16'/%3e%3cpath%20class='f'%20d='M47.33%2044.42Q46.25%2041.94%2045.01%2040.64Q43.77%2039.35%2041.71%2038.75Q39.66%2038.16%2035.67%2037.84L35.67%2033.84L80.16%2033.84L80.16%2037.84Q74.11%2038.27%2071.85%2039.13Q69.58%2040%2069.58%2042.05Q69.58%2043.24%2070.23%2045.07L86.32%2089.57L86.97%2089.57L102.3%2049.61Q103.38%2046.8%20103.38%2044.75Q103.38%2041.83%20100.68%2040.27Q97.98%2038.7%2091.39%2037.84L91.39%2033.84L124.77%2033.84L124.77%2037.84Q119.69%2038.59%20117.15%2039.67Q114.61%2040.75%20113.05%2042.97Q111.48%2045.18%20109.65%2049.82L82.97%20118.08L77.79%20118.08L47.33%2044.42Z'/%3e%3c/g%3e%3c/svg%3e)
--bgA página, sob a textura de papel.--bg-raisedCartões de pessoas, diálogos e menus.--bg-sunkenCampos, trilhos e estados vazios.--inkTítulos e corpo de texto.--ink-mutedFatos e descrições.--ink-faintLegendas e dicas.--hairlineFios entre linhas, bordas de cartões.--hairline-strongBotões contornados e campos.--actionO botão principal preenchido, links e sobretítulos.--sourceMarcas de nota, fios de citação e carimbos.--dangerContorno e texto de ações destrutivas e avisos. Nunca preenchimento.--paperSob os documentos, claro nos dois temas.--focusO contorno de foco de 2px, a 3px da borda.--sex-maleTinta azul-preta, só na barra da borda de um cartão da árvore.--sex-femaleVerde do pautado do livro-razão, só na barra da borda de um cartão da árvore.Tipos
Young Serif
Títulos: nomes, cabeçalhos, transcrições e citações. Um só peso, então a hierarquia vem do tamanho.
Barbacena, 23 de setembro de 1911
Instrument Sans
Texto: interface, corpo de texto e botões.
Abra a árvore, acrescente uma lembrança, pergunte ao guia.
IBM Plex Mono
Rótulos: sobretítulos, referências de fonte, metadados e etiquetas.
Livro 9, fl. 77. Fixture citation.
Texto do arquivo
Registro de casamento
José Affonso dos Reis
.eyebrow Plex Mono, em maiúsculas, no vermelho de ação, acima de um título.
Livro de Casamentos 14, fl. 42v, assento nº 118 (1911). Fixture citation.
.source-line De onde vem um fato, em Plex Mono. Dê a ele uma cor de texto.
“Papai José faleceu a 4 de julho de 1952, em casa, cercado dos filhos.”
Kept by Arlette Ferreira Moreira; photographed 2024.
.quote Young Serif atrás de um fio de 3px no vermelho de fonte.
José casou-se com Maria das Dores em Barbacena em 23 de setembro de 1911.1 Era lavrador.2
.footnote Marcas de fonte sobrescritas, em seminegrito, no vermelho de fonte.
.link Vermelho de ação, sublinhado 3px abaixo do texto.
O carimbo Clássico com o logotipo em Kalam. Cada arquivo é escolhido pelo idioma da página e pelo tema; deixe livre um quarto da altura do logo em todos os lados. O Registro marca uma fonte verificada.
Logo, RegistroPress, RegistroCompact, UnverifiedLabel, SeloReal
Versões do logo
<Logo kind="header" /> Cabeçalhos do site e do app, de 40 a 56 px de altura. O carimbo é esmaecido para o nome ficar nítido.
<Logo kind="stamped" /> O destaque da página do produto, capas e imagens para redes sociais. O carimbo fica atrás do nome.
<Logo kind="horizontal" /> Onde nada pode sobrepor: documentos, e-mails, páginas de parceiros.
<Logo kind="stamp" /> Espaços quadrados a partir de 48 px: avatares, o ícone do app.
<Logo kind="wordmark" /> Texto corrido, e onde o carimbo repetiria outro próximo.
surface="day" Num documento, que continua papel à noite, o logo mantém a versão diurna.
Registro num documento verificado
Livro de Casamentos 14, fl. 42v, assento nº 118 (1911). Fixture citation.
Aos vinte e três dias do mês de setembro de mil novecentos e onze, nesta matriz, receberam-se em matrimônio José Affonso dos Reis, lavrador, e Maria das Dores Moreira…
<RegistroPress /> Batido no documento: embaixo à direita, girado −8°, a 40%, atrás do texto e cortado pela borda. Cerca de 150 px em cartões; size="page" tem 220 px.
Fontes numa lista
<RegistroCompact /> Ao lado do título de uma fonte verificada, com 22 px de altura, girado −2°.
<UnverifiedLabel /> O que uma fonte não verificada mostra em vez disso: um rótulo tracejado em Plex Mono.
Selo real
Só na coleção das famílias reais
A Casa de Bragança
<SeloReal /> O selo de cera coroado encabeça a página de cada casa real na coleção pública das famílias reais, com cerca de 96 a 110 px. Nunca é um logo e nunca aparece num museu de família.
Um botão principal preenchido por tela; todo o resto é contornado em tinta. Ações destrutivas são contornadas no vermelho de perigo, com uma lixeira, nunca preenchidas. Botões e campos têm cantos de 4px e etiquetas de 3px; formato de pílula só em controles segmentados, interruptores e no seletor de idioma.
Button, Chip, Tooltip, Popover, Tabs, Segmented, Toggle, Skeleton, LanguageSwitcher, ThemeToggle, AccountMenu
Botões
Confirmando uma exclusão
Apagar esta lembrança?
As fontes continuam no arquivo. A escolha segura é a preenchida.
Etiquetas
Campo
Modo da árvore (controle segmentado)
Painel suspenso
Idioma e tema
Conta: fora e conectado
Botão de alternância
Carregando
Os fatos aparecem aqui, cada um com seu grau de certeza e suas fontes.
As superfícies são papel gerado que acompanha o tema. Cartões de pessoas são folhas de livro-razão; documentos são objetos na vitrine e continuam papel claro à noite, nunca invertidos. Diálogos, menus e formulários são lisos, sem textura.
.paper-page, .paper-card, .paper-document, Card
Superfícies de papel
.paper-page A página: manilha manchado de dia, papel escuro e antigo à noite. Já está no body.
.paper-card Pautado de livro-razão para cartões de pessoas e famílias. O conteúdo começa a 68 px, depois da margem.
.paper-document Papel antigo para transcrições, trechos de fontes e visualizadores de documentos, nos dois temas.
Cartões
Bisavô
José Affonso dos Reis
1885 – 1952
variant="ledger" Cartões de pessoas e famílias.
Simples
Elevado, com borda fina e sem textura.
variant="plain" Painéis, diálogos, menus e formulários.
Lista de qualificação de eleitores, Mercês, 1898
José Affonso dos Reis, 24 annos, natural desta freguesia, lavrador.
variant="document" Transcrições e fontes, com o carimbo das verificadas atrás do texto.
Cada exposição é um cartão no saguão e se inclina na sua direção quando você se move. Exposições curadas, da comunidade e feitas para você são sempre marcadas.
TiltCard, TreeArt, RoutesArt, GuideArt, MakeArt
Antepassados com marcas de confiança, do confirmado à hipótese.
Onde cada geração nasceu, num globo vivo.
Perguntas respondidas somente com o acervo, com citações.
Descreva uma página; ela é composta com registros reais em segundos.
De Torraca e Lucca a Juiz de Fora, 1891–1897.
Sete antepassados que cruzaram o Atlântico, linha por linha.
Padrinho em 1883, testemunha em 1911. Ajude-nos a encontrar o casamento dele.
Carlos II da Espanha e a árvore que se dobrou sobre si mesma.
Uma pessoa no centro. Horizontal: gerações em colunas, antepassados à direita, descendentes à esquerda. Vertical: uma ampulheta, antepassados acima e descendentes abaixo. Irmãos, irmãs e cônjuges ficam ao lado da sua pessoa nos dois casos. Os botões sob a árvore escondem bandeiras, vínculos incertos, irmãos, cônjuges, datas ou retratos, e são lembrados junto com a orientação. “+2” ao lado de um descendente conta as gerações conhecidas depois dele. A mira recentraliza a árvore. A família Quintela Albuquerque é inventada.
FamilyTreeChart, FamilyOrientationSwitch
35 pessoas exibidas
Os antepassados se abrem para a direita. Linha contínua é confirmada, tracejada é provável, pontilhada é hipótese e vermelha é contradita. Ana, exposta, é onde a linha dela termina. Role ou faça pinça para aproximar, arraste para mover e restaure a vista pelos botões.
PedigreeChart
27 pessoas exibidas
Cada anel é uma geração, e as posições vazias continuam desenhadas para mostrar o que ainda falta. Passe o cursor sobre um segmento para seguir a linha até o centro. No caso de Carlos II da Espanha, os mesmos antepassados preenchem o leque de novo e de novo.
FanChart
Charles II of Spain
1661–1700
16 antepassados ocupam 46 das 62 posições: as mesmas pessoas, de novo e de novo.
De onde veio cada linha: Açores, norte de Portugal, Toscana e Campânia, todas chegando a Minas Gerais. Deslize para voltar pelas gerações. Para a realeza, o mesmo globo mostra os casamentos entre as cortes.
MigrationGlobe
Carregando o mapa…
Tudo o que sabemos sobre José Affonso dos Reis, e como sabemos. Passe o cursor sobre uma frase da história para encontrar o fato por trás dela; abra qualquer fato para ler suas fontes.
EntityHeader, CountsBar, RelativesStrip, NarrativeBlock, FactList, Timeline, SourceCard
Seu bisavô
c. 1885 – 1952
José Affonso dos Reis nasceu provavelmente por volta de 1885, em Barbacena, embora uma lista de eleitores de Mercês conte outra história. Era lavrador, e em 23 de setembro de 1911 casou-se com Maria das Dores Moreira na matriz de Barbacena. Quem foi seu pai ainda é uma pergunta em aberto: talvez Januário dos Reis. A Bíblia da família registra que ele faleceu em casa, em julho de 1952.
Escrito pelo guia a partir de fatos revisados; frases sublinhadas ainda não são certas.
Nasce em Barbacena
Nascimento, Barbacena
ContextoA Lei Áurea abole a escravidão no Brasil
ContextoProclamação da República
Aparece como eleitor em Mercês, com “24” anos
Residência, Mercês
Casa-se com Maria das Dores Moreira
Casamento, Barbacena
Nasce o filho Geraldo
Evento
ContextoA gripe espanhola chega a Minas Gerais
Falece em casa, em Barbacena
Falecimento, Barbacena
Registro · Family archive
Livro de Casamentos 14, fl. 42v, assento nº 118 (1911). Fixture citation.
Aos vinte e três dias do mês de setembro de mil novecentos e onze, nesta matriz, receberam-se em matrimônio José Affonso dos Reis, lavrador, e Maria das Dores Moreira…
Documento
José Affonso dos Reis, 24 annos, natural desta freguesia, lavrador.
n. 1983
Pessoa viva. A família vê apenas o nome, as datas e a foto; todo o resto fica privado, a menos que a pessoa decida compartilhar.
1872–1939
1798–1834
Fotografias e digitalizações montadas em papel de arquivo. Abra uma para ver de perto: role ou faça pinça para aproximar, arraste para mover, use as setas para a próxima. PDFs abrem em uma nova aba. As pranchas aqui são desenhos provisórios.
MediaGallery
Duas perguntas separadas: quanta certeza temos, pelas evidências, e alguém de confiança já conferiu? A incerteza é mostrada abertamente, nunca escondida nem corrigida em silêncio.
ConfidenceMark, ReviewBadge
Uma fonte primária foi lida. Traço contínuo.
De um documento ou depoimento da família. Contínuo, mais leve.
Provável, não comprovado. Traço tracejado.
Uma ideia a testar. Traço pontilhado.
Outras evidências discordam. Em vermelho.
Visível para a família com contorno pontilhado até que um curador aceite. Extrações por IA sempre começam aqui.
O guia responde com base no acervo e cita cada fato. Toque em um número para ver a fonte; abra “Como isto foi feito” para ver o nível, o modelo e o custo.
GuidePanel
Responde só com o acervo, citando as fontes.
Quem eram os pais de José Affonso?
Ainda não temos certeza.
Isso faz de Januário uma boa hipótese, não um fato. O nome da mãe continua desconhecido.
