Design a light-mode web interface screen: executive financial governance dressed in crystalline cobalt and midnight slate surfaces.
LAYOUT
The workspace employs an asymmetric, sidebar-anchored layout with a persistent 240px navigation spine on the left and a responsive content stream on the right. Content progresses hierarchically from high-altitude executive summaries at the top, through operational launchpads and core KPI cards, into analytical bar/line projections, concluding with real-time audit feeds and top client rosters. Internal card rows use rigid 2-column and 4-column CSS grids with unified 16px to 24px gutters.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application backdrop behind all secondary dashboards and list widgets
- #FFFFFF — Card Surface: Primary elevated card fill for daylight charts, metric tiles, and activity lists
- #0C152B — Midnight Executive: Hero banner and executive intelligence container surface fill
- #132144 — Executive Cell: Internal metric tiles nested within the dark midnight hero card
- #2563EB — Electric Cobalt: Primary call-to-action buttons, active navigation indicators, and primary chart series
- #C7D2FE — Periwinkle Accent: Secondary comparison bar series for expenses and subtle active background badges
- #10B981 — Delta Emerald: Positive revenue percentages, bullish sparklines, and growth callouts
- #F59E0B — Delta Amber: Warning indicators, open task alerts, and downward delta sparklines
- #0F172A — Obsidian Text: High-contrast headings, heavy display statistics, and main data readouts
- #64748B — Slate Muted: Sublabels, secondary meta descriptions, dates, and inactive navigation links
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 36px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers a technical yet approachable executive voice, marked by clean geometric terminals and an authoritative open architecture. Its tight tracking in display contexts gives headline figures a compact, commanding balance suited for corporate balance sheets. Inter serves as an ideal zero-cost drop-in substitute, providing identical structural efficiency and tabular number precision.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated primarily through structural surface contrast and razor-sharp 1px borders rather than heavy atmospheric shadows. The deep midnight navy blocks (#0C152B) create a receding focal anchor that gives the foreground white cards crisp dimensional presence. Where shadows occur, they are nearly imperceptible (0 1px 3px rgba(0,0,0,0.04)), keeping the interface clinical, fast, and legible.
IMAGERY
This system rejects decorative photography in favor of abstract technical assets and micro-interfaces. Subtle, low-opacity vector contour lines ornament dark containers to suggest strategic depth and geographic topography. Floating UI snippets with radial progress dials and simulated cards serve as self-referential product imagery in promotional panels.
SIGNATURE DETAIL — the thing that makes this design itself
The signature identity is the high-contrast 'Midnight Executive Anchor'—a deep navy card (#0C152B) textured with faint topographic contour lines, nesting glowing translucent metric tiles alongside a crisp white daylight dashboard. It provides the gravitas of a dedicated dark-mode analytics console while maintaining the operational clarity of a daylight SaaS interface. Misuse occurs when dark fills are applied haphazardly to mid-level transaction cards, breaking the hierarchy.
MUST
- Retain the strict visual duality between midnight navy hero containers (#0C152B) and white analytical cards.
- Use 1px borders (#E2E8F0) consistently on all light-mode cards rather than relying purely on drop shadows.
- Keep sparklines minimalist and unadorned by axes, labels, or grid fills when nested in metric cards.
- Format currency and numeric metrics with tabular figure spacing and bold weights for instant scanning.
AVOID
- Do not introduce muddy drop shadows; rely on crisp 1px borders and subtle 2px blur elevation.
- Do not use dark backgrounds across standard analytical charts; midnight surfaces are reserved for executive hero sections.
- Avoid multi-colored icon themes; keep icons enclosed in pale tinted monochrome background squares.
- Do not crowd sparkline charts with data points, tooltips, or area gradients within small metric cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
