Design a light-mode website section: crisp daylight engineering precision framing an iridescent gradient core and midnight console.
LAYOUT
The page uses a strict centered single-column funnel at the top that flows into a wide 4-column structured ledger, terminating in an edge-to-edge dark workspace mockup. Vertical sequence: pill badge (top), 2-line display headline (center), 2-line explanatory paragraph (max-width ~600px), dual horizontal CTA button grouping, 4-column feature breakdown with 3 vertical dividing rules, and finally the top 40% of the IDE application preview anchored at the bottom edge.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary page background providing sterile contrast for hero copy and product chrome
- #0b0f19 — Midnight Console: Deep navy background for the embedded IDE interface and agent management viewport
- #111827 — Terminal Card: Panel containers, list cards, and graph nodes inside the dark software preview
- #0d1322 — Heading Slate: Dominant display text, main headline, and secondary action button labels
- #5e6a85 — Muted Slate: Subtitles, descriptive feature captions, and secondary code metrics
- #6366f1 — Iris Violet: Primary brand tint, badge spark icon, and start of button/keyword linear gradients
- #f87171 — Coral Glow: Terminal stop of the primary CTA gradient and display typography text fill
- #10b981 — Telemetry Emerald: Success indicator pips, operational status text, and uptime checkmarks
- #e2e8f0 — Hairline Border: Secondary button outline, feature segment dividers, and pill container borders
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 18px body-lg, 24px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, modern, and engineering-grade. A clean geometric grotesque (matching Geist Sans or Inter) at heavy weights and tight tracking conveys enterprise readiness, while the monospace companion provides authentic developer credibility. If Geist is unavailable, substitute with Inter for body and JetBrains Mono for code.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 16px gaps, 72px between sections, 1140px container, comfortable density.
DEPTH
Depth is handled predominantly through crisp flat separation and edge borders rather than heavy blur shadows. The only noticeable elevation effect is a very delicate, diffuse warm-tinted underglow beneath the gradient primary CTA and the dark IDE viewport frame. This keeps the technical document aesthetic clean and lightweight.
IMAGERY
Avoid photographic assets or 3D character illustrations entirely. Imagery is strictly technical product abstraction: real syntax-highlighted code editors, node-based DAG execution graphs, sparkline charts, and monospace status labels. Visual interest stems from accurate, dense UI components rather than ornamental art.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the inline gradient mask on the key structural noun ('one') in the headline that directly mirrors the color stop sequence (indigo #6366f1 to salmon #f87171) of the primary CTA button beneath it. It connects the conceptual claim to the execution button visually without repeating color noise across the entire layout.
MUST
- Reserve the violet-to-coral gradient strictly for high-intent primary buttons and single focal keywords.
- Keep display typography ultra-tight (-0.035em tracking) to create an authoritative, punchy silhouette.
- Use 1px vertical hairpins (#e2e8f0) to cleanly delineate horizontal column features without full boxed cards.
- Ground floating hero elements with an interactive software mockup showing real syntax and telemetry.
AVOID
- Do not apply drop shadows to primary text; let typography contrast against stark white purely via weight and color.
- Avoid solid black (#000000); use deep blue-tinged slate (#0d1322) for type and #0b0f19 for consoles.
- Do not wrap feature highlights in rounded cards; retain the open horizontal ledger layout with dividers.
- Never use generic marketing illustrations; display actual developer artifacts like code and trace DAGs.
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 中尝试 
