The gallery on a screen
Museumcore borrows the language of exhibitions: art hung with room around it, a refined serif for titles, and small sans-serif labels (“placards”) giving the details. The page is curated, not crowded — restraint and typography do the work.
Elegant serif type
A high-contrast serif like Playfair for titles signals culture and timelessness.
Framed works
Images sit in thin mats and frames, hung with generous space like pieces on a wall.
Curatorial labels
Small placards give title, artist, medium, and year — the museum caption convention.
Quiet & spacious
Lots of cream whitespace and a calm, neutral palette let each piece breathe.
Framed work & placard
The core unit: a matted, framed image with a small label beneath giving the curatorial details in classic museum format.
<figure class="framed">
<div class="frame"><img src="work.jpg" alt="Composition in Ochre"></div>
<figcaption class="placard">
<span class="t">Composition in Ochre</span>
<span class="meta">Ada Verdi, b. 1981 · Oil on linen, 2024</span>
</figcaption>
</figure>
.frame { padding: 14px; background: #fdfcf9; border: 1px solid #d8d2c4; /* mat + frame */
box-shadow: 0 2px 2px rgba(0,0,0,.06); }
.placard .t { font-family: 'Playfair Display', serif; font-style: italic; }
.placard .meta { font-size: .76rem; color: #6e685c; } /* small, quiet label */
The exhibition wall
Works of varying heights, aligned along a baseline like a salon hang — uneven on top, grounded at the bottom.
<div class="wall"> <figure class="piece a1"><div class="art"></div><figcaption class="cap">Untitled I</figcaption></figure> <figure class="piece a2"><div class="art"></div><figcaption class="cap">Study, dusk</figcaption></figure> <figure class="piece a3"><div class="art"></div><figcaption class="cap">Fragment</figcaption></figure> <figure class="piece a4"><div class="art"></div><figcaption class="cap">Form & field</figcaption></figure> </div>
.wall { display: grid; grid-template-columns: repeat(4, 1fr);
gap: 22px; align-items: end; } /* baseline align = salon hang */
.piece { background: #fdfcf9; border: 1px solid #d8d2c4; padding: 8px; }
.piece .art { width: 100%; }
.cap { font-size: .68rem; color: #6e685c; margin-top: 6px;
font-family: 'Playfair Display', serif; font-style: italic; }
/* each piece gets its own height for a natural, uneven top edge */
.a1 .art { height: 90px; background: linear-gradient(135deg,#b08968,#cdb98e); }
.a2 .art { height: 130px; background: linear-gradient(135deg,#8a8577,#6e685c); }
.a3 .art { height: 70px; background: linear-gradient(135deg,#cdb98e,#e3d8c2); }
.a4 .art { height: 110px; background: linear-gradient(135deg,#5c5848,#b59b6e); }
Editorial type & pull quote
A serif display headline with a calm sans lede, and a framed pull quote — the voice of a catalogue essay.
On restraint, and the space around a thing.
An exhibition is mostly empty wall. The emptiness is the point — it tells you where to look.
To frame something is to say: this deserves your attention.— Gallery notes, 2026
h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.lede { font-family: Inter, sans-serif; color: #4a463c; } /* serif title + sans body */
.pullquote { border-left: 3px solid #b59b6e; padding-left: 20px; }
.pullquote q { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.3rem; }
A whole page in this style
The museumcore aesthetic assembled into an exhibition page — serif nav, a quiet titled hero, and a framed gallery wall of real works with curatorial captions.
Light & Form
A study of stillness across three rooms. Free admission, Tuesday–Sunday.
<div class="page">
<nav><span class="logo">The Quiet Gallery</span>…</nav>
<header class="hero">
<p class="eyebrow">Now showing</p>
<h1>Light & Form</h1>
</header>
<section class="wall">
<figure class="piece">
<img src="work.jpg" alt="Untitled I">
<figcaption>Untitled I</figcaption>
<span class="meta">A. Verdi, 2024</span>
</figure>
</section>
</div>
/* refined serif for titles, sans for body */
.logo, h1, figcaption { font-family: 'Playfair Display', serif; }
body { font-family: Inter, sans-serif; background: #f4f1ea; color: #1c1a16; }
/* framed works on a salon wall, baseline-aligned */
.wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
gap: 28px; align-items: end; } /* uneven tops, grounded bottoms */
.piece { background: #fdfcf9; border: 1px solid #d8d2c4; padding: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,.06); } /* mat + thin frame */
.piece .meta { font-size: .72rem; color: #6e685c; } /* small curatorial label */
<img src> and give every piece its own height for the natural salon-hang look. Free photos at Unsplash.Do & don't
Do
- Use a refined serif for titles
- Give every piece generous whitespace
- Add small, quiet curatorial labels
- Keep a calm, neutral palette
- Align works to a baseline like a wall
Don't
- Crowd the page with content
- Use loud colors or heavy UI chrome
- Add big shadows or gradients on frames
- Shout with huge bold sans headlines
- Skip the captions — they're the charm
The takeaway
Museumcore = an elegant serif, framed works with small curatorial placards, a neutral palette, and vast whitespace, hung along a baseline like a gallery wall. Curate, don't crowd — let typography and space carry it.