Design a light-mode mobile app interface screen: scandinavian furniture gallery with airy pastels, expansive pale surfaces, and whisper-thin editorial numbering.
LAYOUT
The mobile screen unfolds in a single-column editorial cadence. It begins with a minimalist header holding the brand mark and circular icon utilities, followed immediately by the large-format Hero Collection Card. Below, a section header row pairs the product title with an aligned secondary pill button. Directly underneath sits an asymmetric two-column section: a vertical index stepper on the left and an offset photographic product card on the right.
PALETTE (use these exact hex values)
- #FBFBFB — Canvas Ground: Primary screen backdrop behind all standalone sections and headers
- #DFDFE1 — Card Mist: Background tone inside the hero showcase card and photographic containers
- #F5F5F6 — Card Pale Tint: Inner background for the secondary product preview stage
- #FFFFFF — Pure White: Floating pills, navigation buttons, and inactive carousel dots
- #15181C — Ink Charcoal: Logo, primary headings, display numbers, and primary button labels
- #8E9197 — Neutral Slate: Secondary dates, inactive step numbers, and descriptive body copy
- #E86B56 — Atelier Coral: Brand period dot, subheader eyebrow label, active pagination dot, and arrow accents
- #84A8BC — Powder Nordic Blue: Key product lacquer finish providing organic brand color through photography
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Sofia Pro, Inter), weights 300/400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 26px heading-lg, 54px display. Tracking -0.03em at display, 0.08em at uppercase labels. The typography is disciplined, airy, and distinctly Nordic, evoking architectural catalogs and high-end industrial design monographs. The juxtaposition of razor-thin 54px numerals against compact semibold titles establishes high editorial contrast. Plus Jakarta Sans or DM Sans serve as ideal accessible substitutions, preserving the open apertures and geometric circular forms.
GEOMETRY & SPACING
Corner radii — cards 28px, links 0px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 36px between sections, 390px container, airy density.
DEPTH
Depth is communicated primarily through structural layering and soft silhouette overflows rather than drop shadows. Crisp white pill components (#FFFFFF) float atop pale grey photographic surfaces (#DFDFE1) to denote clickability. Furniture objects subtly clip outside their bounding containers to produce physical presence without visual heaviness.
IMAGERY
Photography emphasizes studio-lit Scandinavian furniture pieces shot against seamless, neutral warm-grey backdrops. Objects feature muted architectural colors (ash wood, powder-coated baby blue, chalk white) with soft, diffused ground contact shadows. Busy lifestyle rooms, high-saturation filters, and harsh contrast photography are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the coral punctum (#E86B56) paired with oversized, featherweight catalog index numbers ('01'). The coral dot anchors the brand mark and recurs strictly on microscopic indicators—the active carousel pill, the category label, and the navigation arrow. It is ruined if expanded into large solid fills or used on primary button backgrounds.
MUST
- Retain generous 20px horizontal margins and minimum 36px gaps between major sections.
- Use the coral accent (#E86B56) sparingly on punctuation dots, active indicators, and directional arrows.
- Render index numerals ('01', '02') in extra-light weights when displayed at display scale (54px).
- Allow product imagery cutouts to deliberately overflow the upper perimeter of their holding cards.
AVOID
- Never fill buttons or card backgrounds with the coral accent color.
- Do not use harsh black drop shadows; keep elevation flat or rely on soft white button overlays.
- Avoid square or sharp corners; every interactive touchpoint and panel must be rounded.
- Never center-align the hero card copy; keep all textual elements left-aligned.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1376:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
