Design a light-mode web interface screen: sunlit linen, warm ceramic glaze, and terracotta earth grounding a calm, mindful morning coffee ritual.
LAYOUT
The page flows vertically from a utility banner into an airy two-column product hero (left: styled pouch photography, right: purchase module and narrative tabs). Below the hero, the layout transitions to a centered radial showcase orbiting a top-down coffee cup. It then moves into a structured comparison table with a highlighted brand column, backed up by a persistent floating checkout bar at the viewport bottom.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Alabaster: dominant page background providing warmth without sterility across all primary viewports
- #EFECE6 — Oat Column Tint: subtle card fill and highlighted comparison table column backing the core product
- #1B2E24 — Deep Pine: top utility banner surface providing high-contrast editorial grounding
- #B84328 — Terracotta Rust: primary call-to-action buttons, active cart pill badges, and category overline accents
- #566858 — Herbaceous Sage: circular feature badges, success checkmarks, and botanical visual indicators
- #1E1E1E — Espresso Ink: primary titles, serif headers, price values, and crisp structural text
- #6E6862 — Muted Umber: secondary body copy, metadata dividers, and subtle navigational link states
- #E2DCD5 — Bone Divider: hairline borders across quantity steppers, tab dividers, and table cell lines
TYPOGRAPHY
Typeface Canela (or Playfair Display, Fraunces, Ogg), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 42px display. Tracking -0.01em at display, 0 at heading. The typographic tone balances apothecary heritage with modern lifestyle wellness. The editorial serif headings project thoughtful craftsmanship and culinary pedigree, while the clean geometric sans keeps purchasing specs, nutrition facts, and dosage instructions effortless to scan. For web implementations, Canela or Fraunces paired with DM Sans perfectly preserves this organic editorial balance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered organically through lighting within photography rather than UI drop shadows. The layout adheres to a completely flat, paper-like plane where elements are distinguished by subtle background fills and hairline borders. The only floating element with an elevation shadow is the sticky bottom conversion pill, using a soft 0 8px 30px rgba(0,0,0,0.06) ambient blur.
IMAGERY
Photography relies on warm, natural afternoon sunlight, organic earthenware ceramics, textured linen, and dappled foliage shadows. Mockups avoid sterile 3D renders in favor of textured tactile pouch packaging in soft plaster alcoves. Stock corporate models or loud beverage splashes are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The radial orbit feature map: a bird's-eye view ceramic coffee cup framed by faint concentric dashed circles, flanked symmetrically by three circular sage feature badges on each side. It visually communicates brewing perfection as a mindful, centered ceremony rather than just an ingredient checklist. Misusing this by removing the concentric rings or misaligning the horizontal badge symmetry degrades the serene ritual feel into a standard spec sheet.
MUST
- Use warm alabaster (#FAF8F5) rather than pure clinical white for page-level backgrounds.
- Pair high-contrast editorial serifs for titles with utilitarian sans-serif for microcopy and pricing.
- Render primary action buttons as solid, borderless terracotta (#B84328) pills.
- Enclose icon nodes inside soft sage (#566858) filled circles with clean white line drawings.
AVOID
- Do not use sharp drop shadows or glossy gradients; every surface must feel matte and tactile.
- Never apply pure cold grays (#808080) for muted copy; always use warm umber tints (#6E6862).
- Avoid rectangular buttons with sharp 0px corners in the hero buy area; stick strictly to pills.
- Do not use saturated blue, purple, or neon accents anywhere in the UI.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2208:3744. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
