Museum collection
Rijks Room
An editorial museum page that hangs Dutch masters from the Rijksmuseum's open data in gilt frames on a warm paper wall.
Gallery Editorial Light Live data MIT-0 code No API key
About this template
Rijks Room walks the Rijksmuseum's Linked Art data: a collection search by painter, then each object, its visual item and its digital object, to reach the IIIF image service. The result is a small room of up to nine paintings per artist, with titles and dates in English.
The look is classic print editorial: a light Fraunces serif with an italic gold accent, a faint paper grain drawn with an SVG noise filter, frames built from CSS gradients and inset shadows, and an underline that glides between painter names. Opening a painting shows it at 1400 px from the museum's IIIF server.
What is on the page
- Small caps top bar and a two-column editorial header
- Wide gallery photo revealed from the center
- Painter tabs with a sliding gold underline
- Grid of framed paintings with captions
- Dark lightbox with the large image and a link to the museum record
Motion and effects
- Headline words rise in one after another
- Hero image opens with a clip-path reveal
- Frames lift and tilt slightly on hover with a warm spotlight
- Underline slides to the active painter
- Paintings fade up into view; button fills from below on hover
DESIGN.md
The whole style in one file: colors with their roles, type scale, components, layout, depth, motion and the rules on what not to do. Give it to your coding agent together with the prompt below, or keep it at the root of your project.
Read it here
# 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.
Prompt to build your own
Build a single-file editorial museum page (HTML, CSS, vanilla JS) on the Rijksmuseum open data API. Fetch https://data.rijksmuseum.nl/search/collection?type=painting&creator=NAME with Accept: application/ld+json, then for each item follow shows -> digitally_shown_by -> access_point to get the IIIF image URL (use /full/600,/ for the grid and /full/1400,/ for the lightbox); take the English title and the date. Style: warm paper background with a subtle SVG noise grain, a light Fraunces display headline with an italic gold word, small caps top bar, a wide gallery photo revealed with clip-path, painter tabs in italic serif with a sliding gold underline, and a grid of paintings in CSS-gradient gilt frames with a white mat that lift on hover. Lightbox: dark native <dialog>. Fonts: Fraunces and Instrument Sans. Credit the Rijksmuseum.
Paste it into Claude Code, Cursor, Codex or any coding agent, then swap the data source and the words to make it yours.
Good reference for
- Museum, gallery and auction sites
- Editorial and magazine layouts
- Any warm, print-like light theme