Design a light-mode web interface screen: crisp corporate productivity rendered in crystalline cobalt, airy white card structures, and soft isometric craft.
LAYOUT
The workspace uses a fixed 240px vertical sidebar docked to the left containing brand identity, vertical navigation links, and bottom user profile card. The primary canvas begins with a top utility bar containing search input, shortcuts, and global primary actions. Below, the layout arranges an expansive hero announcement banner, followed by a 4-column metric stat row, and finishes with an asymmetric multi-column split (e.g. 7-column table/chart paired with 5-column activity feeds and doughnut charts).
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application viewport background behind sidebar and cards
- #FFFFFF — Card Surface: Background for dashboard cards, sidebar, and floating modals
- #E2E8F0 — Subtle Border: 1px structural dividers, card outlines, and horizontal table rules
- #1D68FE — Cobalt Brand Primary: Primary action buttons, active navigation backgrounds, and primary trend metrics
- #EFF6FF — Cobalt Tint: Sidebar active item fill, badge backings, and metric icon square surfaces
- #0F172A — Text Heading: Display titles, section headings, card values, and author names
- #64748B — Text Secondary: Table column labels, metadata, dates, and subtitle copy
- #10B981 — Success Emerald: Positive delta percentages, completed status badges, and chart line 3
- #F59E0B — Warning Amber: In-review statuses, at-risk doughnut segment, and trend sparklines
- #EF4444 — Danger Coral: Overdue workload segment on circular ring chart
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 24px heading-lg, 38px display. Tracking -0.025em at large titles, 0em at body. Plus Jakarta Sans delivers an energetic, Silicon Valley engineering feel that balances tech-forward geometry with warm humanist openness. The high x-height and circular apertures give clarity even in dense tabular layouts (11px-13px). Substitute with Inter for a slightly more neutral tone, or DM Sans for closer geometric character.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is restrained and almost purely planar. Subtle elevation is achieved via a crisp 1px border (#E2E8F0) combined with a soft, ambient box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 6px 16px rgba(15,23,42,0.04). Interactive elements elevate slightly on hover using an increased shadow spread.
IMAGERY
Features clean, high-fidelity 3D isometric vector illustrations depicting stylized human characters interacting with oversized digital screens, code editor windows, and floating technology cubes. Floating elements use bright, glossy plastic-like materials in matching brand blue, mint, and warm yellow tones. Photorealistic or gritty photography would severely clash with this immaculate vector aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious integration of an ultra-clean, white-bordered metric card grid anchored by a luminous cobalt blue (#1D68FE) signature primary CTA and an expressive 3D isometric tech illustration. Misusing this means stripping the 16px radius cards or replacing the vibrant cobalt with muted corporate slate, causing it to look like standard administrative software.
MUST
- Wrap all primary data groupings inside distinct white cards with 16px border radii and 1px #E2E8F0 borders.
- Use saturated cobalt #1D68FE exclusively for key interactive triggers and primary progress indicators.
- Maintain generous 20px to 24px gutters between grid widgets to let information breathe comfortably.
- Pair every primary metric value with its relative timeframe comparison text ('vs last week') in 11px #64748B.
AVOID
- Do not use dark or heavily tinted card surfaces; preserve pure #FFFFFF on #F8FAFC canvas.
- Never use sharp, 0px square corners on containers, inputs, or action buttons.
- Avoid heavy dark shadows; rely on 1px borders (#E2E8F0) and ultra-diffuse 0 4px 12px rgba(0,0,0,0.03).
- Do not omit the subtitle metadata beneath project names or activity feed actor names.
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 中尝试 
