Design a light-mode website section: crisp clinical b2b architecture balancing cold developer code syntax against soft, empathetic human research telemetry.
LAYOUT
The section is structured in two distinct tiers within a max 1200px container. The top tier features an asymmetric two-column split: left column hosts category pill, punchy display headline, descriptive paragraph, and a 3-part stat cluster; right column houses the interactive diagram bridging dark terminal code into output nodes. The bottom tier spans full-width with a four-column segmented feature enclosure.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Overall viewport canvas background providing soft, low-glare contrast for white cards
- #FFFFFF — Card Surface: Surface for feature panels, diagram nodes, and bottom value-proposition grid
- #1E2430 — Terminal Canvas: Dark code editor container representing technical simulation configuration
- #0F172A — Obsidian Text: Primary headings, card titles, and high-emphasis interface typography
- #64748B — Slate Text: Body copy, secondary metric labels, and diagram micro-descriptions
- #D91B74 — Vibrant Magenta: Focal punchline emphasis within the main hero headline
- #2563EB — Electric Blue: Primary action button, eyebrow badge text, and key node icon backgrounds
- #0D9488 — Mint Teal: Enterprise trust badge and security-oriented metric callouts
- #E2E8F0 — Subtle Border: Thin outlines on cards, bottom feature divider lines, and flow rails
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 46px display. Tracking -0.03em at display, -0.01em at body. The typography is precise, authoritative, and distinctly modern technical SaaS. Setting display headlines in tight, heavyweight Inter creates high confidence, while the JetBrains Mono terminal gives immediate technical credibility for engineers and researchers. For production open-source implementations, Inter paired with JetBrains Mono provides an exact 1:1 match.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created softly using layered pure white (#FFFFFF) cards hovering above an off-white (#F8FAFC) base canvas. Cards utilize an ultra-diffuse drop shadow (0 4px 20px -2px rgba(15, 23, 42, 0.05)) combined with a crisp 1px perimeter outline in #E2E8F0. The dark code terminal provides heavy grounded elevation through sheer tonal contrast rather than high drop shadow blur.
IMAGERY
This design eschews photographic imagery entirely in favor of an interactive architectural diagram. Artifacts consist of a realistic IDE configuration window, stylized app icon glyphs enclosed in circular badge backgrounds, and schematic dotted connector rails. Introducing stock photos of real people would directly contradict the synthetic, simulated product premise.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual hallmark is the hybrid 'code-to-humanity' pipeline diagram: a dark JSON IDE window branching through graceful dotted bezier curves into soft white persona output cards. It bridges deep developer infrastructure with user research outcomes. Misusing it by replacing the code block with a generic screenshot instantly degrades the technical authority.
MUST
- Reserve the vibrant magenta (#D91B74) solely for the headline kicker and related primary proof metric.
- Use curved, light slate dotted SVG paths (#94A3B8) with 1.5px stroke to interconnect flowchart stages.
- Maintain strict vertical dividers between inline stats and horizontal grid items using #E2E8F0.
- Anchor technical workflows with a stark dark terminal card (#1E2430) against the clean white canvas.
AVOID
- Do not make the entire canvas dark; the clinical light theme is fundamental to readability.
- Never use solid black borders; all separation must use #E2E8F0 or delicate dotted connectors.
- Avoid harsh high-contrast box shadows; keep elevations soft and dispersed under 10% opacity.
- Do not apply the magenta accent to body paragraphs or general interactive buttons.
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 中尝试 
