Identity
Patina
The surface that forms on something through time and use. A person's patina is everything they have lived.
01Name
Considered: Sonder, Tessera, Ephemera, Vitrine, Souvenir, Marginalia, Lore, Afterglow. Patina won on meaning (time and use leave a surface; experiences leave a person), on sound (three soft syllables, no ambiguity), on visual potential (colour, texture, wear) and on feeling like a cultural object rather than software. It is warm without being twee, and it says the product's whole thesis in one word: you are marked by what you have been through, and that marking is beautiful.
02Mark
Growth rings
64
32
16
Icon
Wordmark
Rings of a life, one a year. They are eccentric on purpose: real growth rings drift toward the light, and so does a life. The same motif runs through the product: the strata strip is the rings unrolled, and Things in Common is two sets of rings overlapping.
03Colour
Paper
#f3efe7 · ground
Paper 2
#ebe6dc · shaded surface
Paper 3
#e0dacd · deeper shade
Ink
#1b1a17 · type, actions
Ink 2
#56534b · secondary
Ink 3
#8a8677 · labels
Verdigris
#2f7d6d · interaction, links, focus
Copper
#b5623a · ratings, warmth
The brand is paper and ink, with verdigris for anything you can touch and copper for anything you rated. Everything else comes from the content: each experience carries the dominant colour of its own image, and the archive's palette is whatever the person has lived. The immersive detail view is that colour, darkened, so nothing in the product is dark for decoration.
04Type
Newsreader · everything read
Keep what made you.
Teshima Art Museum
Exhibition · Visited · 15 November 2024
Headlines, titles and body are one serif at a single weight; hierarchy comes from size and tightened tracking, never from bold.
Fragment Mono · everything operated
“Make things that make people quiet.”
Labels, dates, navigation and buttons are mono caps at eleven pixels: the catalogue voice. Notes and quotes stay in the serif italic, always the person's own words.
05Image treatment
Images are objects, not thumbnails: real proportions, square corners, a hairline edge and a soft contact shadow, as if laid on paper. No rounded rectangles, no gradients over pictures, no blur. An experience without a picture gets a plate: its own note, set in serif, on a tint of its own colour.
06Motion
- Things are placed, not popped: arrive by settling a few pixels with a fade (settle easing, 0.2 0.7 0.2 1).
- Physical things use springs (stiffness 70–120, damping 16–20): the pile fanning open, shared tiles drifting to the centre.
- The same object continues between states: a tile becomes the hero of its detail page through a view transition.
- Nothing decorative blocks the user, and everything respects reduced motion by resolving instantly.
07Rules
- Depth by shade, never by border. Hairlines only where an object meets paper.
- No cards for text. Cards are for things that would be objects in the real world.
- Dark surfaces come from content colour, never from a theme.
- Numbers are tabular. Labels are uppercase, expanded, tracked. Titles are tight.
- Every unusual interaction must mean something: accumulation, memory, continuity, discovery.