Design a dark-mode website section: deep oceanic darkness illuminated by jade circuitry and precise financial telemetry.
LAYOUT
The header spans full width with a minimal wordmark left, centered nav items, and right-aligned dual CTA authentication triggers. The hero grid cleanly bifurcates: a 45% left column carrying eyebrow badge, 52px display typography, summary copy, and dual CTAs; while the 55% right region hosts a multi-node topological network diagram. At the bottom fold, a sweeping diagonal mask abruptly cuts the dark theme to expose an organic warm bone section.
PALETTE (use these exact hex values)
- #040a0f — Deep Oceanic Navy: Global background canvas representing deep void liquidity space.
- #08161e — Subtle Card Surface: Background fill for telemetry modules and architecture diagram nodes.
- #17383a — Card Stroke Cyan: 1px hairline borders bounding system diagrams and secondary buttons.
- #8eedc4 — Luminous Mint: Primary CTA button background, glowing core highlights, and key brand icons.
- #114436 — Deep Mint Glow: Volumetric radial glow cast behind central matching engine card.
- #ffffff — Primary Text White: Headings, core product names, and high-contrast labels.
- #7b949d — Muted Slate Blue: Body paragraphs, navigation links, secondary metadata, and card labels.
- #f4f0e6 — Cream Sand: Light mode contrast panel transitioning at the bottom hero fold.
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 52px display. Tracking -0.03em at large headlines, +0.06em at uppercase badges. The typographical tone is algorithmic, clinical, and institutional. A crisp neo-grotesque sans-serif provides immense clarity across small table data, ticker symbols (e.g., AAPL-PERP), and node labels, balanced by an imposing headline scale that feels modern and authoritative. Geist or Inter serves as the precise open-source equivalent.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through ambient bioluminescence rather than traditional drop shadows. Central processing nodes emit a soft, wide-dispersion radial mint glow behind crisp 1px borders. Background surfaces maintain flat planes layered only by dotted vector connections and subtle card border delineations.
IMAGERY
No photographic imagery is present; the interface relies completely on precision schematic diagrams, vector currency glyphs, and system token badges. Visual weight is carried by crisp schematic diagrams that mimic institutional financial architecture and high-frequency routing engines. Any decorative non-functional illustration would compromise the institutional credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing bioluminescent core diagram: a central matching engine node wrapped in a soft teal halo, flanked by cascading dotted circuit vectors linking markets, clearing, and user access nodes. If replaced by a standard screenshot or 3D asset, the platform's architectural, exchange-grade authority is entirely lost.
MUST
- Use solid mint green #8eedc4 strictly on high-intent actions and central hub elements.
- Maintain fine 1px borders in #17383a to cleanly separate architectural diagram blocks.
- Pair stark white #ffffff titles with muted #7b949d body copy for readable hierarchy.
- Route diagram pathways with delicate dotted lines ending in small directional arrows.
AVOID
- Never introduce warm colors like orange, red, or purple into the diagram flows.
- Do not use heavy multi-stop drop shadows; use subtle luminous radial blurs instead.
- Never make secondary action buttons solid white or filled with bright accent colours.
- Avoid thick container borders greater than 1.5px around system nodes.
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 中尝试 
