Gallery Cream
#f5f6eePage canvas and base surface — a warm off-white that flatters glazed ceramics more than pure white would
Palmer
palmer-dinnerware.comWebsite preview
The design language
Palmer treats dinnerware like a museum exhibit on a warm cream canvas (#f5f6ee). The interface dissolves — no shadows, no chrome, no saturated accents — so hand-glazed ceramics become the only color in the room. Typography runs tight: TWK Lausanne at near-mono weights (300–500) with aggressive negative tracking that pulls letters together, including an enormous 120px display tier that functions more as editorial statement than UI label. Interactive elements are reduced to hairline borders and pill-shaped toggles, sitting at the edges of the viewport to leave the center completely uninterrupted. Everything below the fold assumes the same gallery logic: small text, thin rules, generous space between objects.
Color palette
neutral
Ink
#222222Primary text, hairline borders, card outlines, icon strokes — the entire structural skeleton runs through this one near-black
Bone
#ffffffProduct image backgrounds, occasional inverse surface when a card needs to sit forward of the cream canvas
Fog
#a1a19cMuted secondary borders and low-priority text — used when Ink would be too heavy for a structural divider
Lampblack
#000000Reserved for the rare filled element (active nav background, weight anchors) — used sparingly so Ink remains the default voice
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
120px · 300 · 0.9 · -0.04px trackingThe quick brown fox jumps
body-lg
18px · 300 · 1.4 · -0.03px trackingThe quick brown fox jumps
text-16
16px · 700 · 1.4The quick brown fox jumps
body
14px · 400 · 1.4 · -0.02px trackingThe quick brown fox jumps
text-12
12px · 500 · 1.4The quick brown fox jumps
caption
11px · 500 · 1.4 · -0.02px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
TWK Lausanne
- Weights
- 300, 400, 500, 600, 700
- Sizes
- 11px, 12px, 14px, 16px, 18px, 120px
- Line height
- 0.90 (display), 1.40 (body)
- Letter spacing
- -0.04em at 120px display, -0.03em at 18px, -0.02em at 11–16px
- Fallback
- Inter Tight or Neue Haas Grotesk Display Pro at matching weights
Sole typeface — handles everything from micro-labels to 120px editorial display. Weight 300 carries display and large headings (whisper-thin Swiss grotesque that lets the ceramics dominate), weight 400–500 for body and UI, weight 600–700 reserved for active states and filter labels. The tight letter-spacing (-0.04em at display, -0.02em at body) is signature: characters nestle together, giving even 11px labels a compressed, considered feel rather than airy defaults.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 12px
Border radius
card
9pxinput
3pxbutton
3pxnav-pill
100pxSpacing scale
3px4px5px6px7px9px10px12px15px16px18px24px66px80px96px144px288pxGuidelines
Do
- Use #f5f6ee for every page background — never pure white, it flatters the ceramics and signals the editorial tone
- Set all borders to 1px solid #222222 — hairlines are the only structural separator in the system
- Reach 120px for editorial display headlines in weight 300 with -0.04em tracking — the extreme scale is part of the brand voice
- Use 100px border-radius only for pills (toggles, filter chips, zoom buttons) and 9px for cards, 3px for everything else
- Set type at weight 300–400 for display and large headings; reserve 600–700 for active/selected states only
- Keep interactive elements at the viewport edges (top-center toggle, bottom-center control bar) so the center stays open for product imagery
- Use letter-spacing -0.02em on all body sizes (11–16px) and tighten further as type scales up
Don’t
- Don't introduce any chromatic accent color — the ceramics supply all the color, the UI stays grayscale
- Don't add drop shadows to cards, buttons, or nav — borders alone define depth
- Don't use corner radius above 100px or below 3px — the three tiers (3px, 9px, 100px) are the complete system
- Don't set type at weight 600+ in display sizes — it would overwhelm the whisper-thin signature of the 120px tier
- Don't use pure black (#000000) for text — Ink (#222222) is the text color; black is reserved for filled active states
- Don't add background color to the main canvas behind product photography — flat cream is non-negotiable
- Don't use letter-spacing 0 or positive values — all text tracks negative
Components
Experience View Toggle
Primary mode switcher floating top-centerPill-shaped container (100px radius) with a 1px Ink border, 7px vertical padding, 15–16px horizontal padding. Contains a small icon (dot grid) and 'experience view' label at 12px weight 400, color Ink. Sits on the cream canvas with no background fill — it's an outlined ghost pill.
Scattered Product Tile
Individual ceramic piece in the main editorial canvasSquare or near-square product photograph, no border, no radius (products are cut sharp or with minimal rounding). Cast with a soft natural shadow only from the photography itself, not from CSS. Positioned at irregular intervals across the full viewport — layout is curated, not gridded.
Bottom Control Bar
Fixed footer with menu and filter togglesSits at viewport bottom center. Contains two adjacent pill buttons: 'menu' (with hamburger icon) and 'filter' (with list icon), each at 3px radius, Ink text on cream, 1px Ink border, ~12–14px type. A 'Drag to rotate' hint with zoom in/out circular buttons sits at bottom-right.
Navigation Link
Text link in top-left brand mark and ancillary nav'palmer' wordmark at top-left, 16px weight 400–500, color Ink, no decoration. No traditional nav bar — secondary navigation appears contextually.
Zoom Control
Circular zoom in/out buttonsTwo small circles, ~24px diameter, 100px radius (fully rounded), 1px Ink border on cream fill. '+' and '−' glyphs centered at 12px Ink.
Filter Chip
Category or attribute filter in menu modeOutlined pill, 100px radius, 1px Ink border, 12px weight 500 label, cream background. Active state fills with Ink and inverts text to cream/white. No drop shadow, no scale on hover.
Card Surface
Product card used in grid/list views (non-scattered mode)9px corner radius, 1px Ink border, 16px internal padding, cream fill (#f5f6ee). No shadow — depth comes from the border alone. Image fills top edge to edge inside the radius.
Input Field
Text input for search or filter3px radius, 1px Ink border, cream fill, 14px placeholder text in Fog (#a1a19c). Focus state darkens border to Lampblack (#000000) with no ring.
Surfaces & elevation
Level 0
Gallery Canvas
#f5f6eeThe base page surface — warm off-white, used everywhere as the default background
Level 1
Card Surface
#f5f6eeCards use the same cream fill — depth comes from the 1px Ink border, not a lighter or darker shade
Level 2
Inverse Surface
#222222Rare filled-dark surface for active states and inverted sections (e.g., dark product detail panels)
No shadows. Depth is communicated entirely through 1px borders and the inherent shadows in product photography. The cream canvas is flat and shadowless — any drop shadow would break the gallery-wall illusion.
Layout & imagery
Layout
Full-bleed viewport with no max-width constraint. The hero IS the product scatter: ceramic pieces distributed across the entire viewport at curated positions, not a grid. Navigation chrome is pushed to the corners (wordmark top-left, toggle top-center, control bar bottom-center), leaving the center field entirely to imagery. This is a one-screen-first experience — the scatter is the hero, and all secondary UI (menu, filter, zoom) is conditionally revealed. Section rhythm is minimal: one viewport, one scattered composition, minimal text. No traditional alternating bands.
Imagery
Pure product photography — top-down or 3/4-angle shots of individual ceramic pieces (plates, bowls) on transparent or cream backgrounds. No lifestyle context, no hands, no tablescapes. Each piece is cropped with slight shadow to imply contact with a surface. Imagery is the only source of color on the site: glazed blues, olive greens, speckled whites, amber browns. Density is high but breathable — pieces are scattered with deliberate negative space between them, curatorial rather than catalog.
Design notes
Agent Guide
**Quick Color Reference** - text: #222222 - background: #f5f6ee - border: #222222 (1px) - muted: #a1a19c - active fill: #000000 - primary action: no distinct CTA color **Example Component Prompts** 1. **Create a scattered product hero:** Full-bleed #f5f6ee canvas. Place 8–10 circular ceramic plate images at irregular positions across the viewport (no grid, no alignment). Each image ~120–200px wide, no border, no background, slight drop shadow baked into the photo only. No headline, no subtext — the products are the entire viewport. 2. **Create the experience view toggle:** Top-center of viewport, pill shape (100px radius), 1px solid #222222 border, no fill. Inside: small dot-grid icon (3×3 dots, #222222) + 'experience view' label at 12px TWK Lausanne weight 400, #222222, letter-spacing -0.02em. Horizontal padding 15px, vertical 7px. 3. **Create the bottom control bar:** Fixed to viewport bottom-center. Two adjacent ghost buttons with 3px radius, 1px #222222 border, cream fill. Left: hamburger icon (3 horizontal lines, #222222) + 'menu' label at 12px weight 500. Right: list icon (3 dots with lines) + 'filter' label at 12px weight 500. Gap between them: 4px. 4. **Create a product card (grid mode):** 9px corner radius, 1px solid #222222 border, #f5f6ee fill, 16px padding. Product image fills width, edge-to-edge inside the radius. Below image: product name at 14px weight 400, #222222, letter-spacing -0.02em. Price at 12px weight 400, #a1a19c. No shadow. 5. **Create a zoom control:** Bottom-right of viewport. Two stacked circular buttons, 24px diameter, 100px radius, 1px #222222 border, #f5f6ee fill. Top circle: '+' glyph at 12px #222222. Bottom circle: '−' glyph at 12px #222222. 4px vertical gap between them.
Similar brands
HAY (Danish furniture/design retailer)
Same Scandinavian editorial-product approach — objects float on a warm neutral canvas with minimal typographic chrome, the catalog reads like a magazine spread
Menu Space (Audo Copenhagen)
Full-bleed product photography on warm off-white, hairline borders instead of shadows, sparse Swiss-grotesque type, no traditional e-commerce navigation
Atelier Vime
Artisanal ceramics presented as gallery objects — similar warm canvas, scattered composition, typographic restraint, ceramics supplying all the color
The New Craftsmen
British craft retailer with editorial gallery layout, warm neutral canvas, minimal UI chrome, letting handmade objects carry the visual weight
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
