Design a light-mode mobile app interface screen: sunlit domestic calm with soft pastel tiles, organic curves, and airy typography.
LAYOUT
Vertical mobile hierarchy starting with a status bar at 9:41, transitioning into an open-air greeting alongside a right-anchored botanical image. A full-width white status banner spans horizontally below the hero. This is followed by a 3-column micro-card grid ('Today's Scenes') with 12px gutter gaps, continuing into subsequent sections like 'Your Devices'.
PALETTE (use these exact hex values)
- #FAF6F1 — Canvas Warm Cream: Primary background tone across the entire screen, evoking warm daylight.
- #FFFFFF — Pure White: Floating status card background and pill buttons.
- #192231 — Ink Navy: Primary headings, section titles, and active device counts.
- #76808F — Muted Slate: Greeting label, subtitles, and scene meta descriptions.
- #FA6F52 — Coral Terracotta: Primary circular FAB button and high-priority 'See all' links.
- #EBF6EE — Mint Sage: Background fill for plant/heater scene cards and status badge.
- #F0EEF8 — Lavender Mist: Background fill for outing and reading scene cards.
- #E7F2FA — Frost Sky: Background fill for coffee, cooling, and rainy day scene cards.
- #4BAE68 — Sprout Green: Text indicator for online status and eco icons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 44px display. Tracking -0.03em on display, 0 on body. Plus Jakarta Sans conveys architectural modernism tempered with domestic warmth through its geometric circularity and tall x-height. Tight tracking on the 44px hero title gives it editorial authority without appearing cold or technical. Outfit or DM Sans can seamlessly substitute while preserving geometric cleanliness.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 16px, buttons 999px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created through gentle luminance shifts rather than heavy drop shadows. Surfaces like the device dock use #FFFFFF over a warm #FAF6F1 ground with a faint 0 8px 24px rgba(28,37,56,0.04) ambient blur. Scene tiles rely entirely on flat pastel tints and photographic edge contrast to achieve separation.
IMAGERY
Realism-driven home and lifestyle photography clipped cleanly to silhouettes with soft natural shadows. Objects include architectural house plants in ceramic planters, iced coffee cups, modern folded umbrellas, and sleek minimalist air purifiers. Stock graphics, 3D clay illustrations, or neon renders are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric hero lockup: a colossal 44px display title flanked by a botanical pot plant that clips gracefully behind the floating summary dock, setting an organic, serene tone for an otherwise functional tech dashboard. Misusing it means separating copy from imagery into rigid vertical blocks.
MUST
- Use warm pastel tints (#FAF6F1 canvas, #EBF6EE, #F0EEF8) rather than harsh grays.
- Pair ultra-bold display headings with tight tracking (-0.03em) and compact line-heights.
- Isolate lifestyle objects cleanly on transparent backgrounds and clip them inside tile boundaries.
- Keep play icons inside subtle 32px translucent white circles at the card's lower-left corner.
AVOID
- Do not introduce sharp 0px corners or industrial square frames anywhere.
- Avoid stark, clinical #000000 black typography; use deep navy slate (#192231).
- Never use saturated gradients or complex dark drop-shadows under cards.
- Do not allow card backgrounds to compete with photography; keep tints under 10% saturation.
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 中尝试 
