Design a light-mode mobile app interface screen: a quiet executive messaging canvas merging daily conversational flow with high-clarity glanceable operational metrics.
LAYOUT
The screen follows a structured mobile column: a dynamic status and greeting header at the top right-flanked by search and creation controls. Immediately below sits an asymmetric dashboard module (one tall 1:1.6 card on the left, two stacked horizontal cards on the right). A horizontal icon-supported category tab bar divides the telemetry section from the full-width vertical chat thread list.
PALETTE (use these exact hex values)
- #F8FAFB — Canvas Ice: dominant screen background providing subtle cool contrast beneath pure white cards
- #FFFFFF — Card Surface: pure white card elevation for metric containers and chat list base
- #0E746F — Spruce Primary: primary interactive actions, active navigation underline, unread badge pills, and pinned indicators
- #E6F5F4 — Spruce Tint: circular background container for primary category icons and group markers
- #FDF0EC — Coral Tint: circular background container for time sensitivity and latency icons
- #D95B43 — Coral Accent: line art stroke for response time clock icon
- #0F172A — Slate Heading: primary header, metrics values, and contact sender names
- #64748B — Slate Muted: secondary body previews, timestamps, card labels, and inactive tab links
- #22C55E — Presence Green: online status indicator dot overlaid on user avatars
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 24px heading, 32px display. Tracking -0.03em on bold titles, normal on body. The typography is disciplined, professional, and warmly executive. Plus Jakarta Sans or a similarly crisp geometric sans provides sharp numeric legibility for dashboard metrics while remaining friendly and approachable in contact previews. Use Inter or SF Pro Display as immediate drop-in replacements without losing visual structure.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is rendered flat-to-soft using ambient white surfaces against an off-white #F8FAFB base. Shadows are barely perceptible (0px 4px 16px rgba(15, 23, 42, 0.04)), avoiding skeuomorphic rims in favor of pure tonal separation. Only the primary teal floating action button carries a colored ambient glow.
IMAGERY
Photography is confined entirely to circular portrait avatars with natural, warm studio lighting and neutral backdrops. Vector iconography uses a clean 1.75px to 2px uniform outline weight with rounded caps. Avoid abstract illustrations or busy photographic header banners.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric top summary grid: pairing an oversized single-metric card on the left with two horizontally stacked utility tiles on the right, bridging personal messaging with productivity analytics. It instantly transforms a standard chat list into an intelligent communication hub.
MUST
- Use spruce teal (#0E746F) strictly for active states, new actions, and primary badges.
- Maintain high contrast between the 32px display title and 14px muted subheadings.
- Keep metric card corners consistently rounded at exactly 20px.
- Pair colored category icons inside light pastel circular badges of 44px or 48px.
AVOID
- Do not use dark outlines or thick borders around metric cards; rely on elevation and white fills.
- Avoid using bright saturated backgrounds for top tiles; reserve color for badges and text.
- Do not mix square and rounded avatars; all avatars and action buttons must be 999px round.
- Never use primary teal for destructive or latency metrics; use coral (#D95B43) instead.
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 中尝试 
