Design a dark-mode website section: luminous spectral curtains floating over deep obsidian bedrock with pill-shaped controls.
LAYOUT
The section is stacked in three main blocks: first, an inset floating billboard CTA spanning nearly full width; second, a multi-column content matrix with a brand block on the far left, four link columns in the center, and a newsletter block on the far right; third, a clean two-sided legal copyright bar below a 1px border.
PALETTE (use these exact hex values)
- #01060f — Obsidian Ground: Deepest canvas background behind the footer content and around the banner
- #060d1a — Surface Midnight: Secondary baseline backdrop and card outlines
- #00d2ff — Aurora Teal: Left light curtain tint, input submit arrow, and active gradient start
- #52ff9f — Aurora Mint: Title keyword accent, primary CTA pill gradient end, and checkmark icons
- #9ef01a — Aurora Lime: Far right luminescent curtain reflection inside CTA billboard
- #ffffff — Text Primary: Display headlines, primary button text, and active interactive titles
- #9cb1c9 — Text Muted: Subheadings, descriptive copy, and newsletter helper captions
- #5f758d — Text Subtle: Nav links, copyright metadata, and input placeholder text
- #0d1f33 — Divider Line: Horizontal hairline separating the main links from the legal bottom bar
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 48px heading-lg. Tracking -0.025em on headings, 0.08em on section caps. Clean, engineered, and precise. The typeface is a contemporary neo-grotesque sans (Inter Display or Geist) that projects enterprise tech maturity and fintech reliability without feeling bureaucratic.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely by luminescence rather than shadows. The main banner glows as an illuminated volumetric lightbox against the black background. Controls and inputs sit flush or slightly recessed using dark border strokes.
IMAGERY
The visual hero is a synthetic backdrop depicting vertical fluted glass or atmospheric aurora rays dispersing light across a chromatic cyan-to-lime spectrum. No photographic assets or human subjects are used; visual interest relies purely on wave optics and generative gradient textures.
SIGNATURE DETAIL — the thing that makes this design itself
The massive rounded fluted-aurora billboard floating above an austere black multi-column footer. It concentrates all radiant optical energy into a single call-to-action module, leaving the navigation below functional and whisper-quiet.
MUST
- Use pill-shaped 9999px geometry consistently on all primary buttons and single-line text inputs.
- Restrict bright cyan and mint gradients strictly to the upper CTA card, leaving the lower footer restrained.
- Set navigation headers in uppercase tracking at 0.08em with 11px font size.
- Apply fine vertical dividers (#ffffff33) between trust signals in the CTA banner.
AVOID
- Do not spill the radiant aurora background into the multi-column link area.
- Do not use sharp or small 4px border radii on buttons or input forms.
- Do not style the primary CTA text in white; keep it deep navy-green (#021e17) for contrast against mint.
- Do not let the newsletter input exceed the column width or drop the embedded circular submit button.
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 中尝试 
