Design a dark-mode website section: deep midnight canvas electrified by atmospheric planetary rim glows and precision metrics cards.
LAYOUT
The top section features a floating 1200px navigation bar. The hero is structured as an asymmetrical two-column layout: left column contains the status pill, 72px headline, copy, CTAs, and compliance checks; right column hosts the floating chart card illuminated by a planetary rim glow. Below the hero sits a four-column grid of operational metric cards.
PALETTE (use these exact hex values)
- #080b11 — Obsidian Canvas: Primary background color across the entire interface.
- #0f141f — Surface Dark Plate: Surface layer for data cards, metric containers, and modal elements.
- #1b2333 — Card Outline Border: Subtle border outlining cards, badges, and secondary buttons.
- #e65127 — Atmospheric Core Flame: Vibrant ember glow radiating behind the main visual artifact.
- linear-gradient(90deg, #f59e0b 0%, #ec4899 100%) — Sunset Accent Gradient: Gradient applied to emphasis words and branding marks.
- #2563eb — Electric Royal Blue: Fill for primary interactive action buttons and hero CTA.
- #34d399 — Metric Mint: Used for positive gain indicators, live status badges, and icon fills.
- #ffffff — Primary Text White: High-contrast headings, main metric values, and primary labels.
- #8b949e — Muted Slate Text: Supporting descriptions, secondary labels, and navigation links.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 28px heading, 40px heading-lg, 72px display. Tracking -0.03em at display, -0.01em at body. The typography is technical, crisp, and institutional. A clean neo-grotesque sans-serif provides authoritative fintech weight at display sizes while preserving micro-legibility within dense chart stats and badges.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through lighting rather than drop shadows. Surface separation relies on a background radial illumination coupled with 1px semi-transparent borders (#1e293b) and subtle luminosity contrast between the pitch-black backdrop and #0f141f card fills.
IMAGERY
There are no photographic portraits or lifestyle imagery. The visual narrative is powered entirely by synthetic planetary lighting, glowing curved horizons, and high-fidelity vector UI representations of financial analytics.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive atmospheric planetary horizon: a razor-sharp red-orange rim light arcing diagonally behind an elevated dark glass chart card, creating an extraterrestrial dawn effect.
MUST
- Keep the canvas deeply dark (#080b11) to maximize neon glow contrast.
- Restrict atmospheric red-orange radial glows strictly behind high-value UI elements.
- Use sunset linear gradients solely on key emphasis words, never on full body text.
- Maintain hairline 1px borders (#1b2333) to separate cards from the dark background.
AVOID
- Do not introduce light card backgrounds or opaque gray surfaces.
- Do not disperse ambient glows uniformly across the canvas without a clear focal light source.
- Do not use sharp 90-degree corners on metric cards or primary action buttons.
- Do not exceed a 1px border stroke on cards and status pills.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
