Design a light-mode web interface screen: tactile enterprise spatial dashboard pairing airy arctic whites with glowing cobalt gradients and isometric virtual worlds.
LAYOUT
The interface employs a fixed-width left navigation rail (approx. 240px) paired with a responsive multi-tiered main canvas. The top section presents a split hero banner: headline and dual CTAs on the left, an open 3D scene on the right. Below the fold, the layout shifts into a rigid three-column dashboard dashboard grid (approx. 1fr : 1.8fr : 1.2fr) displaying checklist activation, spline analytics, and recent project files.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Global application backdrop providing subtle contrast against elevated pure white cards.
- #FFFFFF — Pure White: Background for dashboard metric cards, sidebar container, and secondary buttons.
- #1D58F6 — Cobalt Primary: Primary interactive buttons, active sidebar tab accent, chart series stroke, and key brand highlights.
- #0F172A — Deep Slate Text: Hero display headings, card section titles, and heavy metric numbers.
- #64748B — Cool Muted Text: Body copy, inactive nav links, chart axis labels, and supporting microcopy.
- #E2E8F0 — Subtle Border: Fine structural divider lines, button outlines, and card perimeters.
- #10B981 — Status Green: Operational state indicators, positive KPI trends, and 'Live' status pills.
- #F59E0B — Status Amber: 'Draft' badges and secondary feature highlight circular icons.
- linear-gradient(180deg, #0A1E68 0%, #154BE2 100%) — Pro Upsell Gradient: Atmospheric deep navy-to-blue gradient on the Pro account upgrade banner.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 52px display. Tracking -0.03em for display, 0 for body. The geometric sans-serif (matched closely to Plus Jakarta Sans) communicates modern precision, high-tech spatial engineering, and approachable enterprise clarity. Tight negative tracking at larger display sizes keeps the hero headline punchy and cohesive. Open-source Google Fonts substitutes like Inter or DM Sans can replicate this balance effortlessly.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 12px. Spacing on a 4px unit, 20px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through chromatic contrast rather than heavy drop shadows. Elevated white cards sit upon a faint blue-slate canvas with an ultra-diffuse shadow (0 4px 24px rgba(15, 23, 42, 0.04)) and hairline borders. The isometric illustration establishes physical dimension in space using internal 3D gradients and soft ground contact shadows.
IMAGERY
The visual hero is an isometric 3D render featuring stylized human avatars wearing VR headsets interacting with curved spatial projection screens, drones, and sensor hubs. Palette consists of pastel blues, lilacs, and purples with soft specular highlights. Stock photography or flat corporate vector graphics would break the futuristic, tangible brand experience.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of an open, borderless isometric 3D world emerging directly out of a structured enterprise dashboard canvas. To use it properly, allow 3D elements to float naturally without clipping rectangles, anchored only by soft contact shadows. Misuse commonly occurs when placing the 3D art inside a boxed card or combining it with clashing photographic assets.
MUST
- Keep card surfaces pure white (#FFFFFF) against the pale slate background (#F8FAFC) for soft contrast.
- Use 1-pixel borders (#E2E8F0) paired with subtle box-shadows (0 4px 20px rgba(0,0,0,0.03)) to define containers.
- Render isometric product artwork seamlessly blending into the background without harsh box cutoffs.
- Use electric cobalt (#1D58F6) sparingly for primary conversion points and active interactive states.
AVOID
- Do not introduce sharp 0px card corners; all containers must use 16px to 24px corner radii.
- Do not use saturated pure black (#000000); use deep navy-slate (#0F172A) for all typography.
- Avoid heavy drop shadows or dark borders that break the light, airy aesthetic.
- Do not clutter the isometric illustration with flat photo overlays or harsh geometric boundaries.
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 中尝试 
