Design a light-mode website section: crisp technical observability inside a feather-light lavender tinted dashboard showcase.
LAYOUT
The section adopts an asymmetrical two-column desktop composition (~4:6 ratio). The left column holds an eyebrow badge, a concise 2-line display headline, a brief explanatory paragraph, three stacked feature rows with rounded icons, and dual CTA buttons. The right column showcases a sprawling interactive dashboard mockup framed in a single master rounded container with top navigation, split timeline/terminal middle row, and horizontal metrics/pipeline footer.
PALETTE (use these exact hex values)
- #F9F9FB — Canvas Background: Outer base canvas tone providing warm light framing
- #FFFFFF — Card Surface: Primary surface for interactive demo card and content tiles
- #F3F4F6 — Subtle Well: Subsurface background for secondary metrics, timeline wells, and icons
- #0F172A — Console Black: Monospace agent console background creating extreme focus
- #0F172A — Text Primary: Headings, metric values, and high-emphasis labels
- #6B7280 — Text Secondary: Descriptions, timestamps, supporting copy, and icons
- #7C3AED — Accent Purple: Brand eyebrow, active stepper node, and ambient glow
- #10B981 — Status Success: Live indicators, completed steps, and positive metrics delta
- #E5E7EB — Border Hairline: Hairline 1px borders surrounding containers and nested cards
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 36px display. Tracking -0.02em at display, 0 at body, +0.05em at caps. Clean, unpretentious, and rigorous. The geometric neo-grotesque sans (Inter) speaks with developer-tool authority, relying on high contrast between bold headings and muted secondary data. JetBrains Mono lends immediate technical credibility to agent execution logs.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth relies on a large, diffuse ambient blur shadow behind the primary showcase card rather than multi-layered card elevations. Inside the demo window, hierarchy is communicated through hairline borders (#E5E7EB) and subtle background shifts (white to #FAFAFB) rather than box-shadows. The terminal window commands immediate foreground priority via its stark #0F172A dark surface.
IMAGERY
No photographic imagery is present. Visual interest is driven purely by UI simulation: micro badges, timeline connectors, monospace shell output, and financial metric scorecards. Any decorative photography or 3D character illustrations would clash with the precise developer-centric tone.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-light, airy lavender-tinted SaaS dashboard framing a pitch-black mini terminal beside a continuous vertical timeline stepper. To execute properly, retain the crisp 1px borders, subtle status dots, and the deep, low-opacity indigo ambient glow under the showcase frame.
MUST
- Keep hairline borders at exactly 1px solid #E5E7EB to preserve light technical precision.
- Use JetBrains Mono exclusively within the dark console container.
- Render the main dashboard surface with an ultra-soft ambient purple drop shadow.
- Pair green #10B981 with 'completed' or positive metrics and violet #7C3AED with 'in-progress' operations.
AVOID
- Do not use dark backgrounds across the primary canvas; preserve airy high-key light mode.
- Avoid heavy drop shadows or bevels inside the nested interface cards.
- Never mix serif typefaces into this technical dashboard layout.
- Do not omit the vertical connecting line on the execution timeline stepper.
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 中尝试 
