Design a light-mode mobile app interface screen: quiet horology editorial draped in warm ecru, tailored serifs, and reserved burgundy accents.
LAYOUT
The mobile canvas follows a top-down editorial rhythm. A minimalist 56px utility bar leads into an expansive edge-to-edge hero carousel containing the flagship story. Below, a clean section header pairs an editorial headline with a right-aligned text link, introducing a horizontal card rail of category tiles before terminating in an inset trust guarantee strip.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary screen background and clean base behind lifestyle photography
- #F7F6F2 — Warm Linen: Background fill for bottom trust badge banner and inactive dots
- #1A1A1A — Editorial Noir: Primary typography, top bar branding, and active header icons
- #706B69 — Muted Slate Taupe: Subheadings, descriptive body copy, and secondary category indicators
- #64182B — Burgundy Claret: Primary call-to-action button fill and active pagination indicator
- #F4E6E4 — Blush Wash: Soft atmospheric gradient container for women's product collections
- #DBE5ED — Powder Steel: Subtle cool-grey background container for men's metal strap watches
- #F5F0E6 — Warm Champagne: Soft metallic container backdrop for limited edition and gilded timepieces
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Didot, Bodoni MT), weights 400/500. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 18px subheading, 22px heading, 34px display. Tracking -0.01em at display, 0 at title. The voice is European, understated, and timeless. The delicate high-contrast strokes of Cormorant Garamond echo traditional luxury craftsmanship and classic magazine headlines, while the quiet geometric precision of Inter grounds the experience in modern Scandinavian-Dutch usability.
GEOMETRY & SPACING
Corner radii — cards 14px, links 2px, inputs 6px, buttons 8px. Spacing on a 4px unit, 12px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely through photographic staging, natural drop shadows cast by physical objects on linen surfaces, and subtle tonal variation between card fills. The UI avoids CSS box-shadows, maintaining a pristine, print-magazine editorial plane.
IMAGERY
Studio macro photography of timepieces positioned against organic textural backdrops like natural stone, silk ribbons, and coarse woven ecru fabric. Lighting is soft and diffuse, emphasizing brushed steel, rose gold, and stitched leather straps without harsh glare or digital gradients.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious friction between delicate editorial serif titles ('La Bohème Collection') and a solitary, deep burgundy rounded CTA button nestled against warm ecru linen textures. Misusing this means substituting the rich wine red with generic modern black or high-saturation commercial red.
MUST
- Retain wide, deliberate letter-spacing (0.15em to 0.3em) on all uppercase sans-serif text strings.
- Pair rich editorial serifs strictly with clean, high-contrast, uncluttered lifestyle photography.
- Limit saturated color strictly to the deep burgundy CTA button and active carousel dot.
- Use distinct, low-saturation pastel fills (blush, ice blue, ecru) to visually segment category tiles.
AVOID
- Do not introduce sharp 0px card borders or heavy dropshadows; depth is purely atmospheric.
- Do not use high-saturation primary red or electric colors for accents or notifications.
- Do not set long paragraphs in Cormorant Garamond; restrict serifs to headings and collection names.
- Do not crowd category cards with prices, star ratings, or discount badges on this overview screen.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
