Design a dark-mode website section: institutional venture finance encased in deep obsidian glass with luminous emerald data accents.
LAYOUT
The vertical composition moves from an expansive high-contrast conversion card down to a multi-channel footer. The top CTA card balances a heavy left-aligned typographic pitch with a three-part metric cluster and subtle data wave graphics on the right. Below, the footer unfolds in six balanced columns across a 1200px grid, culminating in a single-row copyright and compliance baseline.
PALETTE (use these exact hex values)
- #040812 — Obsidian Deep: Root canvas background grounding the entire application viewport and footer base
- linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(4, 20, 26, 0.8) 40%, #060d1a 100%) — Bioluminescent Gradient: Background fill for the primary CTA banner container with directional gradient
- #0d3b36 — Card Border Teal: Structural 1px perimeter border encasing the hero CTA box
- #10b981 — Emerald Signal: Primary action button background fill and keyword text emphasis
- #34d399 — Mint Glint: Text highlight in the main question heading and platform link hover states
- #38bdf8 — Neon Cyan: Metric icon stroke for document indexing and Integrations column header
- #818cf8 — Periwinkle Docs: Column header accent specifically designating the documentation footer block
- #fb923c — Coral Company: Column header accent color distinguishing the company navigation section
- #ffffff — Pure White: Primary headings, major numerical stat values, and prominent button labels
- #94a3b8 — Slate Muted: Descriptive body copy, navigation anchor links, and stat captions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 38px display. Tracking -0.02em at headline, 0.08em at micro headers. The typographical voice is institutional, disciplined, and razor-sharp, executed in a clean geometric neo-grotesque that echoes high-frequency trading terminals. Headings balance compact negative tracking with ample leading, while micro uppercase labels inject architectural structure. Free web alternatives like Inter or Plus Jakarta Sans capture this crisp technical authority perfectly.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous color gradients and fine hairline borders rather than traditional drop shadows. Surfaces layer upwards from an obsidian canvas (#040812) to a backlit teal glass card (#07121e), finished with recessed navy input troughs (#0a1322) that appear carved into the surface.
IMAGERY
Abstract mathematical data structures dominate the visual graphic language, rendered as vertical equalizer bars that morph into an organic turquoise dot matrix wave. No photorealistic human assets or standard corporate photography are permitted; every visual asset must evoke algorithmic precision and financial intelligence.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the Bioluminescent Aurora Card: a 24px rounded enclosure merging a rich emerald-teal corner radiance with a trailing algorithmic particle wave on the right flank. It is commonly misused by cranking gradient opacity too high, which degrades headline contrast, or by using raw white text without the characteristic mint-highlighted climax word.
MUST
- Reserve the emerald #10b981 background exclusively for the primary CTA and submit button.
- Assign distinct functional hues (teal, sky, indigo, orange) to footer category headings to aid navigational scanning.
- Encase the main CTA card in a generous 24px border radius with a deep teal 1px stroke.
- Use a subtle gradient blend to transition the card from saturated forest teal to deep night navy.
AVOID
- Do not use generic gray borders; always tint structural lines with deep cyan or navy tones.
- Do not drop opaque white or light gray cards onto this deep-space canvas.
- Never make all footer column headers monochromatic white; their individual color codes are intentional.
- Avoid thick button corner radiuses; preserve 8px modern sharpness rather than full pills for actions.
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 中尝试 
