---
version: alpha
name: Man Ray Diary
description: Surrealist gallery noir — a near-black canvas with bone-white serif display type, photographic high-contrast monochrome, hairline rule borders, and a single rayograph-silver accent. Editorial restraint that treats the screen like a darkroom print.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#121212"
  surface-soft: "#1a1a1a"
  ink: "#f4f1ea"
  ink-secondary: "#a8a39a"
  ink-muted: "#6e6a63"

  # Accent — rayograph silver / film grain
  primary: "#c8c2b4"
  accent-warm: "#b9a98c"

  # Lines + chrome
  border: "#2a2826"
  border-strong: "#3d3a36"
  overlay: "#000000"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Pure poles (darkroom contrast)
  ink-pure: "#ffffff"
  black-pure: "#000000"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.25px
  subheading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 2.4px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.4px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.2px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 0px

  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  card-photo:
    backgroundColor: "{colors.black-pure}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Man Ray Diary Design System

## Overview

Man Ray Diary presents itself as a darkroom rendered in HTML. The canvas is near-black (`{colors.background}`), a warm charcoal that recalls the black of a freshly developed print rather than the cold #000 of a default theme. Against it, bone-white serif display type (`{colors.ink}`) carries the entire emotional weight — every headline reads like a caption mounted beneath a framed photograph in a gallery. This is editorial design as curation: text and image are given air, hairline rules do the structural work, and color is almost entirely withheld so the photography can speak.

The typographic system is a deliberate two-voice composition. Playfair Display, a high-contrast transitional serif, carries all display and heading roles — its thick-to-thin stroke modulation echoes the chiaroscuro of Surrealist photography and Man Ray's own rayographs. Beneath it, Inter handles eyebrows, body copy, and UI in a quiet, neutral sans, often tracked wide in uppercase to read as a museum wall label. The contrast between the dramatic serif and the clinical sans IS the brand voice — art object versus archival catalog.

Chrome is reduced to almost nothing. There are no rounded cards, no drop shadows, no gradients. Borders are single hairlines in a barely-lighter charcoal (`{colors.border}`), the way a mat board frames a print. The one permitted accent is a rayograph silver (`{colors.primary}`) — a desaturated, slightly warm metallic tone used for eyebrows, small marks, and hovers. The discipline is photographic: maximum tonal contrast in the type, minimal saturation everywhere else.

**Key Characteristics:**
- Near-black darkroom canvas (`{colors.background}`) with warm bone-white serif ink (`{colors.ink}`)
- Playfair Display high-contrast serif for all display/headings — chiaroscuro in type form
- Inter for eyebrows and body, frequently uppercase with wide tracking as gallery labels
- Square corners everywhere — `{rounded.none}` is the default; no shadows, no gradients
- Hairline rule borders (`{colors.border}`) frame content like mat board
- Single rayograph-silver accent (`{colors.primary}`); color is withheld so photography dominates
- Generous editorial whitespace and large vertical rhythm

## Colors

### Canvas & Ink
- **Darkroom Black** (`{colors.background}`): Page canvas. Warm near-black, the tone of a developed print.
- **Surface** (`{colors.surface}`): Card and panel fill, one step up from the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Hover/elevated panel tone.
- **Bone White** (`{colors.ink}`): Primary text and headings — warm off-white, never clinical #fff.
- **Silver Secondary** (`{colors.ink-secondary}`): Secondary text, captions, supporting copy.
- **Muted** (`{colors.ink-muted}`): Disabled and tertiary text, fine print.

### Accent
- **Rayograph Silver** (`{colors.primary}`): The single accent — eyebrows, small marks, hover states.
- **Warm Sepia** (`{colors.accent-warm}`): Rare warm tint for archival/date marks.

### Lines & Chrome
- **Hairline** (`{colors.border}`): Default 1px rule, mat-board framing.
- **Strong Line** (`{colors.border-strong}`): Inputs and bordered buttons.
- **Overlay** (`{colors.overlay}`): Image scrim / modal backdrop.

### Poles
- **Pure White** (`{colors.ink-pure}`): Reserved for maximum-contrast photographic captions.
- **Pure Black** (`{colors.black-pure}`): Photo mounts and image wells.

## Typography

### Font Family
- **Display / Headings**: `Playfair Display`, with fallbacks `Georgia, serif`
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px Playfair hero — gallery title |
| `display` | Major section titles |
| `heading` | Article and feature headings |
| `subheading` | Lighter serif sub-sections |
| `eyebrow` | Uppercase Inter wall-label kicker |
| `body-large` | Lead paragraphs, essays |
| `body` | Standard reading text |
| `body-small` | Captions, supporting copy |
| `caption` | Metadata, dates, credits |
| `button-ui` | Buttons and uppercase UI labels |

### Principles
- **Two voices, strict roles**: Playfair Display announces; Inter explains. Never mix.
- **Serif carries contrast**: Playfair's thick-thin modulation mirrors the photography — leave it at weight 400-500, never bold it into mud.
- **Tracking as a label**: Eyebrows and buttons use wide uppercase Inter tracking (1.2px-2.4px) to read as archival captions.
- **Air over weight**: Hierarchy comes from size and whitespace, not heavy weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Editorial rhythm: tight inside text blocks, very generous between sections (`{spacing.3xl}`-`{spacing.4xl}`).

### Grid & Container
- Max content width approximately 1100px, often narrower (680px) for reading columns
- Single-column editorial flow; image grids break to full-bleed
- Sections separated by hairline rules (`{colors.border}`) and large vertical gaps

### Whitespace Philosophy
- **Gallery hang**: Each image and headline is given margin like a framed print on a wall.
- **Rule, not box**: Separation comes from hairlines and space — not filled cards or shadows.
- **Square discipline**: No rounded corners anywhere; the frame is rectilinear.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, images, inputs |
| `xs` | 2px | Tiny inline marks |
| `sm` | 4px | Rare softening |
| `md` | 6px | Reserved |
| `pill` | 9999px | Occasional tag chips only |

## Components

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

### Buttons
- **`button-primary`** — Bone-white fill, dark text, square corners, wide-tracked uppercase label.
- **`button-secondary`** — Transparent on canvas with a `{colors.border-strong}` hairline outline.
- **`button-ghost`** — Underline-less text link in `{colors.ink-secondary}`, hovers to silver.

### Cards
- **`card`** — Surface fill, hairline border, square corners, no shadow.
- **`card-photo`** — Pure-black image well framed by a hairline, like a mounted print.

### Inputs
- **`input`** — Surface fill, square, `{colors.border-strong}` hairline; focus brightens the line to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Canvas-colored, uppercase Inter eyebrow links, hairline bottom rule.

### Distinctive Components
- **Eyebrow Label**: Uppercase Inter in `{colors.primary}` with wide tracking — the museum wall-label voice.
- **Hairline Divider**: 1px `{colors.border}` rule used in place of any boxed separator.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black (`{colors.background}`), not pure #000
- Use Playfair Display for every headline and Inter for every label/body
- Frame content with hairline rules, not shadows or fills
- Keep corners square (`{rounded.none}`) throughout
- Restrict color to the rayograph-silver accent — let photography supply the color
- Track eyebrows and buttons wide in uppercase

### Don't
- Don't introduce rounded cards, drop shadows, or gradients
- Don't bold Playfair into heavy weights — keep it 400-500
- Don't use saturated brand colors in chrome
- Don't set `primary` as a fill behind bone-white text (silver-on-bone fails contrast) — use it for marks and small accents
- Don't crowd images; honor the gallery hang spacing

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section gaps |
| Tablet | 600-1024px | Reading column, 2-up image grids |
| Desktop | >1024px | Full editorial layout, max 1100px content |

### Collapsing Strategy
- Hero serif scales 64px → ~40px, keeps tight leading
- Image grids: multi-up → single column full-bleed
- Nav: uppercase links → minimal toggle
- Section gaps: `{spacing.4xl}` → `{spacing.2xl}` on mobile

## Agent Prompt Guide

### Quick Color Reference
- Background: Darkroom Black `{colors.background}`
- Heading text: Bone White `{colors.ink}` in Playfair Display
- Body text: Silver Secondary `{colors.ink-secondary}` in Inter
- Accent / eyebrow: Rayograph Silver `{colors.primary}`
- Borders: Hairline `{colors.border}`

### Example Component Prompts
- "Hero on darkroom black `{colors.background}`. Uppercase Inter eyebrow in `{colors.primary}`, 12px, 2.4px tracking. Headline in Playfair Display 64px weight 500, color `{colors.ink}`, letter-spacing -1px. Lead paragraph Inter 18px in `{colors.ink-secondary}`."
- "Photo card: pure-black well `{colors.black-pure}`, square corners, framed by 1px `{colors.border}`. Caption below in Inter 12px `{colors.ink-secondary}`."
- "Primary button: bone-white `{colors.ink}` fill, `{colors.on-ink}` text, square corners, 14px 28px padding, uppercase Inter 13px 1.2px tracking."

### Iteration Guide
1. Square corners and hairline rules — never rounded cards or shadows
2. Playfair announces, Inter explains; keep the serif at 400-500
3. Color stays withheld; the silver accent is for marks, not fills
4. Spacing carries hierarchy — give images and headlines gallery air

---

## 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 Man Ray Diary. Brand names and trademarks belong to their respective owners.