Design a dark-mode website section: deep navy devtool canvas illuminated by an atmospheric indigo gradient and precise monospaced telemetry.
LAYOUT
The composition follows a stacked two-tier architecture: the top split-pane CTA section is anchored left by a 44px headline, paragraph subtext, and twin CTA buttons, mirrored on the right by a syntax-highlighted terminal module. A faint micro-dotted divider separates this from the lower footer, which is arranged in an expansive 6-column grid: brand description with newsletter input occupies the first two column widths, followed by four clean navigation lists, concluding with an enterprise compliance matrix and copyright baseboard.
PALETTE (use these exact hex values)
- #060913 — Obsidian Ground: Primary background canvas anchoring both the CTA section and the multi-column footer.
- #0a0f1d — Terminal Void: Background fill for the interactive API code block and newsletter input fields.
- #2738f5 — Atmospheric Indigo Glow: Soft radial bloom situated behind the main headline to create atmospheric depth.
- #4355f9 — Terminal Action Blue: Solid primary CTA button fill and interactive focus highlight.
- #c084fc — Hyper Violet Accent: Emphasised italicized display headline word and subdomain text branding.
- #22c55e — Telemetry Emerald: Live API operational status lights and compliance verification checkmarks.
- #818cf8 — Periwinkle Header: Footer section column category titles and eyebrow uppercase labels.
- #ffffff — Signal White: Primary headings, active code tab titles, and high-emphasis labels.
- #94a3b8 — Slate Neutral: Explanatory subtext, inactive navigation links, and code parameter values.
- #1e293b — Muted Midnight Border: Hairline 1px borders surrounding the code box, compliance chips, and input borders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 15px body-lg, 44px display. Tracking -0.02em at display, 0.05em at caps eyebrow. Technical, confident, and unapologetically engineered. Inter delivers hyper-clean, neutral legibility across dense navigation links and enterprise metrics, while the sudden italicized violet flourish in the headline introduces founder-level energy without sacrificing corporate gravitas. JetBrains Mono provides pristine code structure and command-line realism.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered purely atmospherically rather than through skeuomorphic drop shadows. A broad, high-blur radial gradient in royal cobalt and indigo rests behind the display typography, causing the headline and foreground CTA button to float forward organically. Cards and inputs rely entirely on 1px solid hairline borders (#1e293b) over darker recessed slate panels (#0a0f1d).
IMAGERY
This design strictly rejects decorative photography or abstract 3D shapes. The sole illustrative artifact is functional, syntax-highlighted code displayed inside a crisp, tabbed HTTP terminal console. Visual brand identity is carried entirely by the dual-wing minimal logo icon, typography accents, and the colored status LEDs.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the juxtaposition of an atmospheric royal-blue radial aura behind crisp developer typography paired with a working API terminal that leads directly into a dense, compliance-certified enterprise footer. Removing the indigo bloom flattens the layout into generic utility, while removing the code console destroys its developer-first credibility.
MUST
- Retain the sharp contrast between the deep obsidian base (#060913) and the soft indigo radial glow.
- Style the word 'ship' or key action verbs with an italicised violet accent to break visual monotony.
- Prefix primary developer CTA labels with the console glyph '>_'.
- Keep footer column headers strictly tinted in light periwinkle (#818cf8) to distinguish hierarchy.
AVOID
- Never replace the terminal code demonstration with generic stock device mockups or illustrations.
- Do not use heavy multi-color drop shadows; let ambient background gradients supply all depth.
- Never set footer category headers in bold pure white; reserve white exclusively for headings and active tabs.
- Do not omit the dotted or hairlined horizontal separator between the hero CTA and navigation columns.
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 中尝试 
