Design a light-mode website section: delicate pointillist data streams framing a stark obsidian developer console in high-trust clarity.
LAYOUT
Vertically centered hero structure beginning with an announcement badge, moving down through a tight display headline and two-line explanatory paragraph. An action pair and trust indicator row bridge the hero copy into a prominent anchored code terminal. Peripheral feature cards orbit the terminal at varied vertical offsets.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary background canvas creating open, breathable negative space
- #0e131f — Obsidian Surface: High-contrast background for the interactive API terminal and flow monitor
- #0f172a — Primary Text: Display headlines, navigation links, and primary button background
- #64748b — Muted Text: Body copy, node card subtitles, line numbers, and inactive tabs
- #eb4335 — Agent Coral: Primary headline emphasis keyword, category icons, and sparkle indicator
- #10b981 — Emerald Status: Uptime indicator, 201 Created badge, and completed flow checks
- #e2e8f0 — Border Subtle: Hairline borders on floating cards, announcements, and secondary buttons
- #1e293b — Terminal Border: Internal dividers and outer stroke for the dark code execution window
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px body-lg, 20px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. Modern, developer-centric, and intensely calibrated. Inter provides unpretentious, crisp legibility across dense navigation and headings, while JetBrains Mono injects undeniable engineering authority into the payload demonstrations.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, airy density.
DEPTH
Depth is created through physical layering rather than intense drop shadows. The generative particle waves sit beneath crisp, floating white cards with 0px 4px 12px rgba(0,0,0,0.04) shadows, while the large code terminal commands visual gravity through its deep black tone and sharp contrast against the pristine floor.
IMAGERY
Abstract, algorithmic stippled point clouds resembling multi-colored sand or generative flow fields (coral, sky blue, sage green, and lavender). No photographic human assets or generic 3D illustrations are allowed; visuals must convey structured mathematical data streams.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of ethereal multi-colored stippled vector mesh waves with floating, line-connected capability badges anchored directly into a dark dual-pane developer IDE.
MUST
- Reserve the dark obsidian fill (#0e131f) exclusively for technical execution artifacts like the terminal and flow monitor.
- Highlight key audience phrase 'AI agents' in warm coral (#eb4335) against the dark display headline.
- Use hairline 1px borders (#e2e8f0) with subtle dropped shadows on all floating white node cards.
- Keep background particle density delicate and organic; let the center remain clear for typography legibility.
AVOID
- Do not invert the page to a full dark theme; the white airy ground is essential to the light aesthetic.
- Do not apply solid colored backgrounds to hero callouts; maintain stark white and black interaction primitives.
- Do not make code terminal corners sharp; adhere to the generous 16px perimeter radius.
- Do not allow particle waves to overlap the main headline or subtitle text.
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. Try in DraPub