Design a light-mode mobile app interface screen: warm scandinavian minimalism with soft rounded silhouettes, warm terracotta accents, and airy editorial breathing room.
LAYOUT
The mobile layout follows an airy editorial rhythm down a single 390px column. A utility header sits fixed or pinned at the top, yielding immediately to a dominant 360px-tall featured hero card. A typographic transition follows, combining a section title, narrative microcopy, and an outlined collection pill CTA before settling into a staggered vertical feed of horizontal product cards.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Warm White: Primary screen background setting an artisanal, tactile off-white warmth across all viewports.
- #FFFFFF — Card Pure White: Background for product list cards and primary floating action buttons.
- #F3EFEA — Hero Oyster Tint: Subtle warm-grey parchment tint behind the primary carousel showcase card.
- #1A1A1A — Charcoal Black: High-emphasis product headings, top app bar titles, and key icons.
- #767676 — Muted Slate: Secondary descriptive body copy and disabled pagination dots.
- #FF6B50 — Terracotta Flame: Editorial attribution labels, numeric sequencing badges, active carousel dots, and badge counters.
- #DCE7ED — Soft Powder Blue: Circular background fill for add-to-cart action buttons and subtle colorway chips.
- #EAE5E0 — Faint Border: Delicate border around secondary outline pills like 'View Collection'.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Circular Std, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 28px heading-lg, 52px display. Tracking -0.03em on display, 0 on body. The typographic tone is architectural and intellectual, borrowing from Swiss modernism and contemporary Scandinavian furniture journals. The clean geometric proportions of Plus Jakarta Sans offer exceptional legibility at small sizes while exuding effortless Nordic luxury in display titles. Free Google Fonts like Plus Jakarta Sans or DM Sans provide a near-identical aesthetic match without proprietary licensing barriers.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 16px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, airy density.
DEPTH
Depth is achieved almost entirely through chromatic layering rather than shadows. White cards (#FFFFFF) and sand tiles (#F3EFEA) rest flat upon the warm canvas (#F9F9F8) with soft contrast boundaries. Where elevation is required, such as on circular overlay buttons, an imperceptible ultra-soft ambient shadow (0px 4px 16px rgba(0,0,0,0.04)) preserves the architectural stillness.
IMAGERY
Photography emphasizes studio-lit, tactile product vignettes featuring natural timber grain, matte ceramic finishes, and pale pastel lacquers shot against warm studio sweeps. Composition is deliberate, asymmetrical, and closely cropped to accentuate form and materiality over full-room context. Cluttered domestic environments or high-contrast lifestyle scenes would break the gallery aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone horizontal card composition pairing an oversized, low-opacity sequence digit ('01') floating behind high-contrast bold titles, accented with a vibrant terracotta attribution line ('by Markus Form'). This creates an immediate art-direction look reminiscent of high-end print design. It is misused if the sequence digit is made fully opaque or if the attribution colour is replaced with generic neutral grey.
MUST
- Use generous corner radii (24px) for all primary content containers and hero cards.
- Reserve terracotta (#FF6B50) exclusively for editorial accents, sequence numbers, and active touchpoints.
- Pair faint oversized numbers (~52px, light grey) with compact bold headlines for editorial depth.
- Provide ample breathing room (at least 20px padding) between hero typography and product imagery.
AVOID
- Do not use sharp 0px corners anywhere; every container requires at least 14px to 24px radius.
- Avoid harsh pure black (#000000); use softened charcoal (#1A1A1A) for headings and glyphs.
- Do not add heavy multi-layered drop shadows; rely on gentle surface tone contrast instead.
- Never saturate entire background blocks in terracotta; it is purely a punctate accent.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1408:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
