Design a light-mode web interface screen: slow-crafted pottery catalog wrapped in sunlit terracotta, warm linen surfaces, and sculpted arches.
LAYOUT
The page flows as a deliberate asymmetrical editorial spread. A top-heavy two-column hero pairs left-aligned typography with an oversized right-hand arch collage. The narrative alternates downward through two-column storytelling, a triad feature matrix, and a full-width collection preview anchored by minimal carousel controls.
PALETTE (use these exact hex values)
- #F9F6F0 — Linen Canvas: Global background providing a warm, raw-paper baseline across the entire viewport
- #F1ECE4 — Parchment Card: Subtle low-contrast container surface used for featured collection cards and architectural arch backdrops
- #1E1B18 — Deep Espresso: Primary headline typography, header branding, and iconography delivering dense organic contrast
- #6C665F — Earth Umber: Body copy, narrative paragraphs, and subtle metadata labels
- #A35C47 — Terracotta Rust: Eyebrow categories, accent italic highlights, primary CTA buttons, and decorative rule lines
- #5E6C58 — Olive Leaf: Collection badge chip backgrounds communicating botanical, sustainable materials
- #D8D2C7 — Stone Border: Hairline circular carousel controls and card frame delimiters
TYPOGRAPHY
Typeface Cormorant Garamond (or Canela, Ogg, Playfair Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 28px heading, 44px heading-lg, 64px display. Tracking -0.02em at display, -0.01em at heading. The typography speaks with the quiet poise of an independent art publication. Cormorant Garamond conveys literary tradition, timeless craftsmanship, and warmth through delicate bracketed serifs and flourishing italics. A clean geometric sans provides clinical restraint and high legibility for logistics and product descriptions.
GEOMETRY & SPACING
Corner radii — cards 0px, links 0px, inputs 0px, buttons 0px. Spacing on a 8px unit, 32px gaps, 120px between sections, 1240px container, airy density.
DEPTH
Depth is created entirely through planar layering and tonal shifts rather than shadows. Off-white parchment shapes (#F1ECE4) rest flatly on the linen foundation (#F9F6F0), accompanied by overlapping image cutouts. No box-shadows or elevation blurs are permitted.
IMAGERY
Photography emphasizes natural directional sunlight, tactile earthenware glazes, textured linen tablecloths, and human hands interacting with raw clay. Shots are framed through soft architectural arch cutouts or razor-sharp rectangular borders. Overly saturated or synthetic commercial imagery breaks the mood.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive motif is the asymmetrical terracotta-accented headline paired directly with an architectural portal arch collage. The juxtaposition of razor-straight rectilinear UI against a sweeping 240px top-curved photograph creates an immediate gallery exhibition tone. Misuse occurs when arches are applied randomly to small cards or without the offset stone backing layer.
MUST
- Use pure rectangular bounds (0px radius) for all functional UI containers, buttons, and card borders.
- Pair upright Cormorant Garamond display headings with an occasional, single-word italic highlight in terracotta (#A35C47).
- Retain the warm parchment ground (#F9F6F0) globally; avoid shifting into clinical sterile white (#FFFFFF).
- Employ ultra-wide tracking (0.15em to 0.22em) on all uppercase sans-serif eyebrow metadata and logos.
AVOID
- Never add drop shadows, blurry glows, or artificial elevated layering effects.
- Do not round the corners of action buttons, form inputs, or content cards.
- Avoid bright saturated blues, purples, or synthetic neons that conflict with the earth-toned palette.
- Do not apply heavy sans-serif typography to section headlines or product titles.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1392:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
