Design a light-mode website section: crisp white architectural diagramming with high-contrast cobalt typography and modular technical pipelines.
LAYOUT
Centered single-column stack opening with an eyebrow pill, display headline, and a four-column feature teaser row. The core visual is a three-segment horizontal pipeline diagram linking sources on the left, an engine in the center, and terminal code on the right. A four-column stats ribbon anchors the bottom of the section in an enclosed border card.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary surface canvas and card backdrop across the entire layout.
- #f1f5f9 — Grid Tone: Subtle background coordinate lines defining layout geometry.
- #e2e8f0 — Slate Border: Outer bounds for sub-cards, code blocks, and metrics containers.
- #0f172a — Deep Charcoal: High-contrast headings, main metric values, and node titles.
- #64748b — Slate Muted: Body descriptions, telemetry subtitles, and secondary labels.
- #1d4ed8 — Electric Cobalt: Headline keyword highlight, active pill dot, and core architecture boundary.
- #60a5fa — Engine Sky Accent: Prominent outline stroke highlighting the Hub Data Engine central container.
- #10b981 — Live Emerald: Active indicator dot and streaming status tag typography.
- #ecfdf5 — Emerald Tint: Fill for real-time streaming badge capsules.
- #f59e0b — Warm Amber: Icon glyph and background tint for final packaging assets.
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 28px heading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.02em at captions. Inter provides a clean, neutral, and hyper-legible engineering tone that allows technical metrics and architecture labels to read effortlessly. JetBrains Mono delivers crisp developer ergonomics in the API code box. The -0.03em tracking at display scale lends authority without geometric distortion.
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 completely non-skeuomorphic and almost entirely border-driven. Flat cards rely on 1px #e2e8f0 perimeter strokes with zero blur shadows, allowing the technical flow to feel like an interactive architectural schematic. A very faint ambient grid provides planar grounding without physical elevation.
IMAGERY
No photographic elements are present. Visual hierarchy is achieved purely through precise geometric line-art iconography, syntax-highlighted code blocks, and schematic pipeline nodes. Any real-world photography would contradict the blueprint-like purity of the interface.
SIGNATURE DETAIL — the thing that makes this design itself
The three-stage horizontal data-engine schematic, specifically the central 'Hub Data Engine' container highlighted by its distinct sky-blue border (#60a5fa) and interconnected arrow-flow nodes. It transforms abstract AI infrastructure into a tangible, legible assembly line. Misusing it as a generic card without sequential connecting arrows destroys the narrative of automated data flow.
MUST
- Use exact 1px hairline borders in #e2e8f0 to delineate technical workflow components.
- Restrict bright cobalt (#1d4ed8) to key interactive states, pipeline engine borders, and headline accents.
- Set the Hub Data Engine central container apart with a distinct 1.5px sky blue border (#60a5fa).
- Keep background telemetry icons tinted in pale pastels with monochrome internal line weights.
AVOID
- Do not introduce dark mode containers or heavy dark surfaces into this lightweight composition.
- Do not use drop shadows deeper than 4px blur; rely on 1px borders for elevation.
- Do not color all headline text cobalt—only color the terminal keyword 'advantage.'.
- Do not crowd pipeline arrows; ensure comfortable 16px minimum margins between sequential nodes.
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 中尝试 
