Design a light-mode website section: developer-first financial primitives pairing a luminous interactive sandbox with a midnight operational footer.
LAYOUT
The view is composed of two primary horizontal sections: an upper two-column conversion viewport and a lower multi-column technical footer. The upper section balances a left-aligned typography stack and trust badges against a wide 600px interactive terminal card on the right. Below, the layout snaps to a full-bleed midnight band structured into brand identification, four discrete vertical link arrays, and an operational newsletter/compliance cluster. The footer resolves with a split copyright and legal metadata bar.
PALETTE (use these exact hex values)
- #F3F6FC — Canvas Ice: Background canvas for the hero CTA and developer sandbox section
- #060B17 — Midnight Base: Deep structural backdrop for global footer and enterprise governance areas
- #FFFFFF — Surface White: Primary surface for interactive code card and micro feature badges
- #2563EB — Electric Royal: Primary action fill, brand accent in typography, and terminal button state
- #0B132B — Ink Slate: High-contrast display typography and strong headlines on light surfaces
- #64748B — Muted Slate: Body copy, secondary descriptors, and technical subtext
- #94A3B8 — Footer Muted: Navigation links, copyright, and disclaimers on dark background
- #0F172A — Console Surface: Newsletter inputs, social icon chips, and compliance pill backgrounds
- #10B981 — Success Mint: Operational status pulse and 200 OK HTTP response indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,SF Pro Display,DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 17px body-lg, 18px heading, 44px display. Tracking -0.03em at display, 0.05em at uppercase subheads. Plus Jakarta Sans provides a contemporary, geometric warmth that stops developer tools from feeling clinical or intimidating. Tight display tracking (-0.035em) at 44px lends institutional authority to the headline, while the uppercase pill captions keep technical claims legible. Inter or SF Pro Display make reliable drop-in substitutes without disrupting metric proportions.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled predominantly through crisp surface-contrast boundaries and micro-borders rather than multi-layered shadows. The elevated white card above the cool grey-blue canvas uses a 1px border (#E2E8F0) paired with an ultra-soft 0 12px 32px rgba(15, 23, 42, 0.04) drop shadow. On the dark canvas, elevation is inverted using slightly lighter container fills (#0E1726) over the base midnight tone (#060B17).
IMAGERY
This design strictly rejects photographic imagery and realistic 3D assets in favor of pure technical artifacts. Visual interest is driven exclusively by syntax-highlighted terminal payloads, clean geometric line icons (16px), and structured metadata cards. Any generic stock photography or illustrative human character would immediately degrade the platform's developer credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the side-by-side juxtaposition of human-readable agency copy against a live execution card that embeds code output, interactive tabs, and value-prop features inside a single pristine white canvas.
MUST
- Retain the high-contrast horizontal seam between the ice-blue CTA canvas and midnight-navy footer.
- Highlight specific brand nouns inside headings using electric blue (#2563EB) while keeping main text dark (#0B132B).
- Render code payloads in true monospace font with syntax coloring for JSON keys, strings, and HTTP statuses.
- Use 20px to 24px corner rounding on primary cards to maintain a refined, approachable fintech feel.
AVOID
- Do not bleed dark footer color into the CTA hero block; the dual-canvas contrast is essential.
- Do not use sharp 0px or 4px radii on major cards; avoid harsh technical industrial styling.
- Do not saturate secondary feature icons; keep their framing neutral and low-weight.
- Do not substitute monospace fonts in the terminal card with proportional sans-serif.
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 中尝试 
