Design a light-mode website section: enterprise fintech authority grounded in crisp clinical ivory, deep obsidian slate, and precision emerald telemetry.
LAYOUT
The composition flows vertically through two high-contrast zones. The top zone features a centrally aligned, symmetrical marketing CTA: dual-tone headline, supporting copy, dual buttons, and a wide centered terminal card. The bottom zone snaps into a full-width dark slate container featuring a five-column navigation grid topped with brand identity on the left and newsletter capture on the far right, terminating in a split copyright and legal policy bar.
PALETTE (use these exact hex values)
- #F8FAF9 — Canvas Off-White: Background canvas for the upper CTA conversion zone
- #0B1920 — Terminal Obsidian: Background fill for the API preview card and newsletter input field
- #081218 — Footer Slate: Deep structural base for the comprehensive five-column site directory and legal bar
- #176B54 — Enterprise Emerald: Primary conversion button fills, brand logo accents, and emphasized headline typography
- #34D399 — Telemetry Mint: Active code tab underlines, syntax highlights, status dot, and compliance icon strokes
- #0F172A — Headline Black: High-contrast headings, primary CTA text in light canvas, and white inverse in footer
- #52626E — Slate Neutral: Subheading copy, code comments, and inactive footer menu items
- #1A2C35 — Terminal Border: Hairline 1px dividers, card perimeters, input borders, and badge outlines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.025em on display titles, -0.01em on body. The typographic tone is authoritative, financial, and technically sophisticated. By pairing an austere, highly geometric grotesque (Plus Jakarta Sans) with an uncompromising code mono (JetBrains Mono), the brand projects both institutional stability and modern developer credibility. Open-source substitutes like Inter and Fira Code preserve this exact cadence without compromise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1120px container, comfortable density.
DEPTH
Depth is created purely through deliberate tonal contrast and hairline 1px architectural borders rather than fuzzy drop shadows. The dark API card punches through the pale light-mint canvas via sharp perimeter delineation (#1A2C35) and deep obsidian fill (#0B1920). In the dark footer, visual hierarchy is established via text opacity and restrained border boundaries.
IMAGERY
No photographic imagery or marketing illustrations are used. The interface relies entirely on structured technical artifacts: clean monospace syntax blocks, geometric vector shield icons, and clean badge typography. Any decorative 3D art, hand-drawn illustrations, or stock photography would immediately rupture the institutional, audit-ready atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal card: a single 16px rounded obsidian widget that houses both syntax-highlighted API code and enterprise security badges side-by-side, perfectly positioned at the threshold between light marketing space and the dark footer. Misusing it by separating the security badges from the code sample breaks the dual-audience appeal to both CTOs and compliance officers.
MUST
- Retain the sharp division between the pale mint canvas above and the obsidian footer below.
- Use deep forest emerald (#17654F) for key high-value words within headlines to reinforce brand identity.
- Enclose developer snippets within an authentic dark terminal frame complete with language selector tabs.
- Always pair developer-facing code samples with enterprise security attestations (SOC 2, ISO 27001).
AVOID
- Do not use generic bright blue or purple accents; adhere strictly to forest emerald and mint telemetry.
- Do not drop the dark API card directly into the dark footer; it must float in the light hero canvas.
- Do not apply heavy drop shadows; use crisp 1px borders (#1A2C35) against dark backdrops for definition.
- Do not use high-saturation gradients across button backgrounds; maintain flat, high-confidence solid fills.
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 中尝试 
