Design a light-mode mobile app interface screen: an airy editorial sanctuary blending soft peony floristry with restrained high-contrast typography and tactile pill controls.
LAYOUT
The mobile screen uses a continuous single-column flow pinned between 16px lateral margins. A full-bleed hero banner occupies the top half, fading seamlessly into the canvas just above the interactive zone. Immediately below sits the detached pill search row, followed by a consolidated horizontal category tray, an edge-overflowing collection carousel, and a secondary banner card.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Pearlescent: Global background canvas that grounds photographic cards and hero fades without stark white glare
- #FFFFFF — Card Pure White: Floating elevated surfaces including category tray, search bar, and circular navigation icons
- #1F3A34 — Deep Forest Slate: Primary hero CTA pill, cart badge counter fill, and active high-emphasis touchpoints
- #1E2220 — Charcoal Espresso: Primary headings, editorial titles, search icon, and major navigation labels
- #767E7A — Muted Moss: Secondary kickers, input placeholder text, view all links, and category icon strokes
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Ogg, Cinzel), weights 400/500. Sizes 10px caption, 11px body-sm, 14px body, 16px subheading, 20px heading, 32px display. Tracking -0.01em at display, 0 at subheading. The typographic pairing projects high-end boutique florist craftsmanship through Playfair Display's refined contrast and fluid terminals. This editorial charm is disciplined by SF Pro's neutral, microscopic functional clarity in uppercase navigation and price indicators. If licensing Playfair Display, Cormorant Garamond serves as an exceptional zero-cost open-source alternative with even higher elegance.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 999px, buttons 999px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created using low-contrast, highly diffused drop shadows (0 4px 20px rgba(0, 0, 0, 0.05)) beneath stark white floating shapes. Photographic elements sit either flush at ground level or inside rounded cards without borders. The sense of luxury stems from atmospheric spatial layers rather than physical skeuomorphic elevation.
IMAGERY
Photography focuses exclusively on artisanal floristry shot under diffused natural daylight with pale, creamy backdrops. Flower petals feature dewy textures, soft blushes, and botanical greens with zero harsh synthetic styling. Stock photography with cluttered domestic backgrounds or aggressive color saturation is strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the seamless floral melt: full-bleed macro peony imagery that diffuses organically into the pearlescent background (#F9F9F8), over which float crisp white pill-shaped controls. It turns a functional e-commerce header into an editorial botanical cover. Misusing this by applying a sharp horizontal crop or placing loud promotional badges over the petals instantly destroys the bespoke luxury feel.
MUST
- Use generous 999px pill curves on all standalone text inputs and primary interactive buttons.
- Blend hero imagery into the canvas using soft-edge transparency rather than hard rectangular crop lines.
- Maintain strict monochrome line weights (~1.25px stroke) across all utility and category iconography.
- Set collection card titles in an elegant serif and secondary price kickers in 10px uppercase sans-serif.
AVOID
- Do not use harsh pure black (#000000) for body text; always soften to deep slate charcoal (#1E2220).
- Never apply colored borders or heavy saturated shadows to the floating white UI components.
- Do not render primary headings in a geometric sans-serif; the brand identity hinges on editorial serifs.
- Avoid square or sharp corners; minimum non-pill radius is 18px.
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 中尝试 
