Design a light-mode website section: clinical b2b developer tooling balanced by soft violet glows, schematic architectural diagrams, and structured data proof points.
LAYOUT
The design follows a top-down, split-then-grid cadence. The top section presents an asymmetrical 40/60 two-column split: narrative copy, eyebrow, and bulleted checklist on the left, counterbalanced by the expansive architecture board on the right. Below this hero section, a full-width rule leads into a clean, 4-column horizontal feature strip with vertical hair-line dividers separating each benefit equally.
PALETTE (use these exact hex values)
- #ffffff — Base Canvas: Global background providing high-key legibility for typography and diagram elements
- #f8fafc — Subtle Panel: Background fill for the master schematic container and auxiliary card surfaces
- #161b26 — Code Terminal Slate: Inverted dark container for rendering JSON candidate signals and telemetry output
- #e2e8f0 — Border Muted: Subtle 1px perimeter outlines on nodes, diagram cards, and column dividers
- #5850ec — Core Indigo: Primary brand accent used on glowing central logos, connector dots, and highlight text
- #f5f3ff — Lavender Tint: Subtle tint for eyebrow badge pills, icon container circles, and trust badges
- #111827 — Text Primary: Display headlines, primary card titles, and high-emphasis labels
- #64748b — Text Secondary: Body descriptions, connector annotations, and checklist list items
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px body-lg, 20px heading, 44px display. Tracking -0.03em display, -0.01em body. The typographic tone is objective, precise, and authoritative. Set in a clean geometric sans-serif (Inter or similar), the letterforms possess neutral proportions that let numbers and technical labels shine. Tight negative tracking in large headlines adds a confident modern editorial edge, while monospace JetBrains Mono delivers authentic developer fidelity in data payloads.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using wide-aperture, low-opacity ambient shadows rather than harsh stepped layers. The main feature canvas floats subtly above the page using a soft spread (0 24px 48px -12px rgba(0,0,0,0.06)). The central engine card utilizes a concentrated, tinted violet diffusion (0 10px 25px rgba(88,80,236,0.2)) to signify computational processing.
IMAGERY
No human photography or decorative 3D assets are used. The visual language relies purely on schematic system diagrams, programmatic code editors, and simplified line-art iconography housed within circular or squircled badges. Everything is styled to mimic an interactive developer architecture interface.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the 'Data Pipeline into Proof Terminal' board: incoming data sources route orthogonally through dashed lines into a glowing violet engine, which terminates immediately below into a live, dark JSON code card. It visually translates abstract product capability into tangible, verified developer output.
MUST
- Use soft grey borders (#e2e8f0) to define structural nodes without overwhelming contrast.
- Keep connector paths as thin, muted dashed lines with clean 90-degree orthogonal bends.
- Isolate the deep slate terminal block solely for technical output or code examples.
- Highlight specific high-impact words in the introductory paragraph using the brand indigo.
AVOID
- Do not use saturated backgrounds; canvas must remain near pure-white or faint cool grey.
- Do not render icons in solid fill colors; maintain consistent 1.5px stroke weight.
- Never substitute rounded pill badges with sharp, rectangular tags.
- Avoid continuous solid arrows for architectural connections; use dashed subtle dot 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 中尝试 
