Design a light-mode website section: crisp developer infrastructure presented through pale lavender cards, subtle telemetry, and glowing node diagrams.
LAYOUT
The section employs an asymmetrical 12-column bento architecture. The top tier features a 7:5 ratio, pairing a wide architectural showcase on the left with three vertically stacked cards on the right. Below, a continuous 12-column horizontal banner consolidates quantitative metrics and compliance guarantees in four distinct columns.
PALETTE (use these exact hex values)
- #F9F9FB — Canvas Background: Outer page canvas framing the interactive bento grid components
- #FFFFFF — Card Surface: Primary surface for cards and container panels
- #EAEBED — Card Border: Subtle 1px boundary stroke defining cards and inner telemetry panels
- #0F172A — Primary Text: Main headlines, bold metrics, and primary narrative points
- #64748B — Secondary Text: Body descriptions, telemetry labels, and feature annotations
- #6366F1 — Indigo Brand Primary: Key headline accent words, node graphics, and focal points
- #EEF2FF — Lavender Glow: Subtle background fill for developer and metric icon containers
- #E0F2FE — Sky Tint: Background fill for workflow and latency icon tiles
- #FEE2E2 — Coral Tint: Background fill for industry and enterprise icon containers
- #0284C7 — Success Cyan: Telemetry metric highlight values showing optimization gains
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 38px display. Tracking -0.02em at display, 0 at body. The typography relies on Inter or an equivalent high-precision neo-grotesque sans. Its character is engineered, objective, and developer-centric. Tight negative tracking (-0.03em) on large titles keeps wide display type compact and punchy, while tabular numerals ensure clean alignment across token counts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered flat-first with microscopic physical separation. Cards float above the #F9F9FB canvas via crisp 1px borders (#EAEBED) paired with an ultra-diffuse ambient shadow (0px 2px 8px rgba(0, 0, 0, 0.02)). The sole strong elevation belongs to the central middleware node, which emits a soft indigo glow (0px 12px 24px rgba(99, 102, 241, 0.25)).
IMAGERY
No photographic elements are used. Visual interest is strictly conveyed through abstract technical node schematics, dot grids, hairline architectural flow lines, and pastel-framed line icons. Visual metaphors emphasize compression, pipelines, and acceleration.
SIGNATURE DETAIL — the thing that makes this design itself
The central indigo middleware pill node suspended between client and LLM within a dot-matrix glow field. It transforms an abstract middleware software utility into a concrete physical gateway that visually demonstrates compression occurring in real-time.
MUST
- Use a two-color treatment on major headings: primary charcoal (#0F172A) combined with indigo (#6366F1).
- Pair every stacked card with a bottom row of micro checkmark tags for key integrations.
- Keep icon background containers pastel and desaturated (10% opacity fills like #EEF2FF).
- Maintain hairline borders (1px solid #EAEBED) around all card perimeters.
AVOID
- Do not use dark, heavy Drop Shadows; rely solely on hairline borders and soft ambient blur.
- Do not saturate icon background tiles; keep them gentle, airy, and functional.
- Avoid heavy dark fills for cards; keep the primary canvas light and pristine.
- Do not omit checkmark icons before integration tags in the stacked cards.
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 中尝试 
