--- title: "Palmer design system" variant: extended source: https://www.palmer-dinnerware.com/ captured_at: 2026-10-12 theme: light industry: ecommerce generator: Design DNA (https://four.wiralomi.com/style/palmer-dinnerware-com) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Palmer · Design System > Quiet canvas, sculptural dinnerware **Theme:** light · **Industry:** ecommerce · **Source:** https://www.palmer-dinnerware.com/ · **Captured:** 2026-10-12 (1440×900 desktop) _AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._ Palmer presents its dinnerware collections on a warm, near-white canvas, letting the ceramics supply the page’s color and texture. Oversized, restrained typography and sparse controls create an exploratory, gallery-like shopping experience. ## North star Keep the interface quiet and spacious so the dinnerware’s shape, glaze, and texture provide the page’s color and drama. ## Overview The page is built around a near-white, slightly warm canvas (#f5f6ee) that fills the viewport and keeps the ceramics visually prominent. Ink (#222222) is reserved for the Palmer wordmark, controls, and other high-contrast text; muted gray (#a1a19c) appears in subtle outlines and secondary link details. Large, lightweight TWK Lausanne display lettering introduces the collections with a closely tracked editorial feel, while compact body and control text stays quiet and functional. The first view behaves like an open tabletop gallery: individual plates and bowls float at varied positions and scales against generous negative space, with their glaze colors and irregular textures supplying most of the visual variety. Navigation and exploration controls are small and unobtrusive rather than framed as conventional promotional banners. Below, collection cards continue the product-first approach, with minimal decoration, restrained borders, and clear explore links. Spacious section rhythm and a broad desktop canvas keep the experience calm and tactile. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Gallery Ivory | `#f5f6ee` | `--color-gallery-ivory` | brand | Dominant page canvas and open gallery backdrop; also supports quiet text treatment. | | Soft Ink | `#222222` | `--color-soft-ink` | neutral | Wordmark, primary text, navigation, and dark interactive controls. | | Stone Line | `#a1a19c` | `--color-stone-line` | semantic | Fine outlines and understated link details, not a prominent section fill. | ### Semantic aliases `--color-canvas` → `#f5f6ee` (Gallery Ivory) · `--color-surface` → `#222222` (Soft Ink) · `--color-text` → `#222222` (Soft Ink) · `--color-text-muted` → `#f5f6ee` (Gallery Ivory) · `--color-border` → `#a1a19c` (Stone Line) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#222222` | `#f5f6ee` | 14.62:1 | AAA | | `#f5f6ee` | `#222222` | 14.62:1 | AAA | ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | TWK Lausanne | `--font-body` | webfont | 500, 400, 300 | Display headline, body copy, navigation, captions, and compact controls. | Inter | - **TWK Lausanne:** Use light weights for oversized display text with tight negative tracking; small labels stay restrained, mostly regular or medium. ### Type scale — Custom (ratio ≈ 8.889, base 13.5px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 120px | 300 | 0.9 | -0.04em | — | TWK Lausanne | Oversized collection introduction and editorial headline. | | body | 13.5px | 400 | 1.4 | -0.02em | — | TWK Lausanne | Short explanatory copy beneath the main collection heading. | | caption | 12px | 500 | 1.4 | 0 | — | TWK Lausanne | Compact collection labels and secondary product information. | | button | 12px | 500 | 1.4 | 0 | — | TWK Lausanne | Small, understated experience and filtering controls. | | nav | 120px | 300 | 0.9 | -0.04em | — | TWK Lausanne | Large menu treatment alongside compact navigation labels. | ## Spacing & layout - Base unit **4px**, density **spacious**. - Scale (most used values): 3, 4, 5, 6, 7, 9, 10, 12, 15, 16, 18, 24, 66, 80, 96, 144 px. - Section rhythm 96px · element gap 80px · card padding — · max content width 1410px. A broad desktop canvas is used as a single open composition rather than a conventional boxed grid. The measured page max width is 1410px; content aligns simply, while product imagery is dispersed across the hero with generous negative space. The introduction gives way to a collection gallery with a spacious section rhythm and low visual density. Controls sit close to the viewport edges or product group, preserving a clear view of the dinnerware. ## Shape & elevation - Radius: card `9px` · link `50%` · xs `3px` · sm `4px` · md `9px` · pill `9999px` - No box shadows measured: the page is flat. - Motion: standard transition `0.5s ease` on interactive elements. The interface is largely flat, with no measured shadow system or gradients. Product photographs carry natural tonal depth and subtle grounding, while fine gray outlines distinguish a few controls and card edges. Keep interface layering restrained; do not add heavy shadows or prominent filled panels. ## Imagery Product photography is the defining visual element: plates, bowls, and smaller serving pieces are isolated against the light canvas and shown from above. Pieces vary in scale and position, exposing glaze, rim, and surface texture. Their pink, blue, gray, and earthy hues belong to the merchandise imagery, not the measured interface palette. The treatment is clean and softly grounded, without decorative frames competing with the products. ## Components ### Wordmark Small dark Palmer mark sits at the upper-left edge of the open canvas. ### Experience view control Compact outlined control near the top, pairing a dot-like icon with an experience-view label. ### Gallery navigation Minimal menu and filter controls sit near the bottom of the product canvas, with dark and outlined treatments. ### Collection gallery Dinnerware pieces are spaced across the canvas as a free-form, exploratory product arrangement. ### Collection cards Three measured cards use a 9px radius, minimal borders, and small explore links alongside collection names and product counts. ### Explore controls Small text links and drag guidance invite browsing without introducing prominent CTA blocks. ### Measured component styles - **Primary button** (“color + \|”): transparent background · text #222222 · radius 0px · padding 0px 16px · 500 12px TWK Lausanne - **Link** (“explore explore”): transparent background · text #f5f6ee · radius 0px · padding 0px · 300 12px TWK Lausanne - **Card** (“explore explore Drag for more”): transparent background · text #222222 · border 1px solid · radius 9px · padding 0px · 300 12px TWK Lausanne - **Navigation item** (“Explore Palmerdinnerware collections Our”): transparent background · text #222222 · radius 0px · padding 0px · 300 12px TWK Lausanne ## Do - Use Gallery Ivory (#f5f6ee) as the dominant canvas. - Let product imagery provide the strongest color and texture. - Keep controls compact and visually secondary. - Use Soft Ink (#222222) for readable text and key controls. - Preserve generous negative space around products. - Use fine outlines sparingly for interactive boundaries. ## Don't - Do not introduce loud interface accent colors. - Do not arrange the hero as a dense conventional product grid. - Do not add large promotional buttons or banners. - Do not treat ceramic glaze colors as brand palette colors. - Do not add heavy shadows, gradients, or decorative panels. - Do not use oversized body copy or dense navigation. ## Agent prompt Build a new page in Palmer’s quiet, product-led style. Use Gallery Ivory (#f5f6ee) as the full-page canvas, Soft Ink (#222222) for the wordmark, text, and primary controls, and Stone Line (#a1a19c) only for subtle borders or secondary details. Set type in TWK Lausanne or a close Inter substitute: lightweight, tightly tracked display text paired with compact, calm body and control labels. Give the layout a broad, spacious composition with abundant negative space and clear editorial hierarchy. Make product imagery the visual focus; isolate pieces against the canvas and allow their real glaze colors and textures to add richness. Keep controls small, use borders sparingly, and avoid heavy shadows, gradients, dense grids, or loud promotional treatments. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Single-column introduction on a warm, full-width canvas with an oversized editorial heading. | Experience-view control, Minimal top navigation | Large lightweight heading, Compact outlined control, Open canvas | | 2 | category-nav | A spacious product gallery arranges dinnerware collections freely across the canvas. | Drag to explore, Filter collections, Explore collection links | Floating product images, Compact menu and filter controls, Minimal collection cards | ## Source CSS custom properties (selected) ```css --_theme---color--background: #f5f6ee; --_theme---color--body-text: #222; --_theme---color--heading: #222; --text-size--regular: 1em; --spacing--desktop-96px: 6em; --spacing--tablet-96px: 3.5em; --spacing--mobile-96px: 3em; --spacing--desktop-128px: 8em; --spacing--tablet-128px: 4em; --spacing--mobile-128px: 3.5em; --spacing--desktop-160px: 10em; --spacing--tablet-160px: 5em; --spacing--mobile-160px: 3.75em; --spacing--desktop-224px: 14em; --spacing--tablet-224px: 8em; --spacing--mobile-224px: 4.5em; --spacing--desktop-320px: 20em; --spacing--tablet-320px: 12em; --spacing--mobile-320px: 6em; --spacing--desktop-256px: 16em; --spacing--tablet-256px: 10em; --spacing--mobile-256px: 5em; --spacing--desktop-192px: 12em; --spacing--tablet-192px: 6em; --spacing--mobile-192px: 4em; --spacing--desktop-88px: 5.5em; --spacing--tablet-88px: 3em; --spacing--mobile-88px: 3em; --spacing--desktop-80px: 5em; --spacing--tablet-80px: 3em; --spacing--mobile-80px: 3em; --spacing--desktop-72px: 4.5em; --spacing--tablet-72px: 3em; --spacing--mobile-72px: 2.5em; --spacing--desktop-64px: 4em; --spacing--tablet-64px: 3em; --spacing--mobile-64px: 2em; --spacing--desktop-56px: 3.5em; --spacing--tablet-56px: 2.75em; --spacing--mobile-56px: 1.75em; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/palmer-dinnerware-com