Design a light-mode website section: crystalline developer canvas layered with dynamic cyan dot matrices, crisp code consoles, and high-velocity electric blue accents.
LAYOUT
The page follows an asymmetric two-column split within a 1280px max-width container. Left column stacks the announcement pill, a massive two-tone display headline, body description, twin CTA cluster, and proof tile. Right column holds the oversized live-code console which slightly overlaps the swirling particle field, anchoring developer intent.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure: Global backdrop, card response backgrounds, and icon container fill
- #0a1128 — Ink Navy: Primary typography, top navigation button, and API request code block container
- #0062ff — Electric Cobalt: Hero headline emphasis, primary CTA background, POST badge, and active links
- #525f7f — Slate Muted: Body copy, secondary labels, subheaders, and metadata subtitles
- #e3e8ee — Border Hairline: Console border, secondary button stroke, and stats card outline
- #00a878 — Metric Emerald: 200 OK status badge indicator and highlight percentage stats metric
- #0d1b2a — Console Request Navy: Background for the JSON request code window
- #eff4ff — Pill Blue Soft: Background for the announcement pill and API request chip
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 19px body-lg, 24px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. The typography balances executive authority with engineering precision using Inter Display. High negative tracking (-0.035em) at 64px delivers confidence without aggression, while JetBrains Mono injects undeniable developer credibility. Replacing this with a quirky humanist or serif typeface would completely erode the rigorous fintech-API aesthetic.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered through atmospheric perspective rather than heavy skeuomorphic shadows. The primary API console uses an ambient drop shadow (0 24px 48px -12px rgba(10, 17, 40, 0.08)) that lifts it gently off the patterned ground. Floating spheres feature soft specular highlights and drop miniature soft shadows to imply suspension in 3D space.
IMAGERY
Visual assets consist of programmatic dot-matrix ribbons curving across space in cyan and cobalt gradients, suggesting dynamic data streams. Translucent glass and ceramic blue marbles float around the perimeter to provide tactile dimension. Photography, human portraits, or illustrative cartoon characters are entirely excluded.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-polarity API Inspector: nesting an obsidian code request block (#0d1b2a) directly above an illuminated white response block (#ffffff) within a single rounded console container. It communicates inputs versus outputs instantaneously without requiring the user to parse tabs or toggles.
MUST
- Retain the sharp visual split between dark navy headline text and electric cobalt emphasis.
- Enclose the live API request container in dark navy while rendering the response on pure white.
- Use precisely 1px hairline borders in #e3e8ee on secondary buttons and proof containers.
- Position sweeping particle mesh patterns subtly behind foreground cards at 40-60% opacity.
AVOID
- Never apply high-contrast dark backgrounds to the entire global viewport.
- Do not remove the line numbers from the API console simulation.
- Avoid using saturated warm colors like red, yellow, or orange for decorative motifs.
- Do not round hero action buttons into full pill shapes; keep them at 10px radius.
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