Design a light-mode website section: clean high-throughput developer telemetry encased in soft-gradient lavender and precision data grids.
LAYOUT
The section adopts a two-tier layout: a dominant 38/62 two-column split on top, followed by an evenly spaced 4-column trust badge row along the bottom. The left column stacks category eyebrow, display headline, narrative summary, three feature bullet rows, and a dual-stat callout box. The right column embeds an expansive multi-panel SaaS control interface featuring sidebar, top metrics grid, transfer progress bar, and three bottom diagnostic widgets.
PALETTE (use these exact hex values)
- #FAF9FC — Canvas Background: Overall page background canvas providing warm light contrast.
- #FFFFFF — Card Surface: Primary elevated card and dashboard backdrop.
- #EBE9F1 — Card Border: Hairline separator for inner card panels and metric dividers.
- #0F172A — Text Primary: Main headlines, active navigation labels, and bold metric numbers.
- #64748B — Text Muted: Body copy, feature descriptions, inactive nav items, and stat subtexts.
- #5D43F6 — Electric Violet: Key action buttons, active navigation indicator, progress bars, and badge accents.
- linear-gradient(90deg, #5D43F6 0%, #EA580C 100%) — Gradient Accent: Text gradient treatment on the headline phrase 'in action'.
- #10B981 — Telemetry Success: System status lights, optimal routing pills, and positive delta values.
- #090D1E — Terminal Canvas: High-contrast dark background for the live stream log console.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist Sans,SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, -0.01em at body, 0.05em at uppercase badges. The voice is crisp, highly technical, and enterprise-grade. Inter provides flawless neutral clarity across tiny dashboard UI scales (10-12px) while holding tight, confident visual punch in display sizes (48px) with negative tracking. A clean monospaced pairing gives developer credibility without turning the interface into an unapproachable CLI.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is handled predominantly through surface flat contrast and hairline borders rather than heavy elevation. The main dashboard card uses a single soft diffused shadow (0 12px 32px -4px rgba(93, 67, 246, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.04)) atop #FAF9FC. Sub-panels within the dashboard rely on 1px borders (#EBE9F1) or background tint variations to convey hierarchy.
IMAGERY
There are no raster photos; the design relies exclusively on clean SVG vector icons, dotted map projections, and code telemetry feeds. The map projection uses tiny geometric dot grids with smooth bezier arc strokes for connections. Any photography would clash with the hyper-technical, automated data infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone split between an editorial SaaS pitch on the left and a micro-detailed functional simulation dashboard on the right, punctuated by the signature purple-to-orange gradient on the hero verb 'in action'. It creates immediate trust by proving the software's capability inline before asking the user to sign up.
MUST
- Use tabular numbers (font-variant-numeric: tabular-nums) for all dashboard stat metrics to avoid layout shift.
- Restrict the vibrant purple-to-orange gradient solely to the key headline accent and major progress fill.
- Ensure the terminal console stays deep navy (#090D1E) to maintain strict contrast against the light UI.
- Apply subtle 1px borders (#EBE9F1) rather than heavy drop shadows to distinguish dashboard panels.
AVOID
- Do not apply heavy dark borders or shadows exceeding blur: 24px, spread: -4px, opacity: 6%.
- Never use generic serif typefaces; this interface relies entirely on sharp technical grotesque geometry.
- Avoid solid black backgrounds for the terminal; use tinted deep blue-violet (#090D1E).
- Do not allow metric cards to vary in height; enforce standardized flex alignment.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
