Design a light-mode mobile app interface screen: understated high-jewelry commerce framed by deep botanical greens, warm champagne accents, and poetic editorial serifs.
LAYOUT
The vertical composition is organized into four distinct narrative tiers on a 390px mobile canvas. It begins with an unhurried editorial header combining romantic flora and poetic typography, descends into an elevated four-pillar category dock, presents a high-impact horizontal banner card in saturated forest green, and concludes with a two-to-three column horizontal carousel of product ring cards titled 'Top Picks'.
PALETTE (use these exact hex values)
- #133E37 — Deep Forest Emerald: Hero featured collection card surface, primary brand contrast, and active pagination indicator.
- #CAA07E — Warm Champagne: Editorial highlight words, logo linework, and secondary decorative category iconography.
- #F7F8F6 — Canvas Alabaster: Dominant viewport background creating an organic, non-clinical light atmosphere.
- #FFFFFF — Pure White: Background for product cards, category navigation bar, and high-contrast pill badges.
- #182220 — Charcoal Ink: Primary typography for top-level headlines, product titles, and critical line items.
- #8B9E99 — Sage Mist: Secondary labels, jewelry categories, inactive pagination counters, and subtle iconography.
- #E7F0ED — Pale Celadon: Pill badge backgrounds and circular category button fills for active states.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display,Ogg,Epitrip), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 18px subheading, 24px heading, 28px heading-lg, 34px display. Tracking -0.01em display, normal at subheadings. The typographic character evokes an exclusive boutique catalog or bespoke high-fashion journal. Cormorant Garamond provides classical stateliness and poetic grace with its slender serifs and graceful italic-like curves, while Plus Jakarta Sans delivers surgical, modern clarity for e-commerce transactions and pricing. Substitute with Playfair Display and Inter if needed.
GEOMETRY & SPACING
Corner radii — cards 20px, links 0px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, airy density.
DEPTH
Depth is created using gentle atmospheric layers rather than harsh geometric drop shadows. The base ground is tinted alabaster, upon which pure white cards rest with an ultra-soft blur (0px 8px 24px rgba(19, 62, 55, 0.04)). The deep emerald showcase card provides tonal depth through strong color contrast rather than z-index elevation.
IMAGERY
Imagery follows two distinct visual disciplines: soft-focus bridal flora (blush English roses, white hydrangeas, and eucalyptus) integrated seamlessly into header compositions, and macro cut-out jewelry renders. Jewelry assets must feature studio lighting, hyper-sharp diamond facets, and faint natural floor drop-shadows. Busy or lifestyle-in-hand photography would corrupt the pristine brand elegance.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the seamless contrast between the airy floral ivory canvas and the deep emerald showcase card (#133E37) housing hyper-detailed macro jewelry. It transforms a standard mobile shopping experience into an intimate boutique vitrine. To implement properly, keep the card edges smooth (24px radius) and pair with delicate hairline white utility buttons.
MUST
- Pair Cormorant Garamond headlines strictly with generous line-height to maintain regal editorial presence.
- Use uppercase tracking (0.18em to 0.25em) on small utility labels like 'WELCOME' and 'COLLECTION'.
- Isolate jewelry photography on clean, transparent backgrounds with soft, diffuse contact shadows.
- Limit deep forest emerald (#133E37) to focal highlight containers and specific active markers.
AVOID
- Do not use high-saturation gold or yellow foil; stick to natural muted champagne tones.
- Avoid heavy dark drop shadows; shadows must remain pale, diffused, and low-opacity (under 6%).
- Do not use sans-serif for primary collection headlines or section titles.
- Avoid solid black backgrounds; depth should come from botanical green (#133E37) instead.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1552:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
