Design a light-mode mobile app interface screen: a sunlit scandinavian showroom where soft powdery pastels cradle precise minimalist joinery and warm architectural typography.
LAYOUT
The mobile viewport follows a rhythmically paced vertical stack. It begins with an airy header containing the brand mark and round utility actions, flowing into an expansive hero showcase card with layered product photography. This is punctuated by a relaxed typography statement flanked by numeric pagination and a pill CTA, directly transitioning into a second full-width collection showcase card.
PALETTE (use these exact hex values)
- #FBF9F6 — Canvas Background: Global application viewport background establishing warmth and ambient light
- #F4EFEA — Card Oat: Background fill for the hero showcase card and warm editorial panels
- #EDF3F7 — Card Mist: Cool-tinted card background for product collection groupings
- #FFFFFF — Pure White: Floating action buttons, price badges, and detail inset image frames
- #1E2229 — Charcoal Ink: Brand wordmark, primary titles, and active pagination indicators
- #6F757E — Pencil Lead: Body copy, designer credits, and inactive numeric list items
- #DE6B58 — Terracotta Coral: Active numeric pagination index, inline brand highlights, and play icon
- #897B9B — Muted Heather: Collection category eyebrow labels in uppercase tracking
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Outfit, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 20px subheading, 24px heading, 28px display. Tracking -0.03em at headings, 0.08em at micro labels. The typographic tone is architectural, modern, and restrained. An uncluttered geometric sans-serif (such as Plus Jakarta Sans or DM Sans) lends European modernism to product titles, while precise tabular numbers in micro-sizes impart the feeling of a numbered design monograph. The Macron accent in 'Bāndsome' establishes bespoke Scandinavian heritage.
GEOMETRY & SPACING
Corner radii — cards 28px, links 999px, inputs 14px, buttons 999px. Spacing on a 4px unit, 16px gaps, 36px between sections, 390px container, airy density.
DEPTH
Depth is achieved through tonal separation and soft, ambient micro-shadows rather than hard physical layers. Tinted cards sit flush or near-flush on the ivory canvas, while interactive controls (like the 'About us' pill and play button) lift slightly with subtle diffuse shadows (blur 12px to 16px, 4-6% opacity). Inset detail images appear to float gently inside parent cards via crisp white isolation borders.
IMAGERY
Photography focuses on studio-lit, high-end designer furniture rendered with architectural precision and natural soft light. Products feature muted pastel lacquer (e.g. powder blue) alongside raw pale ash and oak grain. Cropping is deliberate and sculptural, favoring dynamic angles and close-up detail thumbnails over standard flat e-commerce catalog shots.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the pairing of expansive 28px-radius tinted pastel cards with architectural terracotta numeric indices ('01') and nested circular action pills. The look collapses if sharp corners, high-contrast borders, or generic saturated UI colors are introduced in place of the delicate oat/mist card backgrounds.
MUST
- Use generous 28px card radii consistently across all primary section containers.
- Pair powdery pastel surfaces (#EDF3F7, #F4EFEA) against the warmer ivory background (#FBF9F6).
- Reserve the terracotta coral (#DE6B58) strictly for index numbers, brand highlights, and small accent tokens.
- Keep typography strictly sans-serif with geometric roundness and tight negative letter-spacing on titles.
AVOID
- Do not use dark, heavy divider lines; delineate hierarchy through card backgrounds and negative space.
- Never use generic rectangular buttons; all action items must have fully rounded pill or circle geometry.
- Do not saturate card surfaces; backgrounds should remain pale tints near 95% lightness.
- Never set running copy in terracotta; reserve that hue exclusively for highlights and index counts.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1328:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试