Design a light-mode mobile app interface screen: calm, tactile scandinavian retail rendered in warm stoneware neutrals, rounded cards, and quiet sans-serif typography.
LAYOUT
The mobile layout follows a single-column, card-stack cadence optimized for effortless vertical thumb-scrolling within a 390px canvas. Below a compact 44px header sits an oversized hero banner anchoring the viewport. This is followed by a compact horizontal category rail, a high-contrast dark secondary banner for lifestyle accessories, and a multi-item 'Best Sellers' row.
PALETTE (use these exact hex values)
- #ffffff — Gallery White: Global application viewport background and card fill for primary items
- #d6ccbc — Warm Sand: Warm atmospheric backdrop behind the top hero carousel card
- #f6f6f6 — Porcelain Grey: Flat neutral fill for category icon tiles and lower product item cards
- #1f2226 — Charcoal Black: Main headlines, active icons, and primary hero CTA button container
- #767a80 — Muted Stone: Category labels, secondary subtitles, and de-emphasized description copy
- #2f6bb5 — Cerulean Cobalt: Secondary action links and shopping bag notification counter badge
- #2a211b — Espresso Tint: Dark gradient background for the mid-page promotional lifestyle banner
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Text, DM Sans), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px subheading, 18px heading, 24px heading-lg. Tracking -0.01em at headlines, 0.08em at uppercase tags. The voice is architectural, calm, and unmistakably modern Nordic. A geometric sans like Plus Jakarta Sans or Inter balances functional e-commerce clarity with premium editorial restraint. The tight headline tracking combined with loose, widely-spaced micro-caps yields a deliberate, design-forward rhythm.
GEOMETRY & SPACING
Corner radii — cards 16px, links 0px, inputs 8px, buttons 8px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is communicated purely through soft tonal contrast and layered composition rather than blur filters or ambient drop shadows. Floating objects (such as pendant lamps and tabletop vessels) cast soft natural shadows baked into their photography, grounding them onto flat surface panels. Cards sit flush against the clean white canvas with zero pixel elevation.
IMAGERY
Imagery strictly follows minimalist Scandinavian design catalogs: studio-lit, natural wood, powder-coated metal, and tactile ceramics. Products are either meticulously silhouetted on clean transparent backings or set within warm, cinematic, low-key lifestyle still lifes. Glossy reflections, busy contextual backgrounds, or neon staging props are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The standout identity move is the soft-chamfered, sand-toned hero card (#d6ccbc) housing silhouetted lighting that breaks boundary expectations while anchored by a tiny dark charcoal pill CTA. It transforms an ordinary e-commerce slider into a curated gallery plinth. Commonly misused by replacing the neutral sand tone with a generic gradient or adding heavy CSS drop shadows.
MUST
- Retain warm muted backgrounds (#d6ccbc, #f6f6f6) to give studio product cutouts tactile dimension.
- Limit the vibrant cobalt blue (#2f6bb5) strictly to action cues like 'View all' and the notification bubble.
- Maintain uniform 16px corner radii on large banners and 14px on smaller interactive cards.
- Use generous 16px horizontal margins on the 390px mobile viewport.
AVOID
- Never apply heavy black box-shadows or high-elevation blurs under floating cards.
- Do not saturate product card backgrounds; maintain desaturated linen, chalk, or wheat undertones.
- Avoid full-width edge-to-edge promo cards; always keep the 16px gutter intact.
- Do not underline the 'View all' blue navigation links.
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 中尝试 
