Design a light-mode mobile app interface screen: sunlit scandinavian showroom elegance balanced with tactile warm plaster and restrained olive accents.
LAYOUT
The mobile view follows a disciplined vertical hierarchy: navigation header, hero promotional banner, trust feature bar, section header with 'See All' action, horizontal product carousel, and closing deal banner. Horizontal margins are rigidly maintained at 16px to 20px, with consistent 20-24px vertical gaps between structural blocks.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Stone: dominant screen background creating a soft, warm paper canvas
- #F2EFEB — Plaster Tint: hero card and trust strip container surface
- #EFECE6 — Bone Card: product card container backgrounds providing soft contrast against canvas
- #242220 — Smoked Charcoal: deal of the day dark highlight card and primary typography color
- #616345 — Olive Herb: primary call-to-action button and active notification pill fill
- #5E2729 — Oxblood Burgundy: hero floating price circle badge and timer highlight
- #7C7871 — Muted Slate: secondary body descriptions, rating counters, and subtle labels
- #C8943D — Ochre Star: review score star icons
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Freight Text, New York), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 36px display. Tracking -0.01em at display, 0.02em at small headings. The typography exudes editorial refinement and architectural serenity. The pairing of a literary serif for headings with a calm, neutral geometric sans conveys quiet luxury and Scandinavian curation. Cormorant Garamond or Playfair Display can serve as web-safe substitutions without sacrificing elegance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 14px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is communicated purely through subtle shifts in surface warmth and tonal value rather than harsh drop shadows. Hero items and product cards sit on pale warm stone surfaces that separate gently from the base background. The only notable elevation cues are soft contact shadows directly beneath isolated product photography cutouts.
IMAGERY
Photography consists of studio cutouts of minimalist homeware and wooden furniture paired with natural elements like dried foliage and botanical branches. Lighting is soft, directional, and sun-drenched, evoking Scandinavian morning light. Busy lifestyle photography with cluttered backgrounds is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of architectural warm-plaster cards with organic studio cutouts, punctuated by a deep oxblood circular price callout and an earthy olive pill button. This specific combination of serif elegance, warm bone surfaces, and subdued botanical hues creates an instant sense of tactile Nordic home living.
MUST
- Use warm off-white plaster tones (#FAF8F5) for the background rather than pure #FFFFFF.
- Pair high-contrast editorial serifs for titles with clean, unpretentious sans-serif for operational text.
- Reserve deep olive green (#616345) strictly for primary conversion buttons and active indicators.
- Enclose all product imagery within seamless cutouts set against soft neutral surface tiles (#EFECE6).
AVOID
- Do not introduce cool bluish greys or stark black borders anywhere in the interface.
- Never use sharp 0px corners on interactive buttons or content panels.
- Avoid bright saturated neon accents; keep all accent tones grounded in nature (olive, oxblood, ochre).
- Do not use heavy drop shadows; rely on surface tone differences for visual separation.
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 中尝试