Design a light-mode website section: pristine white developer canvas anchored by cobalt accents, terminal code blocks, and layered generative cards.
LAYOUT
Two-column asymmetric hero container within a 1240px boundary. The left column stacks category tag, 58px headline, body paragraph, button duo, and feature icons in a linear vertical rhythm. The right column constructs a vertical workflow: top input chips connect downward via dashed lines into a dark API block, which resolves into a floating white output card.
PALETTE (use these exact hex values)
- #ffffff — Canvas Background: Primary page background across hero and content containers
- #0e131f — Terminal Canvas: Deep slate background for the API request code mockup
- #2447f9 — Cobalt Blue: Primary brand color, primary button background, and headline highlight text
- #0f172a — Deep Midnight: High-contrast headings, main copy title, and dark UI borders
- #64748b — Muted Slate: Supporting descriptive body text, subheadings, and inactive navigation links
- #e2e8f0 — Border Neutral: Hairline outlines on secondary buttons, input badges, and preview cards
- #22c55e — Success Green: Status indicator dot and 200 OK badge in API console
- #c7d2fe — Halftone Dot Tint: Decorative matrix dots in corner backgrounds and graphic illustrations
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, Roboto), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 36px heading, 58px display. Tracking -0.03em for display, 0.05em for micro caps. Inter provides a clean, neutral engineering atmosphere with exceptional legibility at micro sizes. JetBrains Mono delivers authentic developer tooling credentials without distracting quirkiness. The pairing communicates high technical reliability combined with frictionless automation.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through an overlapping layer stack. The dark terminal sits flat on the canvas, while the generated content card sits directly on top of it with a wide, soft 0 20px 40px rgba(15,23,42,0.1) shadow, giving it physical precedence as the 'result'.
IMAGERY
Avoid photographic stock entirely; the visual language relies exclusively on structured software artifacts, monospaced JSON syntax, and vector-rendered halftone point-cloud gradients. The imagery functions as functional architecture rather than lifestyle illustration.
SIGNATURE DETAIL — the thing that makes this design itself
The pipeline diagram that pipes multi-colored input pills through dashed routing paths into a dark JSON terminal, emerging immediately into a clean white preview card. It communicates input-to-output automation in a single glance. It is broken if the connecting lines or the overlap are removed.
MUST
- Use solid electric cobalt #2447f9 strictly for lead interactive moments and the core value-proposition phrase.
- Pair a dark IDE terminal surface directly with an overlapping white UI preview to visualize transformation.
- Employ monospaced JetBrains Mono exclusively inside code blocks, payload structures, and API endpoints.
- Keep background halftone dot grids faint (#c7d2fe at ~40% opacity) so text readability is never compromised.
AVOID
- Never fill secondary buttons with solid grays; use a crisp white background with a 1px hairline border.
- Do not color entire headings in cobalt; only highlight the pivotal benefit words at the very end.
- Avoid sharp corners; all UI panels must follow the 8px to 14px border-radius system.
- Do not place the generated preview card entirely off the terminal; it must overlap by roughly 35%.
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 中尝试 
