Design a dark-mode website section: precision dark-mode b2b architecture anchored by emerald telemetry and luminous ascending particle dynamics.
LAYOUT
The composition follows an asymmetric top-down flow: a split CTA section with text and dual actions anchored on the left and a luminous upward data wave filling the right half. Beneath a subtle horizontal hairline, the footer splits into a 6-column grid featuring company identity, four link categories, and a consolidated newsletter subscription container, grounded by a legal bar.
PALETTE (use these exact hex values)
- #030708 — Obsidian Ground: deep background canvas for the hero and call-to-action sections
- #050d13 — Nocturne Abyss: footer container background tone separating directory links from the banner
- #132630 — Subtle Meridian: delicate hairline border used around inputs, cards, and section dividers
- #109e68 — Emerald Signal: primary call-to-action button fills, icon accents, and active focus points
- #34d399 — Mint Phosphor: footer category headings, eyebrow badges, and dynamic trajectory highlights
- #ffffff — Luminescent White: primary display headlines, logos, and high-emphasis button text
- #8e9ea9 — Steel Slate: body descriptions, footer navigation text links, and field placeholders
- #4f606e — Dim Trench: copyright line, secondary metadata, and legal sub-footer labels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 24px heading, 48px display. Tracking -0.025em at display, 0.01em at body. The geometric sans voice communicates institutional stability, mathematical exactness, and enterprise-grade fintech efficiency. Tight tracking on display headlines creates a dense, authoritative impact, while generous tracking and uppercase styling on eyebrow tokens resemble terminal data feeds. Inter or DM Sans serve as direct drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and selective optical framing rather than drop shadows. Surface layers gently shift from pure black (#030708) to deep midnight navy (#050d13 and #08161f) bounded by 1px stroke dividers (#132630). The luminous particle arc and glowing apex star burst provide radiant atmospheric backlighting.
IMAGERY
Vector and shader-based telemetry visuals dominate, specifically dense dot-matrix particle waves resembling financial bar graphs and astronomical trajectories. Imagery is entirely non-photographic, emphasizing digital precision, AI automation, and upward operational velocity. Stock photography or colorful lifestyle imagery would destroy the focused institutional tone.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping, point-cloud trajectory line that transitions from faint vertical histogram columns into a soaring, starry apex. To use it correctly, let it rise organically out of the dark void to counterbalance left-aligned heavy display headlines; avoid overlaying heavy text directly over the bright focal point.
MUST
- Use single-pixel borders in #132630 to separate surface tiers without creating heavy contrast walls.
- Render all section eyebrow indicators and footer category headers in luminous mint (#34d399).
- Keep input field fills deeper than or equal to their host card surface tone.
- Pair primary green buttons (#109e68) directly with secondary naked chevron links for balanced hierarchy.
AVOID
- Do not introduce multi-colored visual assets; restrict chromatic light purely to emerald and cyan hues.
- Avoid thick button borders or skeuomorphic bevels; maintain crisp flat geometry with 8px radius.
- Do not use gray for category headers; they must remain vibrant mint to direct scanning.
- Never float the newsletter form without its containing 1px border box (#132630).
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 中尝试 
