Design a light-mode website section: pristine clinical intelligence transitioning from an airy daytime canvas into an anchor-weight nocturnal operations foundation.
LAYOUT
The page follows a dual-tier asymmetric layout. The upper hero divides evenly into a 5-column left typography stack (announcement pill, 48px heading, explanatory paragraph, dual CTA, compliance row) and a 7-column right dynamic node graph centered on an orchestrating spark. The lower section shifts into a full-bleed dark slab bounded by 32px top radii, divided horizontally into a brand column, four link columns, a newsletter utility module, and an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #F9FAFC — Daylight Canvas: Primary surface for the hero section, conveying sterility, openness, and clinical safety.
- #0B101B — Midnight Slab: Foundation surface for the overarching footer container with top rounded corners.
- #FFFFFF — Card Elevated: Surface for floating automation node cards in the interactive workflow diagram.
- #0F172A — Deep Slate Text: High-contrast headline typography across the daytime hero section.
- #64748B — Muted Slate Text: Hero paragraph copy, trust badge descriptions, and secondary metadata.
- #3B66F5 — Electric Cobalt: Primary interactive CTA fill, newsletter submit button, and key node highlights.
- #EEF2FF — Soft Lavender Pill: Background tint for top category announcement badge and accent pills.
- #5B64E9 — Iris Autopilot: Gradient anchor on the headline emphasis keyword and primary node icons.
- #38BDF8 — Bioluminescent Cyan: Radial backdrop blur and active connector line glow for central orchestrator node.
- #94A3B8 — Footer Muted Link: Navigation links, copyright, and subtext inside the midnight footer slab.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em at display, 0em at body. The type selection conveys clinical competence, enterprise security, and contemporary software craftsmanship. Plus Jakarta Sans provides crisp geometry with slightly squarish curves that look calibrated rather than decorative. In headlines, tight letter-spacing (-0.03em) imparts urgency and authority, while relaxed body line-heights (1.5–1.6) guarantee effortless scannability.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled through high-diffusion, ultra-soft shadows on daylight UI cards (0 12px 32px rgba(15, 23, 42, 0.05)), avoiding harsh boundaries. In the nocturnal slab, elevation reverses: depth is achieved through layered tone-on-tone surfaces (#0B101B base with #131B2A embedded input and icon wells) rather than shadows. The central orchestrator node introduces luminous depth through a soft cyan radial backlight gradient.
IMAGERY
Vector-based systemic diagramming replaces traditional photography, visualizing software orchestration as a clean topology of nodes and conduits. Individual agent nodes utilize minimal, flat, single-color icons encased in pastel square containers (violet, blue, teal, purple). Photographic assets are intentionally absent to prioritize clinical precision, speed, and algorithmic transparency.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the seamless transition from an ethereal, light-slate clinical canvas directly into a massive, rounded 32px-radius midnight footer container, anchoring an otherwise floating node architecture. This avoids standard horizontal divider rules in favor of a profound architectural shift in atmospheric density.
MUST
- Retain the 32px top border radius on the dark footer container to preserve the nested slab silhouette.
- Use electric blue (#3B66F5) exclusively for primary action pathways and core active nodes.
- Keep node connector lines thin (1.5px) and colored in soft slate-blue with subtle bezier easing.
- Apply subtle drop shadows (0 8px 24px rgba(15, 23, 42, 0.06)) to daylight node cards.
AVOID
- Never make the footer container flat-topped without the signature 32px corner radius.
- Do not saturate diagram connector lines with solid neon colors; keep them delicate and atmospheric.
- Avoid using dark grey instead of the dedicated #0B101B navy for the lower section slab.
- Never center-align the main hero headline; it must stay strictly left-aligned against the diagram.
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 中尝试 
