Design a dark-mode website section: deep cosmic navy infrastructure contrasting an airy daylight footer with precision typography and concentric orbital lines.
LAYOUT
The composition flows in two distinct horizontal tiers within a maximum width of 1280px. Tier one is a centered, symmetrical dark conversion card holding badge, display title, copy, button pair, and trust cues all aligned along the vertical median. Tier two is an asymmetrical four-column light footer anchored by a left brand block, three centralized link columns, and a right-aligned lead-capture card, underpinned by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #091124 — Midnight Space Canvas: Deep navy background anchoring the primary CTA container card
- #162544 — Orbital Ring Stroke: Faint concentric radial lines providing spatial depth behind the hero headline
- #5065f6 — Electric Periwinkle: Primary conversion button fill, active newsletter submit button, and subtle gradient stops
- #8a9dfc — Glow Periwinkle: Gradient accent applied to key headline emphasis word and active link highlights
- #111c33 — Dark Secondary Button Fill: Background fill for the secondary dark-mode action button
- #1e2f54 — Dark Border Stroke: Subtle hairline stroke around pill badges and secondary dark action buttons
- #ffffff — Pure White: Hero headline text and light footer surface canvas
- #94a3b8 — Slate Text Muted: CTA supporting body copy, trust indicator labels, and legal footer links
- #0f172a — Ink Charcoal: Footer logo title, column headers, and newsletter title
- #f8fafc — Light Panel Surface: Subtle gray container surface behind the newsletter subscribe form
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 52px display. Tracking -0.03em on display headers, 0 on standard body copy. The type voice is calculated, rational, and modern engineering-grade sans-serif. The negative display tracking (-0.03em) on 'Ship better code. Together.' conveys density, authority, and velocity. Inter or Geist Sans are ideal open-source substitutes that preserve the high x-height, neutral geometric apertures, and clarity at small interface scales.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through contextual containment and dark-to-light canvas stratification rather than diffuse shadows. The dark hero CTA acts as an elevated technical plane resting over or docking onto the flat daylight footer surface. Subtle hairline borders (#1e2f54 and #e2e8f0) supply crisp vector definition without blur.
IMAGERY
There is no photographic imagery; the visual identity is purely typographic and vector-geometric. Background visual interest relies on faint mathematical orbital strokes and small line-drawn utility icons (code tag, checkmark, lock, lightning, send). Introducing realistic human photos or 3D skeuomorphic renders would disrupt the precise developer-centric tone.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone 'Daylight Horizon' transition: an inset, rounded cosmic-navy conversion card containing subtle orbital lines perched directly above an ultra-clean white multi-column directory footer. Removing this high-contrast dark/light boundary or normalizing the whole page to a single background color completely strips the system of its architectural identity.
MUST
- Retain the sharp visual polarity between the dark CTA hero card and the pristine white navigation footer.
- Use faint vector circular orbits (1px stroke, #162544) positioned concentrically behind the hero headline.
- Style the primary emphasis word ('Together.') in a lighter periwinkle tint (#8a9dfc) than the pure white headline text.
- Apply generous outer card radius (20px to 24px) to make the dark CTA feel like a floating tactical console.
AVOID
- Do not apply heavy multi-colored neon glows or harsh drop shadows beneath the dark CTA card.
- Avoid making the orbital ring background lines high contrast; they must remain subtle texture.
- Never invert the footer to dark mode; the contrast between dark CTA and light footer is the signature layout pattern.
- Do not use sharp 0px corners on interactive buttons; maintain 8px to 10px rounded borders.
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 中尝试 
