Design a light-mode website section: crisp executive whiteboards illuminated by electric blue commands and purposeful kinetic telemetry.
LAYOUT
A 12-column responsive grid splits roughly 40/60 between marketing narrative and live product simulation. The left rail houses an overline badge, display headline, body paragraph, three stacked feature rows, dual CTA pills, and a monochrome customer logo strip. The right container houses an entire SaaS app shell complete with vertical navigation sidebar, top organization header, a 4-card metric grid, and two split panels for mission timeline and live agent console.
PALETTE (use these exact hex values)
- #F5F6F8 — Canvas Ground: Outer background surrounding the landing showcase and editorial columns
- #FFFFFF — Surface Pure: Primary product canvas container, metric cards, and secondary pill buttons
- #0C1017 — Console Deep: Background for the embedded live agent terminal and command readout
- #1565FF — Electric Cobalt: Primary CTA button, active navigation selection, and accent icon glyphs
- #0F172A — Text Primary: Display headlines, metric values, and primary card labels
- #64748B — Text Secondary: Explanatory subtext, sidebar links, timeline metadata, and inactive steps
- #10B981 — Telemetry Emerald: Live indicator dots, percentage delta uplifts, and completed mission badges
- #E2E8F0 — Border Subtle: Hairline card outlines, horizontal dividers, and inactive timeline tracks
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.025em at display, -0.01em at body. Plus Jakarta Sans delivers a contemporary, tech-forward voice that feels operational yet refined. Its open apertures and crisp geometry ensure high legibility at 11px in dashboard metric cards and clean authority at 44px display size. Inter or Geist serve as seamless zero-cost drop-in substitutes without disrupting layout rhythm.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1320px container, comfortable density.
DEPTH
Depth is achieved through layering flat surfaces rather than heavy bevels. The main floating application shell sits at elevation level 2, casting an expansive 0px 24px 48px -12px rgba(15, 23, 42, 0.07) ambient shadow onto the neutral #F5F6F8 canvas. Internal cards remain flush with 1px borders, while the dark console punches deep visual contrast via stark tone shift rather than shadow.
IMAGERY
This interface avoids illustrative or photorealistic artwork in favor of literal UI components and vector telemetry graphs. A single circular 32px user avatar portrait in the bottom-left provides a touch of human realism. Monochrome vector logos (30% opacity) align cleanly across the bottom-left to establish social proof without visual distraction.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean white SaaS dashboard enclosing a singular, high-contrast dark terminal window (#0C1017). This move immediately communicates that an autonomous technical agent operates beneath the polished executive surface. It fails when the terminal window is either made translucent or replaced with standard light UI, which strips away the visceral sensation of backend compute.
MUST
- Maintain high contrast between the #0F172A primary headlines and #64748B explanatory copy.
- Use exactly 999px border-radius for all primary, secondary, and filter pill buttons.
- Keep internal card borders strictly at 1px solid #E2E8F0 without heavy outer shadows.
- Anchor the dashboard container with a large soft blur shadow (rgba(15, 23, 42, 0.06)).
AVOID
- Do not use sharp 0px or 4px radii on buttons; pills are mandatory across all controls.
- Do not place loud gradient fills in the background canvas; keep it neutral #F5F6F8.
- Do not tint the dark console container blue; it must remain near-black (#0C1017).
- Do not mix icon styles; use consistent 1.5px stroke weight minimalist geometric glyphs.
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 中尝试 
