Design a dark-mode website section: quiet deep-space control planes with electric cobalt focus, precise geometric wireframes, and disciplined terminal-grade typography.
LAYOUT
The arrangement is strictly top-heavy then structured grid below. It opens with an expansive rounded CTA card housing centered badge, 38px display title, lead paragraph, button pair, and assurance checklist. Below a 64px gap, the footer unfolds in a 6-part horizontal grid: brand block (col 1), four navigation stacks (cols 2-5), and a newsletter/sales contact hub (col 6). A final hairline divider grounds the viewport with legal text and locale selectors.
PALETTE (use these exact hex values)
- #070a12 — Void Black: Root page background canvas behind the floating CTA card and base for global footer
- #0c1322 — Abyssal Navy: CTA banner background fill, featuring subtle concentric line-art and faint radial glows
- #1a62ff — Electric Cobalt: Primary CTA button fill, active subscribe buttons, and gradient text termination
- #4c8eff — Atmosphere Blue: Accent text highlights, terminal prompt symbols, and active glowing strokes
- #10b981 — Telemetry Emerald: Pulsing live indicators for systems operational and telemetry status dots
- #1c283f — Steel Border: Hairline 1px borders dividing cards, input frames, pills, and social icon tiles
- #ffffff — Starlight White: Primary headings, major action labels, brand titles, and active input texts
- #8b9bb4 — Muted Slate: Body copy, supporting explanations, secondary links, and neutral icons
- #475569 — Deep Shadow Slate: All-caps category headers, copyright marks, input placeholders, and inactive borders
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 38px display. Tracking -0.03em on display, 0.05em on mono/eyebrow. The typographic tone is authoritative, highly technical, and calm—evoking next-generation developer tooling and mission-critical cloud infrastructure. The neutral grotesque geometric sans-serif keeps text neutral while negative display tracking conveys modern precision. Standard Inter or Geist Sans fully reproduces this voice without licensing hurdles.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created without harsh drop shadows by stacking luminance: base void (#070a12) sits underneath an elevated card surface (#0c1322) edged with hairline borders (#1c283f). Internal inputs and chips sink into the surface using an even darker inset tone (#090e1a). Subtle, atmospheric ambient glow radiates faintly from the center of the card.
IMAGERY
Vector-based geometric wireframes and thin polygon linework (e.g. Pentagon contour outlines and dot grids) overlaid at very low opacity (10-20%). Avoid photographic imagery, busy illustrations, or realistic 3D renderings; aesthetic is rooted in developer consoles and infrastructure topology.
SIGNATURE DETAIL — the thing that makes this design itself
The floating rounded dark container with faint corner vector polygons framing a centered headline that smoothly transitions into electric cobalt text. Replicate this with an outer 24px radius, 1px border (#1c283f), and a background-clip linear gradient on the second line of the heading (#ffffff to #4c8eff). It breaks if the gradient is too contrasty or if the card borders become bright white.
MUST
- Keep CTA card borders at exactly 1px with low-contrast steel-navy (#1c283f).
- Reserve vibrant cobalt blue (#1a62ff) strictly for high-conversion primary interactions.
- Use uppercase tracking (0.08em) for category column titles and system badges.
- Align all footer navigation links vertically with 10-12px line spacing.
AVOID
- Do not use high-contrast white borders around cards; they destroy the atmospheric depth.
- Avoid bright saturated colors outside of electric blue and telemetry green.
- Never set column header text in title case; keep it uppercase caption size (11-12px).
- Do not omit the 1px inner divider between the main footer content and sub-footer.
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 中尝试 
