---
version: alpha
name: Lost Memories
description: An archival photography gallery rendered as a catalog — pure-white canvas, near-black monospaced labels in brackets ([056]), a control-strip vocabulary (scale 0.10, list/type/location, clear filters), flat edge-to-edge images with no radius, and an utterly restrained black-and-white system where the photographs are the only color.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#0a0a0a"
  ink-pure: "#000000"

  # Secondary / metadata ink
  ink-secondary: "#666666"
  ink-muted: "#999999"
  ink-faint: "#bdbdbd"

  # Interactive
  link: "#0a0a0a"
  link-hover: "#666666"

  # The single accent — the "NEW" marker
  accent: "#0a0a0a"
  accent-text: "#ffffff"

  # Hairlines + chrome
  border: "#e6e6e6"
  border-strong: "#0a0a0a"
  control-track: "#dcdcdc"
  control-thumb: "#0a0a0a"

  # On-color
  on-ink: "#ffffff"
  on-accent: "#ffffff"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-700: "#404040"
  gray-500: "#666666"
  gray-400: "#999999"
  gray-200: "#e6e6e6"
  gray-100: "#f5f5f5"

typography:
  display-title:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-id:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.5px
  label-meta:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  button-view:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1px
  badge-new:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1.5px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  micro: 1px
  xs: 2px
  pill: 9999px

components:
  # Primary "VIEW" action — quiet outlined control
  button-view:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-view}"
    rounded: "{rounded.none}"
    padding: 6px 12px
    borderColor: "{colors.border-strong}"
  button-view-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-view}"
    rounded: "{rounded.none}"
    padding: 6px 12px
    borderColor: "{colors.border-strong}"

  # "NEW" marker — the one inverted element
  badge-new:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.badge-new}"
    rounded: "{rounded.none}"
    padding: 2px 6px

  # Photo ID label — [056]
  label-id:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-id}"
    rounded: "{rounded.none}"

  # Dimension / metadata caption — [706 x 976]
  label-meta:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-meta}"
    rounded: "{rounded.none}"

  # Photo cell — flat, no chrome, image edge-to-edge
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Filter control chip — list / type / location
  filter-chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  filter-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  # Scale slider track
  slider-track:
    backgroundColor: "{colors.control-track}"
    height: 1px

  # Text link
  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"
---

# Lost Memories Design System

## Overview

Lost Memories is a photography archive that dresses itself as a database. The entire interface is built from two colors — pure white (`{colors.background}`) and near-black ink (`{colors.ink}`) — so that the photographs themselves are the only saturated thing on the screen. Where most portfolios chrome their images with shadows, frames, and rounded corners, this one strips all of that away: images sit flush and flat (`{rounded.none}`), tagged only with a monospaced bracketed index ([056], [001]) and a literal dimension caption ([706 x 976]). The result reads less like a gallery wall and more like a catalog ledger — every frame is an entry, every entry is numbered.

The defining move is the monospace voice. All labels, navigation, and controls are rendered in a fixed-width typeface (mapped here to Space Mono), which gives the metadata a forensic, archival quality — coordinates and dimensions rather than captions. The vocabulary reinforces it: a "scale 0.10" zoom readout, a `list / type / location` view switcher, a "clear filters" reset, and a small inverted "NEW" marker on the most recent acquisitions. The UI behaves like a collections-management tool that happens to be public.

Restraint is the whole thesis. There is exactly one inverted element in the system — the "NEW" badge (`{components.badge-new}`), white text on solid ink — and one interactive control that fills on hover (the "VIEW" button flips to ink). Everything else is hairline borders (`{colors.border}`), quiet secondary gray for metadata (`{colors.ink-secondary}`), and an immense amount of white space carrying the layout. No gradient, no decoration, no second hue.

**Key Characteristics:**
- Pure black-and-white system — the photographs supply all the color
- Monospace everywhere (Space Mono), giving labels a catalog/database voice
- Bracketed numeric IDs ([056]) and literal dimension captions ([706 x 976]) as the only metadata
- Zero border radius — flat, edge-to-edge images and square controls
- A single inverted accent: the "NEW" marker on recent entries
- Control-strip vocabulary: scale slider (scale 0.10), list/type/location switch, clear filters
- Hairline borders (`{colors.border}`) and generous whitespace instead of cards/shadows
- Quiet "VIEW" outlined button that fills with ink only on hover

## Colors

### Primary
- **Pure White** (`{colors.background}`): Page background, every surface, button text on ink. The dominant field.
- **Near Black** (`{colors.ink}`): Primary text, IDs, nav, borders-strong. A hair off true black for warmth.
- **True Black** (`{colors.ink-pure}`): Reserved for the deepest control contexts.

### Secondary Ink
- **Metadata Gray** (`{colors.ink-secondary}`): Dimension captions, secondary labels, hover state for links.
- **Muted Gray** (`{colors.ink-muted}`): Tertiary annotations, inactive controls.
- **Faint Gray** (`{colors.ink-faint}`): Lowest-emphasis hints.

### Interactive
- **Link** (`{colors.link}`): Text links — ink by default.
- **Link Hover** (`{colors.link-hover}`): Links soften to gray on hover.

### Accent
- **Accent / NEW** (`{colors.accent}`): The lone inverted element — solid ink behind white "NEW" text.

### Chrome & Hairlines
- **Border** (`{colors.border}`): Hairline dividers, cell edges, nav underline.
- **Border Strong** (`{colors.border-strong}`): The "VIEW" button outline (ink).
- **Control Track** (`{colors.control-track}`): Scale slider track.
- **Control Thumb** (`{colors.control-thumb}`): Slider thumb (ink).

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary ink.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Metadata gray.
- **Gray 400** (`{colors.gray-400}`): Muted annotations.
- **Gray 200** (`{colors.gray-200}`): Hairline borders.
- **Gray 100** (`{colors.gray-100}`): Subtle surface tint.

## Typography

### Font Family
- **Primary**: `Space Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`
- There is no sans/serif companion — the system is monospace top to bottom, which is the identity.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.label-id}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-title` | Photo-page title / largest type |
| `section-heading` | About / section labels |
| `body` | Standard reading text (about page) |
| `body-small` | Filter controls, secondary copy |
| `label-id` | Bracketed photo IDs — [056] |
| `label-meta` | Dimension captions — [706 x 976] |
| `nav-link` | home / about navigation |
| `button-view` | The "VIEW" action, tracked +1px |
| `badge-new` | The "NEW" marker, tracked +1.5px uppercase |

### Principles
- **Monospace as identity**: Fixed-width type turns every label into a coordinate. Never substitute a proportional sans — the alignment of brackets and digits is the look.
- **Tracking opens on the smallest type**: IDs, VIEW, and NEW gain positive letter-spacing (0.5px–1.5px) so tiny labels read as deliberate stamps, not afterthoughts.
- **Brackets are structural**: IDs and dimensions are always wrapped in square brackets — part of the catalog grammar, not decoration.
- **One weight**: Everything is regular (400). Emphasis comes from inversion and size, never bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with tight micro values (2px/4px) for the dense label clusters under each image.

### Grid & Container
- Masonry / irregular grid accommodating mixed portrait and landscape aspect ratios
- A "scale" slider resizes the whole grid live (scale 0.10 → larger), so column count is fluid rather than fixed
- Images sit flush to their cells with a hairline gutter; metadata stacks directly beneath
- Generous outer margins; nav sits at the top edge with a single hairline underline

### Whitespace Philosophy
- **Catalog calm**: The white field is the frame. Without shadows or card chrome, spacing alone separates entries.
- **Metadata hugs the image**: Tight `{spacing.xs}`–`{spacing.sm}` between an image and its [ID]/[dimensions] cluster keeps each entry reading as one unit.
- **No section dividers beyond hairlines**: Separation is a 1px `{colors.border}` line, never a filled block.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Images, page background |
| Hairline (Level 1) | `1px solid {colors.border}` | Cell edges, nav underline, dividers |
| Outline (Level 1b) | `1px solid {colors.border-strong}` | The "VIEW" button |
| Inverted (Accent) | Solid `{colors.ink}` fill | "NEW" marker, VIEW hover, active filter |

**Depth Philosophy**: There is effectively no z-axis. The system refuses shadows entirely. "Depth" is communicated by inversion — a filled ink block reads as foreground/active against the white field. This keeps the photographs the only objects with real visual weight.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — images, buttons, badges, chips |
| `micro` | 1px | Optional softening on the slider thumb |
| `xs` | 2px | Rare, smallest functional rounding |
| `pill` | 9999px | Reserved; not used in the core UI |

The square corner is a rule, not a default. Rounded corners would contradict the catalog-ledger logic.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-view}`, `{components.badge-new}`).

### Buttons
- **`button-view`** — White, ink outline, square, tracked "VIEW" label. Fills to solid ink (`{components.button-view-hover}`) on hover. The only button in the system.

### Markers & Labels
- **`badge-new`** — Solid ink, white uppercase "NEW", square. The single inverted accent, on recent entries only.
- **`label-id`** — Bracketed monospace photo number, [056].
- **`label-meta`** — Bracketed dimension caption in secondary gray, [706 x 976].

### Cards
- **`card`** — Not a card in the usual sense: a flat photo cell with no fill, no shadow, no radius. A hairline `{colors.border}` gutter is the only chrome.

### Navigation
- **`nav-bar`** — White, monospace `home` / `about` links, hairline underline. No logo lockup beyond text.

### Controls
- **`filter-chip`** / **`filter-chip-active`** — list / type / location switchers. Inactive = gray text on white; active = white on ink.
- **`slider-track`** — 1px control track for the "scale" zoom. Square ink thumb.

### Distinctive Components
- **The Scale Slider**: A live "scale 0.10" zoom that rescales the entire grid — the gallery's signature interaction.
- **Catalog Captions**: Every image carries a [ID] + [W x H] cluster in monospace, turning the gallery into a numbered index.
- **NEW Marker**: The only inverted, attention-grabbing element in the whole interface.

## Do's and Don'ts

### Do
- Render every label, control, and caption in monospace (`Space Mono`)
- Keep all corners square (`{rounded.none}`)
- Wrap IDs and dimensions in square brackets — it's the catalog grammar
- Let the photographs be the only color; keep the UI black-and-white
- Use inversion (solid ink) to mark state — NEW, active filter, VIEW hover
- Separate entries with hairline `{colors.border}` lines and whitespace
- Add positive letter-spacing to the tiniest labels (VIEW, NEW, IDs)

### Don't
- Don't introduce a proportional sans/serif for body or labels — mono is the identity
- Don't round corners on images, buttons, or badges
- Don't add drop shadows or card elevation — depth is inversion only
- Don't introduce a second hue or any gradient into the chrome
- Don't bold anything — one weight (400), emphasis via size/inversion
- Don't drop the brackets around IDs and dimensions
- Don't let UI chrome compete with the photographs for color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, metadata stacks under each image, slider hidden or simplified |
| Tablet | 600–1024px | 2–3 column masonry, full control strip |
| Desktop | 1024–1440px | Multi-column masonry driven by the scale slider |
| Large Desktop | >1440px | Wider grid, generous outer margins |

### Touch Targets
- "VIEW" buttons use comfortable padding (6px vertical, 12px horizontal)
- Nav links and filter chips have adequate tap spacing
- Scale slider thumb enlarged for touch on small screens

### Collapsing Strategy
- Masonry grid: many columns → fewer → single column
- Control strip (scale / list / type / location / clear filters): inline row → wrapped or condensed on mobile
- Metadata clusters always stay attached directly beneath their image
- Nav: stays a simple home / about pair, no hamburger needed

### Image Behavior
- Sanity CDN responsive images, WebP, `auto=format`
- Images maintain native aspect ratio in the masonry flow
- Flat edge-to-edge treatment preserved at all sizes — no radius, no border on the image itself

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure White `{colors.background}`
- Text / IDs: Near Black `{colors.ink}`
- Metadata: Metadata Gray `{colors.ink-secondary}`
- Hairline: `{colors.border}`
- Accent (NEW / active): Solid ink `{colors.accent}`
- Button outline: `{colors.border-strong}`

### Example Component Prompts
- "Create a photo cell: flat image, no radius, no shadow. Below it, a monospace row — bracketed ID [056] in `{colors.ink}` left, dimension caption [706 x 976] in `{colors.ink-secondary}` right, both Space Mono. Add a small square 'VIEW' button with a 1px ink outline that fills solid ink on hover."
- "Build a 'NEW' marker: solid `{colors.accent}` background, white uppercase 'NEW' in Space Mono 10px, letter-spacing 1.5px, square corners, 2px 6px padding."
- "Design the control strip: a 'scale 0.10' slider with a 1px `{colors.control-track}` track and square ink thumb, followed by list / type / location filter chips (gray on white inactive, white on ink active) and a 'clear filters' link — all Space Mono."
- "Create navigation: white bar, monospace 'home' and 'about' links in `{colors.ink}`, single hairline `{colors.border}` underline, no logo graphic."

### Iteration Guide
1. Monospace or it's wrong — every label and control is Space Mono
2. Square corners everywhere (`{rounded.none}`)
3. Black-and-white only; the photos are the palette
4. Inversion is the only emphasis — solid ink = active/foreground
5. Brackets around IDs and dimensions are mandatory catalog grammar
6. Hairlines and whitespace, never shadows, separate content

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lost Memories. Brand names and trademarks belong to their respective owners.