Design a light-mode mobile app interface screen: calm editorial clarity paired with storybook linework for effortless, high-trust property decisions.
LAYOUT
The mobile viewport follows a strict top-to-bottom conversational rhythm: top status bar and header (32px padding-top), followed immediately by the editorial pitch (eyebrow, heavy display heading, short body). A prompt address input rests directly above an airy center illustration, which breathes before two stacked horizontal feature cards lead toward the bottom action deck.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary screen backdrop and foreground card surface
- #F8FAFC — Surface Off-White: Subtle container fill and inactive element backgrounds
- #0F172A — Ink Navy: Primary headings, dominant titles, and high-emphasis icons
- #64748B — Slate Body: Secondary copy, supporting paragraphs, and trailing chevrons
- #94A3B8 — Muted Ash: Placeholder text, unselected borders, and subtle hairpins
- #2563EB — Cobalt Action: Key textual links, GPS locate target, and telephony triggers
- #E0EDFF — Ice Blue Tint: Background fill for calendar and weekly curation icon tile
- #D1FAE5 — Mint Tint: Background fill for security and confidence shield icon tile
- #071329 — Midnight Base: Persistent bottom primary action sheet or sticky CTA
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 17px subheading, 24px heading, 28px display. Tracking -0.02em at display, 0.08em at eyebrow. The typographic tone is authoritative yet approachable—recalling modern high-end architectural publications. Heavy headlines command trust through tight tracking and sturdy letterforms, while spacious, muted body copy ensures readability. Inter or SF Pro Display works seamlessly, requiring no bespoke font licenses to maintain its crisp, professional poise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 14px, buttons 14px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled with extreme subtlety rather than physical skeuomorphism. Interactive cards and search bars float on the pure white canvas via soft ambient shadows (0px 8px 24px rgba(15, 23, 42, 0.04)) and an imperceptible border trace (#F1F5F9). The only heavy spatial anchor is the deep midnight bar docked at the lower screen edge.
IMAGERY
Imagery avoids photorealism, opting for thin, expressive monoline vector drawings that resemble architectural sketches or New Yorker-style editorial cartoons. Figures and objects use fine 1.25px charcoal strokes with sparing, desaturated pastel spot fills. Photography or 3D renders would completely clash with this literary, friendly aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the pairing of sharp, architectural editorial typography with a whimsical, hand-drawn vector scene anchored between input fields and service cards. Losing the playful linework would turn the app into a sterile utility; over-decorating it would compromise trust. Keep the illustration monoline, low-contrast, and strictly situational.
MUST
- Use uppercase, letter-spaced 11px micro-copy strictly for contextual section eyebrows.
- Pair pastel tinted icon squircles (#E0EDFF, #D1FAE5) with thin-stroke navy iconography.
- Maintain high contrast between headline ink (#0F172A) and body slate (#64748B).
- Keep card elevations soft using blur 16px to 24px with under 5% black opacity.
AVOID
- Do not use saturated, high-contrast backgrounds for icon containers.
- Avoid harsh black drop shadows or sharp 1px dark borders on feature cards.
- Never display standard body copy in bold or all-caps format.
- Do not substitute hand-drawn narrative vector art with photographic imagery.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1296:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
