Design a dark-mode website section: precision darkroom devops with ambient violet glow and mechanical tooling rigor.
LAYOUT
The screen flows from a high-impact two-column hero/terminal section directly into a comprehensive 6-column dark footer. The left hero block drives value proposition and onboarding, mirrored by an active dual-pane code simulation on the right. Below, a top border transitions into an expansive site index anchored by an email capture form and an operational telemetry status bar.
PALETTE (use these exact hex values)
- #060a14 — Obsidian Deep Base: Foundational page background across hero and primary CTA zones
- #0a1020 — Midnight Console: Background fill for interactive terminal container and input controls
- #070c18 — Abyssal Footer: Grounded base background for multi-column footer navigation block
- #6f57f6 — Electric Periwinkle: Primary action button fill, headline accent highlight, and tab active indicator
- #a594fd — Lavender Luster: Highlighted sub-headline text phrase and active tag state
- #10b981 — Telemetry Emerald: System status indicators, pulse dots, and successful compilation badges
- #19243a — Cold Steel Stroke: Delicate 1px boundary lines dividing tables, cards, and input fields
- #8493a8 — Ghost Slate: Supporting explanatory copy, footer navigation links, and terminal comments
- #ffffff — Optical Pure White: Display headings, column category labels, and primary button labels
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 36px heading, 48px display. Tracking -0.03em at display, 0.01em at caption. Engineered, concise, and mathematically calibrated. The neo-grotesque display voice establishes authoritative technical credibility, balanced seamlessly by clean, unornamented code blocks that feel ready for production deployment.
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 created via luminous layering rather than physical drop shadows. A backplate radial glow of soft violet creates z-index hierarchy, while 1px steel strokes (#19243a) anchor surfaces against the dark canvas.
IMAGERY
Avoid photographic assets. Graphic language relies on technical execution artifacts: CLI syntax, clean JSON response payloads, hairline wireframe logos, and faint algorithmic waveform vector lines in the footer canvas.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column terminal preview card illuminated by an ambient violet outer halo, marrying hardware manufacturing rigor with modern API-first developer tooling aesthetics.
MUST
- Reserve vibrant purple (#6f57f6) strictly for interactive primary triggers and the hero punchline.
- Maintain strict 12px border radius on high-level cards and 8px on buttons and inputs.
- Render code syntax strictly inside JetBrains Mono with 1.6 line height.
- Use 1px borders (#19243a) to separate dark surface layers rather than heavy drop shadows.
AVOID
- Do not use saturated brand colors as large surface background fills.
- Avoid harsh high-contrast pure white (#ffffff) borders; use subtle steel (#19243a).
- Never replace monospace typography within code execution blocks with standard sans-serif.
- Do not mix multiple accent hues; stick exclusively to periwinkle with emerald for telemetry.
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 中尝试 
