---
version: alpha
name: Curated Catalog
description: Museum shop meets mail-order catalogue. Big imagery, deep bordeaux, a serif that knows it is being looked at.
meta:
  id: "theme-curated-catalog"
  model: "Claude Fable 5.1"
  author: "Claude Code"
  createdAt: "2026-09-02T16:52:47+09:00"
  updatedAt: "2026-09-02T16:52:54+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Museum-shop catalogue — someone chose these, and it shows
  bestFor: Marketplaces, collections, product discovery, galleries, shops, directories
  avoidFor: Data tables, admin tooling, anything without imagery
  defaultMode: light
  surfaceStyle: elevated
  accentUse: fill
  caseStyle: none
  borderWidth: 1px
  imageTreatment: none
  motion:
    intensity: 5
    duration: 220ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Cards rise 4px and their shadow spreads; the image inside scales to 1.03."
  displayFont: Instrument Serif
  displayKind: serif
  bodyFont: Karla
  monoFont: IBM Plex Mono
colors:
  background: "#F8F5F1"
  foreground: "#1C1A17"
  card: "#FFFFFF"
  card-foreground: "#1C1A17"
  popover: "#FFFFFF"
  popover-foreground: "#1C1A17"
  primary: "#7E1E35"
  primary-foreground: "#FFFFFF"
  secondary: "#EDE7DD"
  secondary-foreground: "#3A342C"
  muted: "#EDE7DD"
  muted-foreground: "#6B6357"
  accent: "#2E6152"
  accent-foreground: "#FFFFFF"
  destructive: "#B23C00"
  destructive-foreground: "#FFFFFF"
  border: "#DED6C8"
  input: "#DED6C8"
  ring: "#7E1E35"
  chart-1: "#7E1E35"
  chart-2: "#2E6152"
  chart-3: "#A8761F"
  chart-4: "#6E5A8C"
  chart-5: "#4A443C"
colorsDark:
  background: "#14120F"
  foreground: "#F0EBE2"
  card: "#1D1A16"
  card-foreground: "#F0EBE2"
  popover: "#1D1A16"
  popover-foreground: "#F0EBE2"
  primary: "#E97486"
  primary-foreground: "#2A0A12"
  secondary: "#26221C"
  secondary-foreground: "#E4DDD0"
  muted: "#26221C"
  muted-foreground: "#A69C8C"
  accent: "#6FC0A4"
  accent-foreground: "#062018"
  destructive: "#F87B4E"
  destructive-foreground: "#2A0806"
  border: "#322D25"
  input: "#322D25"
  ring: "#E97486"
  chart-1: "#E97486"
  chart-2: "#6FC0A4"
  chart-3: "#DCB05C"
  chart-4: "#A796D4"
  chart-5: "#B8AE9C"
typography:
  display-lg:
    fontFamily: Instrument Serif
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Instrument Serif
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Instrument Serif
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.25
  body-lg:
    fontFamily: Karla
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Karla
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Karla
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label-caps:
    fontFamily: Karla
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 14px
  xl: 20px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  gutter: 24px
  margin: 40px
  measure: 62ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 12px
  button-quiet:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    rounded: "{rounded.full}"
    padding: 12px
  card-product:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 0px
  card-feature:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.xl}"
    padding: 32px
  badge-collection:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
---

# Curated Catalog

## Overview

Curated Catalog behaves like a printed mail-order catalogue produced by a museum
shop: an image first, a short serif title, one honest sentence, and a small
line of provenance. It assumes every item deserves to be looked at, and that a
human being made a decision to include it.

Reach for this when discovery and desire matter more than comparison — a
marketplace, a collection, a shop, a directory of things worth seeing. It needs
imagery. Without pictures it collapses into a plain list and loses its point.

Personality: warm, considered, generous, slightly old-world.

## Colors

Warm paper, deep bordeaux, and a single conservation green.

- **Primary (#7E1E35):** Bordeaux. Calls to action and the "chosen" marker.
  Warm enough to sit on cream without vibrating.
- **Accent (#2E6152):** Conservation green. Collection badges, curator notes,
  "in stock" states. It is the second voice, never a button.
- **Neutral (#F8F5F1 / #FFFFFF):** Warm off-white page with white cards, so
  photography reads as the brightest thing on the page.
- **Foreground (#1C1A17):** Warm ink. Never `#000000`.

Dark mode reads as a gallery at night: the page goes near-black-warm, cards stay
warm-dark, and imagery becomes the only source of colour intensity.

## Typography

Instrument Serif for names, Karla for everything else.

- **Display / headlines:** Instrument Serif at regular weight, set large. The
  serif does the emotional work; do not bold it and do not letterspace it.
- **Body:** Karla 15–17px / 1.55, capped at a 62ch measure.
- **Labels:** Karla 11px bold uppercase with `0.1em` tracking, used sparingly —
  collection names, section eyebrows.
- **Mono:** IBM Plex Mono only for prices, SKUs and dates.

Never set a serif headline and a serif body together. One serif voice per screen.

## Layout

Image-led asymmetry. The canonical home is a 2/3 feature panel beside a 1/3
rail, followed by a 3-column card grid at 24px gutters and a 1200px max width.

Every product card is image-first with a 4:3 crop, 14px radius, and content
padding of 20px. Cards never have equal visual weight: one feature card per
screen is allowed to be twice the size of its neighbours.

Section rhythm is generous — 64px between sections, 40px page margins. If the
page feels tight, this theme is being used for the wrong thing.

## Elevation & Depth

Soft physical elevation. Cards sit on the page with a single low-spread shadow
(`0 1px 2px` plus `0 8px 24px` at very low alpha) and lift slightly on hover.
This is the one lookbook theme where shadows are the primary depth cue; borders
are secondary and hairline.

## Shapes

Generously rounded: 14px on cards, 20px on feature panels, fully round on
buttons and badges. Image crops share the card radius exactly — a square image
inside a rounded card is the single most common mistake here.

## Components

- **Buttons:** fully rounded pills. Primary is bordeaux fill; quiet is `secondary`
  fill with no border. 12px/22px padding.
- **Product card:** image (4:3) → serif title → one sentence in
  `muted-foreground` → a metadata line joined by `·`. Whole card is the click
  target.
- **Feature panel:** image left, copy right at 32px padding, 20px radius, with an
  uppercase eyebrow above the serif headline.
- **Collection badge:** green pill, uppercase label type, 4px/10px padding.
- **Rail navigation:** flush list of collection names with a right-aligned count
  in mono; the active row fills with `secondary`.
- **Empty state:** a bordered dashed frame at the card's aspect ratio, never a
  centred icon on a blank page.

## Do's and Don'ts

- Do lead with an image; this system is nothing without one.
- Do let one item per screen be visually bigger than the rest.
- Do match the image crop radius to the card radius.
- Don't use two serif voices on the same screen.
- Don't put dense tabular data in this theme — use Evidence Office.
- Don't bold the serif display type.
- Don't shrink section spacing to fit more items above the fold.