Design a light-mode mobile app interface screen: airy living room calm with tactile hardware floating on soft chromatic ambient light discs.
LAYOUT
Vertical mobile scroll structure designed around 390px-428px widths with 20px outer margin gutters. The top half is dominated by an asymmetric hero showcase blending text and graphic overlap. Below the dual pill actions, content shifts into stacked modular cards with standard 16px vertical gaps, creating a predictable, calm scanning rhythm.
PALETTE (use these exact hex values)
- #f8f9fb — Porcelain Canvas: dominant screen background creating an open, warm, daylight domestic atmosphere
- #ffffff — Card Surface: content container background providing crisp separation from the slightly tinted canvas
- #3d70f5 — Electric Periwinkle: primary interactive pill button, inline metric highlight, and response speech bubble
- #cbf6e6 — Ambient Mint: soft decorative background circle illuminating the lower half of the hero hardware showcase
- #d2e5fd — Powder Sky: soft circular backdrop element offsetting the upper-right corner of the hardware render
- #181c24 — Charcoal Ink: headline typography and primary titles ensuring effortless readability
- #727885 — Muted Slate: subtitles, greetings, secondary body copy, and secondary action icon outlines
- #f3f5f8 — Tonal Button Surface: low-contrast pill container for secondary utility actions like Routines
TYPOGRAPHY
Typeface Google Sans (or Poppins, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 20px heading, 28px display. Tracking -0.01em at display, 0 at body. The voice is warm, conversational, and effortless, perfectly embodied by Google Sans or Poppins. The round geometric forms feel approachable for non-technical home occupants while remaining surgically clear at small sizes. License standard web weights 400 through 700 with open-source alternatives Outfit or DM Sans.
GEOMETRY & SPACING
Corner radii — cards 24px, links 0px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is communicated through real-world contact shadows beneath physical hardware rather than synthetic UI drop shadows. Content cards float delicately on a nearly imperceptible diffuse shadow against the #f8f9fb canvas. Speech bubbles and pill buttons rely on pure flat color contrasting against their parent surface.
IMAGERY
Photorealistic 3D hardware renders paired with real-world lifestyle photography depicting curated Scandinavian-style domestic interiors (marble tabletops, natural wood, muted textile walls). Imagery is warm, uncluttered, and softly lit. Abstract iconography, cartoonish graphics, or harsh studio lighting would severely disrupt the identity.
SIGNATURE DETAIL — the thing that makes this design itself
Large, overlapping soft-tinted pastel circular discs (mint #cbf6e6 and periwinkle #d2e5fd) floating directly behind clean, upright hardware imagery. This creates an ethereal halo effect that evokes ambient domestic light. Misusing it involves making the circles fully saturated, adding hard outlines, or scattering them arbitrarily behind text.
MUST
- Anchor hardware renders over organic, overlapping pastel circular shapes (#cbf6e6 and #d2e5fd).
- Maintain high-contrast pill geometry using border-radius 999px for all direct actions.
- Use deep charcoal #181c24 rather than pure black for typography to keep a warm domestic feel.
- Pair lifestyle hardware photography with rounded nested corners (16px) inside white cards.
AVOID
- Do not use sharp 0px or small 4px corners on buttons or cards.
- Do not saturate entire backgrounds with color; keep chromatic accents strictly to discs and CTA pills.
- Avoid heavy dark borders or high-contrast divider lines between card sections.
- Do not use technical or cold mechanical sans-serif typefaces like Roboto or Helvetica.
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 中尝试 
