Design a light-mode mobile app interface screen: airy scandinavian living room translated into warm pastel tiles and tactile cutout product staging.
LAYOUT
The mobile layout follows a disciplined vertical stack with 16px lateral padding. It opens with an asymmetrical greeting and cart header, flows into an accessible pill search bar, transitions to a prominent 16:10 lifestyle banner, followed by a snappy horizontal category shelf, and resolves into a structured detailed daily deal card.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Screen-level canvas background behind all floating cards and header elements
- #FFFFFF — Pure White Surface: Background for search field, interactive action dots, and flash deal cards
- #1C1D21 — Charcoal Primary: Primary typography, main headlines, and primary dark pill CTA buttons
- #767682 — Neutral Ash: Secondary labels, product metadata, subheads, and input placeholders
- #EE5E4D — Coral Accent: Attention hooks: notification counter pill, 'Deal of the day' badge, and sale prices
- #EBE8F5 — Pastel Lavender: Category card background specifically tinting the lighting department
- #E2EFE6 — Pastel Sage: Category card background specifically tinting the seating department
- #E1EEF8 — Pastel Sky: Category card background specifically tinting the tables department
- #F4F4F6 — Timer Neutral: Subtle low-contrast background for countdown units in promotional cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Urbanist, Poppins, Outfit), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 24px display. Tracking -0.02em at headlines, 0em at body. The type system utilizes Plus Jakarta Sans, projecting a contemporary, approachable, and refined voice with geometric proportions. Subtle negative tracking on titles gives headings editorial presence, while generous x-height maintains effortless legibility in 11px to 13px metadata. Urbanist or Outfit serve as direct drop-in open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 24px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created almost entirely through subtle surface contrast and crisp white overlays rather than aggressive drop shadows. When shadows appear, such as beneath the floating search bar or cart button, they use an extremely diffuse spread (blur 12-16px) at 4-6% black opacity. Layering transparent cutout furniture over flat pastel slabs creates organic visual depth without UI clutter.
IMAGERY
Imagery follows an airy Nordic interior styling with natural oak woods, off-white ceramics, and lush green accents photographed in diffused daylight. Secondary imagery features immaculate 3D or studio cutouts of designer chairs and lighting fixtures with clean, unclipped edges, grounded naturally inside pastel cards.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the interplay between smooth, solid pastel foundation cards (#EBE8F5, #E2EFE6, #E1EEF8) and isolated, floating furniture cutouts accompanied by circular micro-action pills. It creates an instantly recognizable 'pocket showroom' feel. Misusing this by adding gradients, complex textured backgrounds, or borders spoils the serene architectural minimalism.
MUST
- Use desaturated pastel fills (#EBE8F5, #E2EFE6, #E1EEF8) to create clear card boundaries without harsh borders.
- Keep main CTA buttons strictly pill-shaped with 999px radius and solid charcoal fill (#22252A).
- Reserve the coral accent (#EE5E4D) solely for conversion-critical items: badges, discount prices, and notification badges.
- Apply generous 24px border radii to large feature cards to preserve the friendly, soft aesthetic.
AVOID
- Never use sharp 0px or 4px corners; sharp geometry breaks the organic Scandinavian design language.
- Do not introduce heavy black drop shadows; keep elevation flat or rely on soft, dispersed 5% opacity blurs.
- Avoid saturated primary colors for category backgrounds; saturation destroys the calm editorial mood.
- Do not use dark backgrounds for whole screen surfaces; this system is strictly an airy light theme.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1296:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试