Design a light-mode web interface screen: tactile earthen ceramics framed by architectural white space and singular cobalt blue punctuation.
LAYOUT
The layout progresses logically from a striking 50/50 hero split (editorial copy with value indicators on the left, arched photo on the right) down to a storytelling narrative module. The narrative module contrasts a left-aligned manifesto and ghost button against two side-by-side artisan process images. Below, a collection showcase introduces horizontal momentum with a 4-column product rail navigated by circular carousel buttons.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary background plane providing high-contrast gallery breathing room across all sections.
- #191c1f — Carbon Black: High-contrast text for headlines, body copy, icons, and primary branding.
- #1a4eb8 — Cobalt Accent: Strategic high-attention accent for eyebrows, primary CTA background, and active badge counts.
- #606770 — Muted Slate: Secondary copy, descriptive subtitles, and supporting paragraph texts.
- #e2e5e9 — Subtle Border: Delicate hairline outlines on ghost buttons, circular carousel controls, and dividers.
- #efeae4 — Warm Sand: Warm photographic ambient fill echoing raw clay and linen textures.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, DM Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 48px display. Tracking -0.02em at display, 0.08em at uppercase captions. The voice is serene, deliberate, and gallery-grade. The modern sans (Plus Jakarta Sans or General Sans) provides functional clarity and geometric poise, while the single italic serif word ('for') injects an artisanal, human touch into an otherwise structured layout. If Plus Jakarta Sans is unavailable, Inter or General Sans provide seamless geometric replacements.
GEOMETRY & SPACING
Corner radii — cards 8px, links 0px, inputs 4px, buttons 2px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1240px container, airy density.
DEPTH
Depth is communicated purely through photographic composition, tactile textures, and tonal hierarchy rather than drop shadows. Surface layers rest on a uniform #ffffff ground, utilizing crisp 1px borders (#e2e5e9) to define interactive buttons without elevating them above the plane. The interface creates spatial layering through natural object shadows within the high-end studio photography.
IMAGERY
Photography is warm, tactile, and naturalistic, featuring raw ceramic stoneware, unbleached linen drapery, and dried botanicals under soft diffused daylight. Images emphasize organic imperfect glazes, wheel-throwing hands, and neutral beige/sand backdrops. High-saturation, neon, or artificial high-contrast studio rendering is strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 260px architectural arch masking the hero image paired with a vivid cobalt blue CTA button. This signature move marries organic pottery curves with modern geometric restraint. It is misused when applied symmetrically across all images or executed in overly round, playful radii rather than an intentional architectural curve.
MUST
- Use cobalt blue #1a4eb8 exclusively for high-intent actions, category tags, and active states.
- Reserve the sweeping 260px asymmetric arch radius for primary visual storytelling anchors.
- Apply italic serif styling exclusively to a single emotive preposition or word in the display heading.
- Ensure all product photos share warm, tactile lighting with linen, stone, and beige undercurrents.
AVOID
- Do not introduce multiple saturated colors; cobalt is the sole energetic chromatic hue.
- Do not use heavy drop shadows; depth must emerge purely from photographic light and crisp borders.
- Do not round the primary action buttons into full pills; keep them nearly square with 2px radius.
- Do not set full body paragraphs in serif; Cormorant Garamond is strictly for editorial accentuation.
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 中尝试 
