Design a light-mode web interface screen: precision enterprise dashboard dressed in crisp cobalt, soft cloud whites, and playful isometric 3D machinery.
LAYOUT
The screen follows a fixed-width left navigation sidebar (approx. 220px) next to an asymmetric two-column content canvas. The broad main column (approx. 65% width) stacks the hero banner, interactive pricing tiers, a 3-column metric analytics grid, and the recent projects table. The right column (approx. 35% width) stacks secondary tier cards, feature checklists, a promotional CTA banner, and a recent activity feed.
PALETTE (use these exact hex values)
- #F4F7FC — App Background: dominant canvas wash backing all floating panels and sidebars
- #FFFFFF — Card Surface: primary container background for widgets, sidebars, and data cards
- #0066FF — Cobalt Primary: action buttons, key milestones, active sidebar indicators, and focal metric cards
- #EFF6FF — Selection Surface: background fill for highlighted tier selection cards and active sidebar items
- #0F172A — Deep Slate: high-contrast titles, metric figures, and primary table entries
- #64748B — Cool Gray Text: secondary body descriptions, table headers, breadcrumbs, and timestamp labels
- #10B981 — Success Emerald: completed status indicators, checkmarks, and progress bar fills
- #F59E0B — Warning Amber: analytics line charts, pending badges, and progress milestones
- #E2E8F0 — Card Border: delicate card strokes, table row dividers, and input borders
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans conveys sharp, high-tech engineering precision with corporate warmth. The geometric letterforms keep numeric metrics crisp and legible across tight dashboard spaces, while tightly tracked display titles (-0.02em) give authority to service introductions. Inter or SF Pro Display serve as direct, drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through color contrast between the #F4F7FC ground and #FFFFFF surface cards rather than heavy drop shadows. When shadows are used, they are delicate, low-opacity ambient occlusions (0 4px 20px rgba(0, 50, 150, 0.04)). Active states and selection cards rely on crisp 1px strokes rather than elevation shifts.
IMAGERY
Visual assets consist strictly of high-gloss 3D isometric models rendered in vibrant tech hues (cyan, blue, amber, white) depicting digital tooling, mobile mockups, and micro-characters. Flat line illustrations, stock photography, and textured grunge imagery are entirely prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive integration of glossy 3D isometric construction scenes alongside ultra-refined SaaS data widgets. To apply it correctly, pair dry analytical cards directly with high-fidelity 3D visual scenes showing miniature developers building digital products. It is misused if replaced with flat 2D outline vectors or generic human stock photos.
MUST
- Use solid white (#FFFFFF) for every analytical widget over the subtle #F4F7FC foundation.
- Reserve vibrant cobalt blue (#0066FF) exclusively for primary affordances and selected states.
- Maintain uniform 16px border-radius across all major dashboard panels and promo blocks.
- Pair each analytical widget card with a 36px circular icon badge in its primary theme hue.
AVOID
- Never use dark mode backgrounds; the identity relies completely on airy blue-white luminosity.
- Do not use flat 2D vector clip art; visual identity requires glossy 3D isometric renders.
- Avoid harsh black drop shadows; elevation must be defined by boundaries and subtle ambient blur.
- Never apply high-saturation background fills to large cards; keep primary colored cards small and selective.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
