Design a light-mode mobile app interface screen: breathable domestic control rendered through frosted porcelain surfaces and gentle ambient temperature gradients.
LAYOUT
The mobile interface uses a disciplined single-column vertical flow with 20px horizontal screen margins. The hierarchy begins with a breathable personalized header and top-level metric ribbon, immediately anchoring the eye to the central climate hero card. Below the primary control, a categorized 'Rooms' section splits into an evenly spaced 2x2 grid of modular status tiles, preserving predictable rhythm across viewports.
PALETTE (use these exact hex values)
- #F9FAFC — Canvas Ground: Background base surface across the entire viewport
- #FFFFFF — Surface Pure White: Background for elevated status pills, room cards, and rotary dials
- #1A202C — Charcoal Text: Primary headings, large numeric temperature readouts, and active icons
- #7D8A9E — Slate Caption: Secondary labels, feels-like subtext, unit metrics, and chevron indicators
- #FF6E59 — Thermal Coral: Target heating readouts, active temperature toggle badge, and warm room indicators
- #63B3ED — Sky Blue: Cooling spectrum arc, living room wave chart, and security badges
- #ED8936 — Amber Light: Illumination status icon and kitchen warmth indicators
- #48BB78 — Eco Emerald: Air quality leaf icon and comfortable climate validation tokens
- #EDF2F7 — Card Subtle Stroke: Hairline perimeter borders on cards and circular stepper buttons
TYPOGRAPHY
Typeface SF Pro Rounded (or Plus Jakarta Sans, Inter, Nunito), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 32px heading-lg, 48px display. Tracking -0.03em for numerals, -0.01em for body text. The typographic tone is approachable, modern, and clinical yet warm, executed via geometric rounded sans-serif letterforms. Numeric values are deliberately tabular and legible with tight negative tracking at large scales, emphasizing scientific precision within a cozy domestic context. SF Pro Rounded, Plus Jakarta Sans, or Inter Rounded serve as optimal functional substitutes.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved through ultra-soft, low-opacity ambient light casting rather than layered stacking. Surfaces utilize 0px 10px 30px rgba(0, 0, 0, 0.04) diffused shadows combined with 1px hairline perimeter strokes in #EDF2F7. Floating interactive nodes (such as the rotary thumb and dial circle) cast localized circular drops to invite tactile touch.
IMAGERY
The design eschews photographic raster imagery in favor of clean 1.5px monoline stroke iconography depicting domestic items (sofa, bed, pan, bathtub, leaf, shield). Decorative wave sparklines at the base of room cards introduce organic, flowing visual rhythms without cluttering technical data. Any external imagery introduced must be muted, daylight-balanced, and devoid of high contrast.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the dual-spectrum thermal arc dial nested inside a card washed with a whisper-light peach-to-sky gradient. This visualizes invisible thermodynamic comfort directly within the UI architecture. It is misused when rendered with saturated, harsh rainbow gradients or flattened into a plain monochrome slider.
MUST
- Use soft drop shadows with large blur radii (16px to 24px) and very low opacity (3% to 6%) to maintain porcelain float.
- Pair numeric thermal targets with coral (#FF6E59) and cooling metrics with soft sky blue (#63B3ED).
- Keep card perimeters bordered with hairline 1px solid #EDF2F7 strokes to define light edges.
- Maintain high corner radii between 18px and 24px on all structural modular cards.
AVOID
- Do not introduce pure black (#000000) for text or icons; rely strictly on deep charcoal slate (#1A202C).
- Do not apply dark, muddy drop shadows or heavy industrial neumorphic bevels.
- Do not mix sharp rectangular cards or acute angles with this organic soft-capsule design system.
- Avoid solid vibrant backgrounds on cards; preserve white surfaces with gossamer ambient color bleeds.
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. Try in DraPub 
