# Rijks Room — DESIGN.md

An editorial museum page. Family: warm editorial, light.

## 1. Visual theme and atmosphere

A printed exhibition catalog on warm paper. Serif display, generous margins, gilt frames, and nothing that looks like software. Mood: unhurried, cultured, tactile.

## 2. Color palette and roles

```
--bg:     #f4efe6   /* paper */
--wall:   #ece4d5   /* loading walls, mats */
--line:   #ddd2bf
--ink:    #1d1a16
--mute:   #6f665a
--gold:   #a07a2c   /* the accent: italic word, active tab underline, links */
--gold2:  #d4ae5a   /* lighter step of the same gold, for highlights on dark */
```

Frames are their own material: a CSS gradient through dark and light browns (`#3a2c17` to `#7b5f2e`), not a palette color.

## 3. Typography

- Display and titles: **Fraunces** (variable, optical size 9–144). Headline 300 weight, `clamp(52px, 9vw, 128px)`, tracking −0.035em; one italic word in 600 gold.
- Painter tabs: Fraunces italic 22px.
- Body and labels: **Instrument Sans** 400–600, 15px; small caps style labels at 13px with 0.1–0.14em tracking.

Serif headline over sans body is a stated choice of this design.

## 4. Components

- **Top bar:** small caps name left, place right.
- **Header:** two columns, headline left, intro and an outline button right ("The full collection →"). The button fills with ink from below on hover.
- **Painter tabs:** italic serif words with one gold underline that slides to the active tab.
- **Framed painting:** 14px gradient frame, ivory mat, inset shadow, 4:5 image; caption in Fraunces 19px with "painter · date" below.
- **Lightbox:** dark warm panel, image left, italic title, meta and a link to the museum record right.

## 5. Layout

Max width 1160px, 24px gutter. Grid of paintings with 250px minimum columns, 44px row gap. Phones: header stacks, hero image 200px tall.

## 6. Depth

Frames carry the only real shadow (one soft drop under each frame). Paper grain is an SVG noise filter at 5% opacity over the whole page.

## 7. Motion

- Headline words rise in once; the hero image opens from the center with a clip-path reveal.
- Frames lift 8px and tilt −0.4° on hover with a warm light from above: you are about to pick it.
- Underline slides between painters; paintings fade up once as they enter.
- `prefers-reduced-motion`: all shown at rest.

## 8. Do and don't

Do: credit the museum on every record; let whitespace do the work; keep gold rare.
Don't: decorative color rules beside captions, sans-serif display, bright UI colors, rounded "app" cards.

## 9. Agent prompt guide

Bias: paper, serif, gold, frames, slow reveals, editorial two-column header.
Reject: dark mode by default, gradients on UI, pill-shaped tags, icon-heavy chrome.

## Data and credits

Rijksmuseum open data (Linked Art search and IIIF images; the museum shares them openly, credit the Rijksmuseum). Gallery photo from Pixabay, file kept with the page, author credited. Code MIT-0.