Skip to content
Patina

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

App icon

Icon

Patina

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.

← Home