Design a light-mode website section: crisp developer ergonomics resting on an atmospheric, cyan-to-violet luminous canvas.
LAYOUT
The hero uses an asymmetric two-column split layout contained within a 1280px max-width boundary. The left column contains the product narrative: announcement badge, 60px display headline, descriptive body copy, dual-action card CTAs, and compliance markers. The right column stacks a live terminal code editor over a horizontal multi-node dataflow diagram, completed by a docked full-width logo ticker at the base.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: dominant background base layer behind the gradient mesh
- #142132 — Terminal Deep Blue: background for the dark code editor and interactive technical cards
- #091421 — Midnight Charcoal: primary interactive CTA fill and solid top nav button
- #091E2A — Primary Headline Slate: primary display typography and high-priority branding
- #5A6B7E — Muted Slate Text: secondary body copy, navigation links, and passive labels
- #0E6566 — Deep Teal Accent: headline focus word 'AI agents' and primary launch pill fill
- #00E5FF — Neon Cyan Glow: luminescent halo behind the central architectural hex logo and data traces
- #10B981 — Telemetry Emerald: live status indicator pip and code execution status text
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px subheading, 15px body, 18px body-lg, 60px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, concise, and developer-first. Setting the headline in a tight-tracking (-0.03em) geometric sans communicates system reliability, while the monospaced terminal accents reinforce deep technical capability. System font substitutions like Inter paired with SF Mono or JetBrains Mono seamlessly reproduce this demeanor without licensing friction.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity contrast rather than physical drop shadows. Dark IDE and diagram surfaces float naturally over the luminous cyan and lavender background mesh. Border treatments are crisp, hairline (1px) semi-transparent strokes that separate dark containers from the atmospheric glow.
IMAGERY
The visual language uses programmatic product UI artifacts instead of photography or hand-drawn illustrations. Rich, dark-mode terminal windows displaying realistic cURL commands pair with node-based architectural system diagrams. Any decorative elements are strictly limited to vector circuitry lines, technical icons, and glowing network nodes.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of an ambient, high-key cyan/lavender background aura with a multi-layered dark terminal and interactive architectural flow diagram. To implement it correctly, let the light glow bleed organically under sharp, semi-translucent dark UI containers; never enclose the background glow inside an artificial card boundary.
MUST
- Retain the airy white breathing space on the left column to maximize copy impact.
- Pair dark terminal consoles (#142132) strictly with modern monospaced fonts and syntax tints.
- Use two-line actionable text within hero CTA buttons (action title + secondary subtext).
- Keep background atmospheric glow soft and diffuse, never hard-edged or distracting.
AVOID
- Do not invert the page into a full dark theme; the white surface maintains developer clarity.
- Never use harsh drop shadows; favor 1px borders and soft 24-48px atmospheric radial blurs.
- Do not omit the technical status pill (200 OK / latency) inside developer-focused UI mockups.
- Avoid loud saturated primaries for body text; keep typography restrained to slate tones.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试