Component gallery
This is Vitrine’s living style guide: the archive box’s colours, type, paper and stamps, and every piece of the family museum working on the Silveira Moreira fixtures and the Braganza royals.
27 ancestors across 4 generations
An archive box: manila folders, ledger pages, old documents, red tape and rubber stamps. Red is the only accent and always means act, source or danger; everything else is ink on paper. At night the walls go dark and the documents stay paper. Switch the theme to see the night values.
design/tokens.css, DESIGN.md
Colour roles
%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)
--bgThe page, under its paper texture.--bg-raisedEntity cards, dialogs and menus.--bg-sunkenInputs, tracks and empty states.--inkHeadings and body.--ink-mutedFacts and descriptions.--ink-faintCaptions and hints.--hairlineRules between rows, card borders.--hairline-strongOutlined buttons and inputs.--actionThe filled primary button, links and eyebrows.--sourceFootnote markers, quote rules and stamps.--dangerOutline and text of destructive actions and warnings. Never a fill.--paperUnder documents, light in both themes.--focusThe 2px focus outline, 3px from the edge.--sex-maleBlue-black ink, only on the bar at the edge of a tree card.--sex-femaleLedger-rule green, only on the bar at the edge of a tree card.Typefaces
Young Serif
Display: names, headings, transcripts and quotes. One weight, so hierarchy comes from size.
Barbacena, 23 de setembro de 1911
Instrument Sans
Text: interface text, body copy and buttons.
Open the tree, add a memory, ask the guide.
IBM Plex Mono
Label: eyebrows, source references, metadata and chips.
Livro 9, fl. 77. Fixture citation.
Archive text
Marriage register
José Affonso dos Reis
.eyebrow Plex Mono, uppercase, in the action red, over a heading.
Livro de Casamentos 14, fl. 42v, assento nº 118 (1911). Fixture citation.
.source-line Where a fact comes from, in Plex Mono. Give it a text colour.
“Papai José faleceu a 4 de julho de 1952, em casa, cercado dos filhos.”
Kept by Arlette Ferreira Moreira; photographed 2024.
.quote Young Serif behind a 3px rule in the source red.
José married Maria das Dores in Barbacena on 23 September 1911.1 He was a farmer.2
.footnote Superscript source markers, semibold, in the source red.
.link Action red, underlined 3px below the text.
The Clássico stamp with the Kalam wordmark. Each file is picked by the page language and the theme; keep a quarter of the lockup’s height clear on every side. Registro marks a verified source.
Logo, RegistroPress, RegistroCompact, UnverifiedLabel, SeloReal
Logo lockups
<Logo kind="header" /> Site and app headers, 40 to 56 px tall. The stamp is faded so the name stays crisp.
<Logo kind="stamped" /> The product hero, covers and social images. The stamp sits behind the name.
<Logo kind="horizontal" /> Where nothing may overlap: documents, emails, partner pages.
<Logo kind="stamp" /> Square spaces from 48 px up: avatars, the app icon.
<Logo kind="wordmark" /> Running text, and where the stamp would repeat a nearby one.
surface="day" On a document, which stays paper at night, the logo keeps its day file.
Registro on a verified document
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 /> Pressed onto the document: bottom right, turned −8°, at 40%, behind the text and clipped by the edge. About 150 px on cards; size="page" is 220 px.
Sources in a list
<RegistroCompact /> Beside a verified source’s title, 22 px tall, turned −2°.
<UnverifiedLabel /> What an unverified source shows instead: a dashed Plex Mono label.
Royal seal
Royal-families collection only
The House of Braganza
<SeloReal /> The crowned wax seal heads each royal house’s page in the public royal-families collection, at about 96 to 110 px. It is never a logo and never appears in a family museum.
One filled primary button per view; everything else is outlined in ink. Destructive actions are outlined in the danger red with a bin, never filled. Buttons and inputs have 4px corners and chips 3px; pills are only for segmented controls, toggles and the language switcher.
Button, Chip, Tooltip, Popover, Tabs, Segmented, Toggle, Skeleton, LanguageSwitcher, ThemeToggle, AccountMenu
Buttons
Confirming a deletion
Delete this memory?
Its sources stay in the archive. The safe choice is the filled one.
Chips
Input
Tree mode (segmented control)
Popover
Language and theme
Account: signed out, signed in
Toggle
Loading
Facts appear here, each with its confidence and sources.
Surfaces are procedural paper that follows the theme. Entity cards are ledger pages; documents are objects in the vitrine and stay light paper at night, never inverted. Dialogs, menus and form panels are plain, with no texture.
.paper-page, .paper-card, .paper-document, Card
Paper surfaces
.paper-page The page: stained manila by day, old dark paper at night. Already on the body.
.paper-card Ledger ruling for person and family cards. Content starts 68 px in, past the margin.
.paper-document Old paper for transcripts, source excerpts and document viewers, in both themes.
Cards
Great-grandfather
José Affonso dos Reis
1885 – 1952
variant="ledger" Entity cards: people and families.
Plain
Raised, with a hairline border and no texture.
variant="plain" Panels, dialogs, menus and form panels.
Lista de qualificação de eleitores, Mercês, 1898
José Affonso dos Reis, 24 annos, natural desta freguesia, lavrador.
variant="document" Transcripts and sources, with a verified one’s stamp behind the text.
Each exhibit is a card in the lobby and leans toward you as you move. Curated, community and made-for-you exhibits are always marked.
TiltCard, TreeArt, RoutesArt, GuideArt, MakeArt
Ancestors with confidence marks, from solid to hypothesis.
Where each generation was born, on a living globe.
Questions answered only from the collection, with citations.
Describe a page; it is composed from real records in seconds.
Torraca and Lucca to Juiz de Fora, 1891–1897.
Seven ancestors who crossed the Atlantic, line by line.
A godfather in 1883, a witness in 1911. Help us find his marriage.
Charles II of Spain and the pedigree that folded in on itself.
One person at the centre. Horizontal: generations as columns, ancestors to the right, descendants to the left. Vertical: an hourglass, ancestors above and descendants below. Brothers, sisters and partners stand beside their person either way. The toggles under the tree hide flags, uncertain links, siblings, partners, dates or portraits, and are remembered with the orientation. “+2” beside a descendant counts the generations known after them. The crosshair re-centres the tree. The Quintela Albuquerque family is invented.
FamilyTreeChart, FamilyOrientationSwitch
35 people shown
Ancestors fan out to the right. A solid line is confirmed, dashed is probable, dotted is a hypothesis and red is contradicted. Ana, a foundling, is where her line ends. Scroll or pinch to zoom, drag to move, and reset the view from the buttons.
PedigreeChart
27 people shown
Each ring is a generation and empty slots stay drawn, so you can see what is still missing. Hover a segment to trace the line back to the centre. For Charles II of Spain, the same ancestors fill the fan again and again.
FanChart
Charles II of Spain
1661–1700
16 ancestors fill 46 of the 62 slots: the same people, again and again.
Where each line came from: the Azores, northern Portugal, Tuscany and Campania, all arriving in Minas Gerais. Slide back through the generations. For the royals, the same globe maps the marriages between courts.
MigrationGlobe
Loading the map…
Everything we know about José Affonso dos Reis, and how we know it. Hover a sentence in the story to find the fact behind it; open any fact to read its sources.
EntityHeader, CountsBar, RelativesStrip, NarrativeBlock, FactList, Timeline, SourceCard
Your great-grandfather
c. 1885 – 1952
José Affonso dos Reis was probably born around 1885 in Barbacena, though a voter list from Mercês tells a different story. He worked the land as a lavrador, and on 23 September 1911 he married Maria das Dores Moreira in the parish church of Barbacena. Who his father was is still an open question: perhaps Januário dos Reis. The family Bible records that he died at home in July 1952.
Written by the guide from reviewed facts; underlined sentences are not yet certain.
Born in Barbacena
Birth, Barbacena
ContextLei Áurea abolishes slavery in Brazil
ContextBrazil becomes a republic
Listed as a voter in Mercês, aged “24”
Residence, Mercês
Marries Maria das Dores Moreira
Marriage, Barbacena
Son Geraldo is born
Event
ContextSpanish flu reaches Minas Gerais
Dies at home in Barbacena
Death, Barbacena
Record · 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…
Document
José Affonso dos Reis, 24 annos, natural desta freguesia, lavrador.
b. 1983
Living person. The family sees only the name, dates and photo; everything else stays private unless they choose to share it.
1872–1939
1798–1834
Prints and scans are mounted on archive paper. Open one to look closer: scroll or pinch to zoom, drag to move, arrow keys for the next. PDFs open in a new tab. The plates here are drawn stand-ins.
MediaGallery
Two separate questions: how sure are we, given the evidence, and has a trusted person checked it? Uncertainty is shown openly, never hidden or silently fixed.
ConfidenceMark, ReviewBadge
A primary source was read. Drawn solid.
From a family document or testimony. Solid, lighter.
Likely, not proven. Drawn dashed.
An idea to test. Drawn dotted.
Other evidence disagrees. Tinted red.
Visible to the family with a dotted outline until a curator accepts it. AI extractions always start here.
The guide answers from the archive and cites every fact. Tap a number to see its source; open “How this was made” to see the tier, model and cost.
GuidePanel
Answers only from the archive, with sources.
Who were José Affonso’s parents?
We are not sure yet.
That makes Januário a good hypothesis, not a fact. His mother’s name is still unknown.
