Design a light-mode mobile app interface screen: scandinavian minimalism meeting warm editorial luxury on tactile parchment sheets.
LAYOUT
The mobile view is split vertically: the upper 45% is dedicated to an unobstructed product photography stage with peripheral chrome. The lower 55% is occupied by a monolithic rounded card that stacks hierarchy sequentially: eyebrow and rating pill, serif title, 3-column spec highlights, bifurcated price/color picker, full-width CTA, and triple reassurance icons. Sticky tab navigation rests at the absolute screen base.
PALETTE (use these exact hex values)
- #F3EFEA — Canvas Warm Base: ambient photo background tone and page backdrop beneath the floating product sheet
- #FFFDF9 — Sheet Paper: main card background containing all product configuration and pricing controls
- #4A121A — Oxblood Primary: high-intent action button fill for Add to Cart and notification badges
- #EFE8DC — Soft Ochre Tint: background fill for category badges and circular feature icon containers
- #1C1B1A — Ink Charcoal: headline type, price figures, primary icons, and product finish swatches
- #76726B — Muted Stone: captions, secondary descriptions, review counts, and subtle label headings
- #E8E2D8 — Hairline Border: dividers between price/color selectors and footer policy indicators
TYPOGRAPHY
Typeface Playfair Display (or Baskerville, Cormorant Garamond), weights 400/500. Sizes 10px caption, 11px body-sm, 13px body, 15px body-lg, 18px subheading, 28px heading. Tracking -0.01em. The typographic tone balances Scandinavian studio restraint with high-fashion editorial prestige. Playfair Display conveys acoustic craftsmanship and material richness, while Inter handles transactional clarity and engineering metrics. For open-source parity, Cormorant Garamond paired with Roboto or DM Sans faithfully reproduces the cadence.
GEOMETRY & SPACING
Corner radii — cards 32px, links 999px, inputs 12px, buttons 16px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created via physical paper metaphor: the white product sheet (#FFFDF9) casts a soft 24px blur shadow (rgba(0,0,0,0.06)) over the warm stone hero canvas. Floating utility buttons like the wishlist circle use minimal 8px ambient elevation to look tangible without appearing digitally layered. Flat hairlines replace structural shadows internally.
IMAGERY
Photography depicts industrial hardware shot from a high three-quarter angle resting on warm, subtly textured limestone or matte ceramic plaster. Lighting is diffused natural daylight with soft contact drop-shadows beneath the headband and earcups. Cut-out PNGs on pure clinical white or neon studio lighting are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive motif is the sheet-on-stone architecture: a warm-toned, soft-radius off-white purchase sheet (#FFFDF9, radius 32px) docking over a textured ambient product photo, punctuated exclusively by a single oxblood pill button. Misusing this means rendering the entire screen on flat pure white or changing the CTA into a generic high-saturation blue/black.
MUST
- Reserve deep oxblood (#4A121A) strictly for the primary checkout action and urgency counters.
- Pair high-contrast editorial serif headers with wide-tracked sans-serif meta-labels.
- Use generous 32px top rounded corners on the bottom purchase card overlay.
- Keep product photography on textured warm plaster (#F3EFEA) rather than pure white.
AVOID
- Never introduce saturated bright colors like blue, yellow, or vivid green into the interface.
- Do not use sharp 0px corners on interactive buttons or the sliding sheet.
- Avoid sans-serif typography for the main product name or headline price tag.
- Do not apply heavy dark drop shadows; use soft, low-opacity ambient diffusion.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2144:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
