Design a light-mode web interface screen: an obsidian-anchored executive cockpit lifted by luminous glass, pristine paper cards, and authoritative cobalt data streams.
LAYOUT
The workspace uses a persistent 72px left tool-rail, while the main content scrolls inside a fluid container capped at 1440px. The page cascades logically from executive macro to granular execution: Hero announcement and strategic direction on top, 5-metric KPI summary bar directly beneath, followed by a balanced 2-column analytical block (Priorities vs. Performance), moving into secondary operational metrics (Donut breakdown and Recent Updates), and terminating in an expansive OKR data table and milestone schedule.
PALETTE (use these exact hex values)
- #0d1522 — Obsidian Spine: Primary left persistent rail background for high-contrast architectural framing.
- #f4f6fa — Canvas Ice: Main canvas background creating soft separation under elevated cards.
- #ffffff — Card Pure: Modular content container fill, metric cards, and elevated widgets.
- #1a68ff — Cobalt Electric: Primary call-to-actions, active state indicator bars, and primary trend lines.
- #0f172a — Ink Primary: Dominant headers, executive metric figures, and high-priority labels.
- #64748b — Slate Subtle: Table column headers, dates, micro-labels, and subtitle descriptions.
- #10b981 — Emerald Success: Positive delta figures, 'On Track' pill badges, and donut progress segments.
- #f59e0b — Amber Alert: 'At Risk' operational status pills, milestone badges, and warning deltas.
- #ef4444 — Crimson Critical: 'Off Track' status tags, critical risk counts, and negative momentum.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 20px heading, 28px heading-lg, 44px display. Tracking -0.025em at display, 0.01em at body. Plus Jakarta Sans delivers a sophisticated, tech-forward executive tone that bridges clean Swiss utility and friendly humanism. Its geometric construction ensures numbers line up cleanly in tabular tables, while its heavy weights feel authoritative in hero statements. Inter or SF Pro can serve as exact technical drop-in substitutes without disrupting layout grids.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1360px container, comfortable density.
DEPTH
Depth is created flatly and architectural. Cards rely on a solid 1px stroke (#edf2f7) reinforced by an ambient, low-opacity shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04). The only pronounced layering occurs in the hero banner, where a glassmorphic KPI card utilizes backdrop-filter blur(12px) and white/80 fill over the 3D artwork.
IMAGERY
A solitary high-fidelity 3D iridescent abstract orb acts as the brand centerpiece in the top hero block, blending sky blue, peach, and soft translucent folds. All other visuals are purely functional: circular team portrait avatars (36px diameter) and clean 1.5px stroke vector glyphs. Real-world photography is restricted solely to user headshots.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the monolithic obsidian navigation rail (#0d1522) and the ethereal top hero card featuring a 3D luminous glass ribbon orb overlayed with a frosted KPI card. It instantly signals modern high-end software without sacrificing enterprise data density. A common misuse is expanding the 3D visual language into lower operational cards, which destroys data legibility.
MUST
- Anchor high-level metrics with generous 28px numeric scale and explicit trend deltas.
- Maintain strict card corner radius consistency at 16px with crisp #e2e8f0 border strokes.
- Pair dark obsidian navigation rails exclusively with airy, light-tinted interior workspaces.
- Use pill-shaped status badges with low-contrast pastel fills to avoid visual chaos.
AVOID
- Never use dark backgrounds inside content cards; content canvas must stay pristine white.
- Do not apply heavy drop shadows; depth is strictly defined by border tone and 4px diffusion.
- Never omit uppercase tracking on kicker headers; always apply letter-spacing >= 0.05em.
- Do not crowd OKR table rows; maintain at least 14px vertical clearance between items.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2160:3824. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
