Design a light-mode web interface screen: serene productivity hub balancing crisp enterprise metrics with warm domestic narrative illustration.
LAYOUT
The workspace uses a persistent 240px left-hand vertical rail alongside a scrollable main dashboard area. The main stage begins with an aligned header bar holding greeting and global search, followed immediately by an expansive 2-column hero welcome banner. Below the banner, four metric cards span horizontally in an equal grid, feeding into a 60/40 split between the Upcoming Tasks list and the Focus Time activity chart.
PALETTE (use these exact hex values)
- #F4F7FB — Canvas Ground: Outer structural page canvas framing the sidebar and content cards
- #FFFFFF — Card Surface: Primary content container background across dashboard widgets and navigation panels
- #2563EB — Cobalt Primary: Primary buttons, active nav tabs, hero CTAs, and bar graph highlights
- #0F172A — Deep Slate Text: Headlines, high-level numeric metrics, and primary task descriptions
- #64748B — Muted Slate Text: Secondary labels, inactive navigation links, timestamps, and chart axes
- #E2E8F0 — Border Subtle: Dividers, search input border, and low-contrast card outlines
- #10B981 — Success Mint: Completed task indicators, positive performance delta tags, and focus badges
- #F59E0B — Warm Gold: Brand logo mark, meeting metric tint, and hero armchair accent
- #EFF6FF — Soft Indigo Tint: Active navigation item background and motivational footer callout container
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0 at body. The typographic tone is crisp, approachable, and tech-forward, using a refined geometric grotesque like Plus Jakarta Sans. Its rounded apertures and sturdy stems deliver clean corporate legibility at 11-13px while feeling warm and editorial at the 36px hero display scale. Free substitutes like Inter or DM Sans easily replicate this clarity without sacrificing hierarchy.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created almost entirely through subtle tone layering rather than blurred shadows. The crisp white cards (#FFFFFF) sit directly atop the cool off-white background (#F4F7FB) with a faint hairline border (#E2E8F0) providing separation. Floating elements such as the search input and status tags rely on micro-tint changes rather than multi-layered elevation z-indices.
IMAGERY
The imagery features narrative editorial vector illustration depicting a relaxed remote worker in an uncluttered interior setting. Color palettes are strictly coordinated with the UI: cobalt blues, mustard yellows, and leafy teal plants with clean outline strokes. Photorealistic stock photography or 3D clay-render styles would completely destroy the human, warm editorial feel.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark of this system is the integration of an editorial lifestyle illustration alongside crisp B2B productivity KPIs, bridged by pill-shaped accent containers and warm amber/cobalt touches. It softens standard enterprise utility into a welcoming personal sanctuary without compromising informational density.
MUST
- Use 16px border-radius consistently across all outer widget containers and hero areas.
- Pair large numeric callouts (24px bold) with muted 12px labels directly above or below.
- Rely on soft tinted backgrounds (e.g. #ECFDF5, #EFF6FF) for status badges rather than solid harsh fills.
- Maintain a distinct 240px sidebar width to anchor the entire left viewport comfortably.
AVOID
- Never introduce heavy black borders; keep dividers strictly at 1px solid #E2E8F0.
- Do not use high-contrast drop shadows; rely on surface tone differentiation (#FFFFFF over #F4F7FB).
- Avoid sharp rectangular corners on interactive pills or chart bars—always round ends fully.
- Never allow bright saturated primary blue to dominate large background surfaces.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
