Design a light-mode website section: crystalline devtools architecture framed by a stark obsidian grounding footer.
LAYOUT
The screen flows from a high-clarity hero banner directly into a horizontal flow chart where the product's runtime sits at the gravitational center between inputs (agents) and outputs (tools/metrics). Immediately underneath, a 3-column micro-features bar reinforces core tenets. The layout resolves into an anchored dark multi-column footer container that cleanly caps the page bottom.
PALETTE (use these exact hex values)
- #F7F9FD — Canvas Light: Main light background behind hero diagram and headline content
- #0E131F — Obsidian Ground: Background for bottom developer footer container
- #FFFFFF — Card Pure White: Floating diagram nodes, metrics cards, and badge surfaces
- #131622 — Engine Core Black: Center architecture runtime block background
- #5A5FE8 — Primary Indigo: Primary CTAs, newsletter submit button, and brand glyphs
- #FA6E59 — Warm Coral Gradient Start: Starting gradient color on 'Pay only' headline emphasis
- #4C4BE8 — Electric Violet Gradient End: Ending gradient color on 'for what runs' headline emphasis
- #111827 — Graphite Dark Text: High-contrast headings and primary labels in light sections
- #64748B — Slate Text Muted: Subtitles, diagram meta descriptions, and table headers
- #94A3B8 — Footer Text Gray: Footer navigation links and copyright disclaimer text
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, 24px heading, 44px display. Tracking -0.03em at display, 0.08em at micro-caps. The typography is ultra-precise, technical, and approachable, perfectly conveyed via Inter or Plus Jakarta Sans. Large headline scales use tight geometric tracking to feel authoritative, while body copy remains neutral and readable at 15px with relaxed line height (1.5). For open-source replacements, Geist Sans provides an ideal developer-centric flavor.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1320px container, comfortable density.
DEPTH
Depth is delivered through featherlight ambient occlusion rather than heavy drop shadows. Floating diagram nodes utilize a dual-stage shadow (0 1px 3px rgba(0,0,0,0.04), 0 12px 28px -4px rgba(15,23,42,0.06)). The central runtime core pops out via an inner dark ambient glow with an electric purple perimeter wash.
IMAGERY
No photographic imagery is present. The visual language relies purely on schematic system architecture diagrams: clean rounded vector cards, isometric glyphs, and dashed telemetry lines. Introducing photography or photorealistic 3D renders would clash with the precise developer-tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal architectural runtime nexus: a centralized dark squircle core surrounded by white telemetry nodes connected via orthogonal dashed lines and metric badges. To execute correctly, keep all connected elements aligned on a strict grid with dot terminal connectors; misuse occurs when lines are diagonal or cards lose their white elevation.
MUST
- Keep diagram background nodes completely pure white (#FFFFFF) with subtle shadows against the soft #F7F9FD background.
- Use uppercase 11px tracked text (0.08em) for structural category headers and eyebrow badges.
- Keep the footer strictly enclosed in the deep obsidian shell (#0E131F) with rounded top corners.
- Apply the gradient treatment exclusively to the economic value headline ('Pay only for what runs.').
AVOID
- Do not apply heavy solid black borders to diagram cards; rely on subtle gray outlines (#EEF2F6).
- Do not reverse the contrast by placing dark cards arbitrarily on the light hero surface.
- Never use full black (#000000) for the footer; keep it within the slate obsidian tone (#0E131F).
- Do not use high-saturation gradients for general body text or standard CTA 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 中尝试 
