Design a dark-mode website section: surgical developer infrastructure bridging sterile white utility into an ink-dark command control footer.
LAYOUT
The page transitions vertically through two distinct hemispheres. The top hemisphere features a centered single-column stack: eyebrow pill, hero display headline, explanatory paragraph, dual-action button group, and a three-point trust metric row. The bottom hemisphere opens into a full-width footer structured as a two-column brand anchor and status panel, four middle link lists, and a dedicated right-hand terminal execution widget, terminating in a horizontal metadata bar.
PALETTE (use these exact hex values)
- #04151B — Abyssal Slate: Dominant deep background for the entire lower footer section and nested terminal surfaces.
- #FFFFFF — Sterile White: Base canvas for upper call-to-action block, text inputs, and high-contrast wordmark glyphs.
- #0A4D40 — Terminal Pine: Primary interactive fill on primary action buttons and prominent display accent words.
- #2FD399 — Mint Pulse: Logotype secondary tone, status indicator beacons, and live runtime command prompts.
- #76939C — Muted Cyan Gray: Footer navigation links, paragraph summaries, copyright line, and subtle metadata.
- #0D2730 — Abyss Border: Fine structural hairpins defining terminal panels, social tiles, and divider rules.
- #0F172A — Carbon Slate: High-contrast heading and paragraph text across the upper light-mode segment.
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.03em display, 0 body. The voice is analytical, calm, and tailored for developer operations infrastructure. Geometric sans-serif delivers clean legibility at large display sizes while JetBrains or Geist Mono evokes direct shell access. System fonts like Inter or SF Pro can be substituted without compromising technical rigor.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved flatly without drop shadows or ambient blurs. Depth is communicated strictly through surface color stepping from #04151B to #071D24 and framed by crisp 1px strokes in #0D2730. Upper light surfaces rely entirely on white space and fine hairline borders for containment.
IMAGERY
Abstract mathematical vector lines and subtle Cartesian coordinate dots create an engineering atmosphere behind the upper CTA. Photographic elements are strictly prohibited; only functional SVG icons, architectural lines, and pure terminal text blocks are allowed.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone wordmark combined with the inline terminal execution card in the footer, showing live agent deployment status directly above the legal bar.
MUST
- Always separate the light CTA canvas from the abyssal footer with an abrupt edge-to-edge transition.
- Render the command prompt '>_' symbol in the primary CTA button to reinforce developer ergonomics.
- Use subtle arrow glyphs '→' next to navigational links to cue interactive CLI directory logic.
- Retain the dual-color brand wordmark: neutral white for prefix, electric mint (#2FD399) for suffix.
AVOID
- Do not soften the transition between light and dark sections with gradients; keep the seam crisp.
- Never use generic bright blue or purple accents; adhere strictly to pine (#0A4D40) and mint (#2FD399).
- Avoid pill radiuses on major card blocks or input shells; confine pills strictly to badges and status chips.
- Do not set footer directory titles in uppercase; use sentence case or title case in muted cyan.
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 中尝试 
