Design a light-mode website section: clinical precision softened by muted lavender gradients, micro-diagrams, and crystalline developer ergonomics.
LAYOUT
The section employs an asymmetrical two-column architecture inside a centered 1240px container. The left column contains the narrative anchor: uppercase pill badge, tight 38px title, descriptive summary, and a 2x3 grid of capability cards. The right column houses an expansive unified developer preview card combining API code text, DX benefits, and an interactive cloud orchestration diagram. The entire composition terminates in a full-width horizontal compliance ribbon.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Background: Outer structural page background behind all floating cards and modules.
- #FFFFFF — Surface White: Primary card, container, and diagram node surface fill.
- #FAFAFD — Surface Card Hover: Faint hover state fill for interactive feature cards.
- #5848DF — Brand Violet: Primary brand accent, active state nodes, tags, and icon glyph accents.
- #EEECFC — Tint Lavender: Background fill for the central hub node and feature category pill.
- #FDF0ED — Tint Peach: Subtle container fill for notifications and routing icon backgrounds.
- #EDF5FD — Tint Blue: Background fill for calendar and availability icon markers.
- #161823 — Text Primary: Main heading text, card titles, and high-emphasis labels.
- #6C7284 — Text Muted: Body copy descriptions, secondary metadata, and diagram captions.
- #E6E9F2 — Border Subtle: Hairline card boundaries, node outlines, and connector track lines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 38px display. Tracking -0.025em on headings, 0 on body. The voice is authoritative, clinical, and developer-first. Using an ultra-clean geometric sans-serif (Inter) with tight negative tracking on major titles creates immediate engineering credibility. The inclusion of a crisp monospace font for code blocks establishes tangible utility without feeling raw or unstyled.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 999px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and relies on flat planar layering over a subtle cool-gray canvas (#F8F9FC). Cards use an almost invisible multi-stop ambient shadow (0px 2px 4px rgba(22, 24, 35, 0.02), 0px 8px 24px rgba(22, 24, 35, 0.04)) combined with a 1px border (#E6E9F2). Internal elements like code blocks and node tiles float within the container using identical subtle border boundaries without compounding shadow depth.
IMAGERY
No photographic imagery is used. The visual layer is entirely constructed of precision line-art iconography, schematic orchestration diagrams, and rendered code interfaces. Any photography would disrupt the clinical, engineered aesthetic; imagery must strictly remain technical schemas and vector iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The central orchestration hub: a branded violet glyph surrounded by a faint radial mesh, connected via precise dotted vector bus-lines to modular system nodes. Recreate it by placing a 72px central squircle inside an SVG layout with path connectors (stroke-dasharray 3 3) leading to satellite cards. Misusing it involves making connector lines solid black or omitting the pastel icon backgrounds on the satellite endpoints.
MUST
- Keep icon containers tinted in ultra-light pastels with matching saturated glyphs.
- Use dotted hairline strokes (#C4C9D8) for connection lines in diagrams.
- Ensure all white cards sit on a tinted #F8F9FC background to maintain visible edges.
- Limit card drop-shadows to soft ambient spreads: 0 4px 20px rgba(0, 0, 0, 0.03).
AVOID
- Never use pitch-black backgrounds; all dark accents must be navy or deep violet.
- Avoid solid brightly-colored button backgrounds across feature cards—keep cards quiet.
- Do not use sharp 90-degree corners anywhere; even nested nodes require at least 8px radius.
- Never allow connector lines to cross each other or use high-contrast solid black paths.
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 中尝试 
