Design a light-mode web interface screen: structured enterprise intelligence rendered through midnight nav bars, clean isometric models, and multi-hued categorical data metrics.
LAYOUT
The workspace uses a rigid two-column base: a 240px persistent dark sidebar on the left and a responsive fluid canvas on the right. The canvas stacks vertically starting with a utility header, followed by an asymmetric 60/40 promotional hero block, a 4-column metric card grid, and a bottom split between a 65% area line chart and a 35% channel distribution list.
PALETTE (use these exact hex values)
- #091024 — Midnight Sidebar: Full-height vertical navigation surface on the left perimeter.
- #F5F7FA — Workspace Canvas: Main dashboard background framing cards and top header.
- #FFFFFF — Card Surface: Background fill for KPI blocks, chart containers, and search input.
- #00A39E — Teal Brand: Primary buttons, active hero eyebrows, and financial metric indicators.
- #6C5DD3 — Violet Metric: Secondary KPI badge background, user metric line, and pro callout gradient.
- #3B82F6 — Cobalt Blue: Conversion rates, secondary data series lines, and channel distribution bars.
- #F59E0B — Amber Orange: Session duration badge, social media channels, and gold coin accents.
- #0F172A — Ink Slate: High-emphasis titles, headline typography, and primary KPI values.
- #64748B — Muted Slate: Navigation labels, chart axes, secondary subtitles, and table percentages.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.02em on headings, 0 on body, 0.05em on captions. The typographic tone is authoritative, corporate, and technologically adept, using Plus Jakarta Sans to deliver crisp geometric curves and wide optical readability. Tabular figures maintain perfect vertical alignment within data tables and metric cards. Suitable drop-in substitutes include Inter or DM Sans under open SIL licenses.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 8px. Spacing on a 4px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created via high-contrast boundary layering rather than dramatic elevation. The dark sidebar floats behind the primary canvas, while white cards use an extremely subtle, low-opacity drop shadow (0 4px 16px rgba(15, 23, 42, 0.04)) coupled with an understated 1px slate stroke (#E2E8F0).
IMAGERY
Hero imagery relies on refined, soft-rendered 3D isometric charts and platforms populated by miniature stylized corporate figures interacting with data cubes and ladder steps. The rendering features clean pastels, smooth volumetric lighting, and gold metallic accents; flat vector clip-art or photographic stock is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual move is the intentional union of a serious, high-density dark navigation bar with a vibrant 3D isometric hero stage and multi-hued categorical sparkline tiles. It turns an otherwise austere enterprise portal into an inviting, premium SaaS experience. Misusing it involves stripping the 3D depth into flat wireframes or mismatching the sparkline colors with their respective parent metrics.
MUST
- Retain the sharp contrast between the midnight sidebar (#091024) and the crisp white dashboard canvas.
- Use categorical accent colors (teal, violet, amber, cobalt) strictly to demarcate data categories across charts.
- Pair numeric values with trend direction arrows and muted comparison subtitles ('vs last 30 days').
- Keep card surfaces pure white (#FFFFFF) with delicate border outlines (#E2E8F0) and ultra-diffuse shadows.
AVOID
- Do not invert the canvas into a complete dark mode without preserving the distinctive navy sidebar identity.
- Do not use saturated primary red for decreases unless strictly paired with accessible iconography.
- Do not introduce heavy black card borders or harsh high-opacity drop shadows.
- Do not omit sparklines from the summary KPI blocks; they are foundational to the module.
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. 在 DraPub 中尝试 
