Design a dark-mode website section: deep cosmic obsidian illuminated by soft twilight radial glows and structured developer-grade utility columns.
LAYOUT
The composition follows a balanced vertical cadence: an airy, centered CTA section transitioning through an atmospheric horizon into a dense, multi-column utility footer. The top CTA is anchored by a centered pill badge, high-contrast headline, body blurb, and button cluster. Below a 1px horizontal rule, the footer splits into a brand column on the far left, four structured navigation columns in the center, and an email newsletter module pinned to the far right. The base row concludes with separated copyright and legal links.
PALETTE (use these exact hex values)
- #080B14 — Obsidian Deep: Foundational dark background spanning CTA, footer, and canvas base.
- #0F1322 — Surface Elevated: Fill color for interactive form inputs and pill badge interiors.
- #1E2438 — Hairline Border: Structural partition divider lines and low-contrast input borders.
- #7856EE — Electric Iris: Primary CTA fill, active interactive elements, and newsletter submit button.
- linear-gradient(90deg, #F8A28E 0%, #E879F9 50%, #A78BFA 100%) — Twilight Aurora Gradient: Emphasized headline typography text-fill via background-clip.
- #FFFFFF — Frost White: Primary headings, brand logo wordmark, and prominent button labels.
- #94A3B8 — Muted Slate: Supporting descriptive copy, inactive navigation links, and input placeholders.
- #5A657D — Faded Charcoal: Legal disclaimers, copyright text, and subtle metadata.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 14px subheading, 16px body, 18px body-lg, 32px heading, 52px display. Tracking -0.03em on display headings, 0em on body. The typography exudes modern technical authority, reminiscent of developer-first AI infrastructure. The tight tracking (-0.03em) on large titles delivers precision, while the generous x-height maintains effortless legibility at 14px across data-heavy navigation columns. Inter or Geist Sans serves as an ideal open-source foundation, offering exact proportions and neutral geometric curves.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is expressed strictly through luminance and radial atmosphere rather than traditional drop shadows. Ambient violet-blue light emanates from behind the main CTA container to simulate backlighting on dark glass. Interactive fields and badges use a 1px perimeter border rendered at low opacity to separate them from the foundational obsidian floor.
IMAGERY
No photographic or raster artwork is present; the design relies exclusively on typography, atmospheric CSS gradients, and vector iconography. Vector marks are restrained to clean 14px functional icons (arrows, social badges). Any future additions should feature sleek 3D synthetic artifacts or dark procedural glass models rather than lifestyle photography.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the radiant peach-to-violet gradient text line ('correct by construction.') juxtaposed directly beneath a solid white title, backdropped by an ethereal indigo glow. This dual-tone headline technique provides emotional warmth against an otherwise hyper-rational developer tool canvas. It is misused when applied to body text or scattered across multiple competing headings.
MUST
- Use a subtle peach-to-violet text gradient solely on high-value emphasize phrases, never full paragraphs.
- Separate content zones with 1px hairline rules tinted to 8-12% white opacity (#1E2438).
- Keep navigation headers in crisp white (#FFFFFF) and link items in muted slate (#94A3B8).
- Anchor primary interactive buttons with rounded-corner geometry (10px) and vibrant iris purple (#7856EE).
AVOID
- Do not introduce sharp 0px corners; all interactive touchpoints must have at least 8px radius.
- Never apply saturated full-bleed background fills; color should only bleed through ambient radial blurs.
- Avoid heavy drop shadows; depth is strictly communicated through luminescent border edges.
- Do not use high-saturation body copy; keep descriptive text restrained to cool muted tones (#94A3B8).
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 中尝试 
