Design a light-mode web interface screen: deep navy navigation anchors an airy cloud canvas illuminated by cyan-indigo neon gradients and crisp metric cards.
LAYOUT
The screen uses a fixed 240px-wide sidebar on the left and a fluid workspace to the right. The workspace flows vertically: utility search header, two-column hero with an illustrative mesh orb, a 5-column service grid, followed by a split section combining a wide 2/3 dark case study card and a 1/3 insights card. A logo strip anchors the bottom of the canvas.
PALETTE (use these exact hex values)
- #060B18 — Sidebar Midnight: Deep structural background for persistent left navigation bar and base canvas contrast.
- #F8FAFC — Main Canvas: Light background across the main dashboard content area.
- #FFFFFF — Pure White: Elevated card backgrounds, metric containers, search pill, and white surface cards.
- #1A56DB — Electric Cobalt: Primary buttons, active indicators, chart trendlines, and key focal accents.
- #0B132B — Dark Case Surface: Inverted dark theme card container for featured case studies and telemetry widgets.
- #0F172A — Text Primary: Headings, display titles, and prominent statistics in light sections.
- #64748B — Text Secondary: Body paragraphs, navigation inactive text, subtitles, and captions.
- #FF5757 — Neon Coral: Accent node highlights, secondary status chips, and featured case study button.
- #10B981 — Success Mint: Positive metric delta indicators and trend up-arrows.
- #E2E8F0 — Subtle Border: Light mode card dividing lines, search bar boundary, and container outlines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 44px display. Tracking -0.03em for headings, 0 for body, 0.08em for uppercase caps. Clean, precise, and tech-forward. A modern geometric grotesque (like Plus Jakarta Sans) communicates engineered intelligence and contemporary SaaS sophistication without feeling clinical. Generous negative letter-spacing on display headlines yields an authoritative agency tone, while wide tracking on uppercase labels ensures scannability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created through surface contrast rather than pronounced elevation shadows. The deep midnight sidebar acts as the lowest layer, grounding the lighter white surface cards which rest upon a #F8FAFC canvas with minimal, soft blur shadows (0 2px 8px rgba(15,23,42,0.04)). The dark featured case study card provides intentional optical weight through high contrast instead of 3D layering.
IMAGERY
Hero and publication imagery relies on abstract, iridescent 3D computer graphics with glassmorphic refractions, neon ribbons, and glowing fluid forms. All graphic motifs feature deep blacks, neon blues, and cyans. Realistic photographic stock or figurative human portraits outside of circular avatar thumbnails are entirely excluded.
MUST
- Keep the sidebar strictly dark (#060B18) while maintaining the central canvas light (#F8FAFC).
- Use 16px corner radius consistently across content cards, case containers, and stat blocks.
- Render glowing hero graphics using smooth cyan, blue, and purple radial blur layers.
- Emphasize metrics with bold 20px+ font weights paired with 11px green delta badges.
AVOID
- Do not invert the entire interface into pure dark mode; preserve the dark-sidebar / light-canvas duality.
- Never use sharp, 0px corners on interactive cards or buttons; adhere to 10px-16px curvature.
- Avoid heavy drop shadows; use diffused 0 4px 20px rgba(0,0,0,0.04) elevation instead.
- Do not clutter cards with dense paragraphs; keep summaries under 3 lines.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
