Design a light-mode web interface screen: quiet tactile luxury shaped by dark petrol navigation against luminous bone ceramic surfaces.
LAYOUT
The viewport is organized into a fixed-width left architectural navigation rail (approx. 200px) and a fluid main workspace. Inside the workspace, a top utility header leads into a breadcrumb trail, followed by a balanced two-column product detail stage (gallery on left, commerce details on right). Below the fold, horizontal reassurance modules and three-column catalog grids provide steady rhythmic pacing.
PALETTE (use these exact hex values)
- #f9f8f6 — Canvas Bone: Primary page background providing a warm ceramic gallery warmth across all content areas
- #0d242a — Deep Petrol Slate: Full-height vertical sidebar navigation background anchoring the left viewport edge
- #ffffff — Card White: Clean surface for product cards, thumbnail containers, and input elements
- #f2f0ec — Tonal Cream: Background for feature callout containers and secondary highlight panels
- #166360 — Deep Spruce Teal: Primary interactive action for the add-to-cart button and active state trims
- #268a82 — Mineral Seafoam: Category labels, active sidebar indicator, and stock status indicators
- #1c2022 — Charcoal Black: Primary headings, pricing figures, and critical textual information
- #6f7578 — Muted Ash: Body copy descriptions, breadcrumbs, feature subtitles, and secondary icons
- #e7e5df — Soft Rim Border: Hairline dividers, card outlines, and quantity selector boundaries
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, EB Garamond, Bogart), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 36px heading. Tracking -0.01em at display. The typographic voice is quiet, cultured, and archival, evoking an exhibition catalog for high-end ceramics. Cormorant Garamond lends organic fragility and historical grace to titles, while Plus Jakarta Sans brings modern, legible Scandinavian clarity to prices and specs. Free open-source pairings like EB Garamond and Inter replicate this voice perfectly.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, airy density.
DEPTH
Depth is created primarily through color contrast and micro-borders rather than stacked drop shadows. The dark petrol sidebar establishes an architectural baseline, while related product cards float subtly with a faint ambient blur (box-shadow: 0 4px 20px rgba(0,0,0,0.03)) over the warm bone background. Layering feels like physical museum mounting rather than digital elevation.
IMAGERY
Photography emphasizes tactile studio craft: soft daylighting, matte ceramic crackle glazes, creamy ivory pottery, and muted slate pedestals. Backgrounds in photos match the warm gray-beige palette of the UI seamlessly. High-saturation lifestyle photography or high-gloss synthetic objects would completely rupture the artisanal atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the visual dialogue between the heavy, monolithic petrol-slate navigation column and the featherweight bone-and-ceramic showcase area. It transforms a standard e-commerce page into a curated design archive. To use it properly, keep sidebar icons gossamer-thin and allow the product images to carry the warmth.
MUST
- Anchor the layout with the full-height deep petrol sidebar (#0d242a) pinned to the left edge.
- Use high-contrast serif typography for product names and section titles to preserve artisanal luxury.
- Maintain generous padding (minimum 48px to 64px) between media modules and meta sections.
- Round product cards and trust banners generously with 12px to 16px corner radii.
AVOID
- Never replace the editorial serif headings with generic geometric sans-serif typefaces.
- Do not use harsh 100% black text (#000000); use deep charcoal (#1c2022).
- Avoid stark saturated red or orange badges; denote stock and alerts with mineral green (#268a82).
- Do not allow the sidebar to collapse into a standard hamburger unless below tablet breakpoints.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2576:3200. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
