Design a light-mode web interface screen: tactile enterprise dashboard merging friendly 3d clay illustration with rigorous multi-metric analytics.
LAYOUT
The workspace uses an asymmetrical dashboard layout. A fixed 200px sidebar anchors the left, flanked by a top bar providing global utilities. The main canvas stacks a panoramic hero split-card on top, followed by a 4-column metric grid, concluding with a 3-column lower zone splitting top products (left), sales chart (center), and recent transactions (right).
PALETTE (use these exact hex values)
- #F5F8FC — Canvas Background: Global page background providing subtle tint contrast against pure white cards
- #FFFFFF — Card Surface: Background for dashboard panels, tables, metrics, and top search bar
- #1E6BFF — Electric Brand Blue: Primary buttons, active navigation states, chart lines, and primary callout accents
- #0F172A — Heading Ink: Display headings, table primary text, and bold stat readouts
- #64748B — Muted Slate: Subheadings, inactive navigation items, chart axes, and secondary metadata
- #FF4D5E — Hero Pill Red: Text and icon accent for announcement badges and security highlight discs
- #10B981 — Success Emerald: Positive delta metrics and 'Paid' status pill indicators
- #F59E0B — Amber Warning: Conversion sparklines and 'Processing' status badge fills
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 26px heading-lg, 44px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is tech-forward, welcoming, and executive. Plus Jakarta Sans provides crisp round geometry and generous apertures, giving large numerals exceptional legibility without feeling sterile. Inter or DM Sans serve as drop-in open-source substitutions with virtually zero visual disruption.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 28px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved with extreme restraint rather than heavy shadows. Cards sit slightly elevated above the canvas using soft, diffused ambient drop shadows (0 4px 20px rgba(15, 23, 42, 0.04)). Isometric 3D imagery supplies internal compositional depth while UI containers remain cleanly planar.
IMAGERY
The visual hero relies on saturated, friendly 3D isometric claymorphism: characters with minimal facial features, smooth plasticine textures, and exaggerated scale (giant phone kiosk, miniature truck). Flat photos or generic stock photography would break the playful, exclusive software atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive integration of an expressive 3D isometric miniature world directly embedded into a functional business dashboard, sharing its exact palette with the analytical micro sparklines and status badges below.
MUST
- Keep card backgrounds pure #FFFFFF against the pale cool grey #F5F8FC background.
- Pair each primary KPI number with its distinct colored mini sparkline on the right edge.
- Ensure all micro status tags use low-saturation pastel fills with high-contrast saturated text.
- Maintain high corner radii (14px to 20px) on data containers to retain friendly tactile feel.
AVOID
- Do not use harsh dark borders around cards; rely on surface contrast and soft elevation.
- Never replace 3D isometric clay-style hero illustrations with flat vector clip-art.
- Avoid high-contrast saturated backgrounds for status badges; always use tinted pastels.
- Do not compress KPI cards vertically; keep comfortable 16px to 20px internal padding.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2352. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
