Design a light-mode website section: surgical precision in luminous off-white, structured like an effortless descending cascade of automated intelligence.
LAYOUT
Asymmetric two-row grid composition. The top half is dominated by an expansive left-aligned headline block paired with an elevated platform preview, alongside a 4-stage staggered cascading workflow descending from left to right. The bottom half is anchored by a three-column horizontal row of uniform utility cards featuring trust badges, integration lists, and operational statistics.
PALETTE (use these exact hex values)
- #F9FAFB — Canvas Background: Global backdrop providing subtle warm-cool neutral contrast beneath white floating cards
- #FFFFFF — Card Surface: Primary surface for modules, interactive pills, and dashboard mockups
- #0F172A — Primary Ink: Dominant text colour for serif display titles and high-priority metrics
- #64748B — Secondary Ink: Body paragraphs, metric labels, and supporting technical copy
- #1D63ED — Cobalt Accent: Process step labels, connector lines, badge text, and key iconography
- #EFF6FF — Subtle Blue Surface: Background for step pills, icon container circles, and decorative backing sheets
- #D97706 — Warm Amber: Step 04 final outcome badge, subtitle, and chart gradient peak
- #1E293B — Slate Sidebar: Micro-dashboard embedded sidebar navigation panel
- #F1F5F9 — Line Border: Subtle card dividers, badge outlines, and structural bounds
TYPOGRAPHY
Typeface Newsreader (or Playfair Display, Source Serif 4), weights 400/500. Sizes 10px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 28px heading, 42px display. Tracking -0.02em. The typography strikes a measured balance between legacy clinical authority and cutting-edge autonomous engineering. The serif display face conveys the deliberate confidence of medical and financial institutions, while the tight, neutral sans-serif communicates computational precision and clean data architecture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through subtle atmospheric layering rather than hard edges. Pure white cards (#FFFFFF) lift off an ultra-light grey background (#F9FAFB) using an expansive, low-opacity drop shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02). The nested dashboard card creates a second elevation tier by sitting inside an illuminated sky-blue gradient pocket.
IMAGERY
Vector line icons rendered with uniform 1.5px stroke weight, rounded joints, and enclosed within faint tinted circles or shield vectors. Abstract geometric charts (such as the ascending spline graph) use soft translucent vertical fills under sharp stroked trendlines. Photography is entirely avoided in favor of crisp UI diagrams and structured typography.
SIGNATURE DETAIL — the thing that makes this design itself
The staggered, descending card cascade connected by royal blue orthogonal dashed lines. This visual metaphor turns an abstract automated pipeline into a physical, legible flow where every agent hand-off feels verified, ending in a distinct warm outcome card.
MUST
- Use Newsreader or an equivalent literary serif strictly for high-impact headlines.
- Offset sequential cards diagonally downwards to convey forward momentum and step completion.
- Maintain strict right-angle orthogonal routing on blue dashed connector paths.
- Ground white cards with barely perceptible, multi-stop diffuse drop shadows (y: 8-16px, blur: 24-32px, alpha: 0.03-0.05).
AVOID
- Do not use dark, heavy borders around cards; rely on elevation and white-on-neutral contrast.
- Do not introduce diagonal connector lines; connections must adhere strictly to rectilinear steps.
- Do not render body copy or microcopy in serif typography.
- Do not use harsh saturated saturated colours outside the deliberate cobalt and amber accents.
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 中尝试 
