Design a light-mode web interface screen: air-cushioned fintech utility with soft 3d porcelain accents and quiet confidence.
LAYOUT
Structured around a persistent narrow dark left sidebar, followed by a light header bar with utility navigation. The main content splits into an asymmetrical top section (2/3 width hero message with 3D illustration, 1/3 width checklist panel). The lower region contains a balanced three-column grid for action links, uptime chart, and update feeds, terminated by a full-width trust card.
PALETTE (use these exact hex values)
- #0a1628 — Midnight Rail: Background for vertical icon navigation sidebar
- #f8fafd — Canvas Ice: Overall application background behind cards
- #ffffff — Card Surface: Primary surface for dashboard widgets and hero section
- #0d9488 — Teal Accent: Primary action button, sparklines, progress bars, and positive delta values
- #0f172a — Text Primary: Main display headings, metric values, and card titles
- #64748b — Text Secondary: Body paragraphs, timestamps, and supporting label text
- #d97706 — Warm Amber: Maintenance mode indicator dot and badge text tint
- #fef3c7 — Badge Amber Surface: Soft pill container background for maintenance alert badge
- #f1f0fb — Soft Purple Tint: Subtle container fill for trust banner and icon avatars
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, 20px heading, 36px display. Tracking -0.02em at display, 0em at body. The geometric sans-serif (matched closely by Plus Jakarta Sans) communicates modern efficiency, calm authority, and accessibility. Its round letterforms soften what would otherwise be a stressful maintenance downtime screen. Freely substitutable with Inter or DM Sans without disrupting vertical alignment.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated through light surface contrast rather than pronounced drop shadows. White cards (#ffffff) sit lightly over a cool ice-blue base (#f8fafd), supported by delicate 1px borders (#f1f5f9) and negligible, diffused blur. The only stark depth contrast is the deeply recessed dark navy sidebar.
IMAGERY
Features soft, stylized 3D clay-like illustrations in porcelain white, gentle lavender, and teal. Objects are smooth and matte without hyper-glossy reflections, showcasing clean roadwork barriers and cones. Avoid raw photorealistic imagery or harsh vector line cartoons.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-dark navy utility rail against an airy, pastel-tinted status dashboard centered around a friendly, soft-rendered 3D maintenance barrier. This transforms what is normally an error screen into a reassuring, data-rich operations room.
MUST
- Use soft lavender and pastel fills for secondary icons and security banners.
- Keep all card corners strictly rounded between 14px and 16px.
- Pair dense dark charcoal typography (#0f172a) with crisp teal accents (#0d9488).
- Keep card inner padding uniform at 20px to 24px across the grid.
AVOID
- Do not use dark or black card containers on the main canvas.
- Avoid harsh high-contrast box shadows; keep elevation almost entirely flat with hairline borders.
- Do not mix bright warning red onto standard maintenance states.
- Avoid thick, heavy progress bars; limit track thickness to 4px.
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 中尝试 
