Design a dark-mode website section: deep space obsidian canvas illuminated by sharp electric blue and high-throughput typographic precision.
LAYOUT
The top half hosts a centered conversion stack: pill badge, display headline, paragraph, dual action buttons, and horizontal reassurance metrics. A subtle full-width divider transitions into a multi-column footer architecture with an asymmetrical split: four link columns center-left, balanced by a contained newsletter capture box on the far right. A minimalist copyright row anchors the bottom perimeter.
PALETTE (use these exact hex values)
- #07090e — Obsidian Base: Root background canvas spanning the entire viewport behind CTA and footer sections.
- #0d111a — Container Surface: Card surface used exclusively for the newsletter subscription box and interactive pills.
- #1a2233 — Subtle Border: Hairline 1px borders dividing columns, framing input fields, and delineating cards.
- #2f68ff — Electric Blue: Primary call-to-action buttons, submit triggers, and key headline accent text.
- #45d9a6 — Mint Emerald: Status indicator glow, checkmark icon badge, and newsletter outline icon.
- #d946ef — Orchid Violet: Secondary feature badge fill for compute efficiency highlights.
- #ffffff — Text Primary: Top-level headings, primary button labels, and active navigation titles.
- #94a3b8 — Text Secondary: Body copy descriptions, value proposition labels, and secondary interactive text.
- #475569 — Text Muted: Navigation column links, placeholder inputs, and legal copyright metadata.
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 68px display. Tracking -0.03em at display, -0.01em at body, 0 at captions. The typographic tone is ultra-engineered, clinical, and rapid. Tight negative tracking at scale gives Inter Display a modern machine-tool character that emphasizes developer capability. If licensed alternatives are needed, Geist Sans or Plus Jakarta Sans preserve the geometric stance and optical legibility in dense lists.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 104px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminosity and surface tone shifts rather than drop shadows. Recessed areas like text inputs sit marginally darker than their parent card, while cards register one step lighter than the primary obsidian void (#07090e to #0d111a).
IMAGERY
No photographic or illustrative assets are used; the visual authority is entirely typographic and vector-glyph driven. Ambient faint vector arcs and planetary orbit lines in low-opacity blue-indigo provide atmospheric technical energy without distracting.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line display headline split between solid crisp white ('Ship faster.') and vibrant electric blue ('Run smarter.') set directly over an absorptive obsidian canvas. It delivers immediate cognitive hierarchy within a fraction of a second, but breaks instantly if applied to more than two lines or rendered in lower-contrast tones.
MUST
- Use two-tone color splitting on primary display titles to establish immediate semantic focal points.
- Keep all container borders strictly at 1px using desaturated slate tones (#1a2233).
- Pair colored circular icon badges with neutral body-sm typography for reassurance micro-copy.
- Confine heavy visual weight exclusively to primary interactive triggers (#2f68ff).
AVOID
- Do not introduce sharp 0px corners; maintain rounded geometries (8px to 999px) throughout.
- Avoid high-contrast borders or bright white rules that sever the fluid dark space.
- Do not render the secondary button with a filled background; it must remain hollow.
- Never use pure white (#ffffff) for tertiary metadata or copyright statements.
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 中尝试 
