Design a dark-mode website section: deep navy obsidian canvas punctured by electric cyan-to-emerald gradient luminance and crisp technical instrumentation.
LAYOUT
The composition follows a two-tier vertical hierarchy: a dominant two-column hero CTA block stacked above an expansive multi-column navigation footer. Inside the CTA, the left column anchors persuasion and conversion controls while the right hosts a dense product UI console. Below, the footer balances brand and newsletter capture against four balanced link pillars, concluding in a horizontal legal bar.
PALETTE (use these exact hex values)
- #020612 — Obsidian Deep: Global background canvas for both footer and primary sections
- #040d1c — Midnight Card: Background fill for the primary CTA container and input fields
- #061325 — Dashboard Navy: Surface layer for nested preview UI panels and tables
- linear-gradient(90deg, #38bdf8 0%, #48ebaf 100%) — Electric Gradient: Primary CTA button background and display headline accent text
- #122a42 — Borealis Stroke: Subtle perimeter stroke for container borders and UI panel separators
- #f8fafc — Text Primary: Headings, titles, high-emphasis text, and active footer column titles
- #8493a8 — Text Muted: Subtext, description copy, metadata labels, and footer navigation links
- #4ade80 — Success Mint: Checkmark badges, positive metrics, and sparkline indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.02em at display, 0 at body. Clean, engineered, and distinctly modern. The neo-grotesque sans-serif delivers an authoritative yet frictionless developer-tool aesthetic, pairing tight display tracking with generous body line heights. Open-source substitutes like Inter or Geist seamlessly reproduce the exact structural weight and geometry.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through ambient back-illumination rather than physical shadows. Subtle radial gradients of teal and cyan bloom behind the primary container and interactive elements, while 1px low-opacity slate-blue borders delineate overlapping card layers from the obsidian canvas.
IMAGERY
Imagery avoids photographic stock entirely, relying solely on structured, high-fidelity UI telemetry. Clean SVG outlines, micro sparklines, monospace data payloads, and verification badges render the technical product instantly tangible and trustworthy.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone neon gradient accent (#38bdf8 to #48ebaf) applied symmetrically to the headline punchline ('any UI task?') and the primary CTA button, anchored against an intricate multi-panel product simulator card. It is misused when applied to secondary buttons, footer headers, or body text, which destroys the conversion hierarchy.
MUST
- Use linear-gradient(#38bdf8, #48ebaf) selectively only on the primary CTA and key headline phrase.
- Enclose complex mockup panels inside precise 1px borders tinted with subtle blue (#12283e).
- Keep footer column titles white and semibold, while link list items remain soft muted slate.
- Align the CTA showcase container to the same max-width as the footer navigation grid.
AVOID
- Never use pure black (#000000); always tint dark backgrounds with cool navy and obsidian tones.
- Do not give secondary buttons a background fill; keep them ghosted with trailing arrows.
- Avoid solid drop shadows; depth must come from luminous radial colored glows and subtle borders.
- Do not mix rounded corner radii haphazardly; lock containers to 24px and controls to 8-10px.
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 中尝试 
