Design a light-mode website section: bipolar contrast where luminous ethereal finance heroics anchor cleanly onto a dense midnight operational bedrock.
LAYOUT
The composition follows a strict top-down split polarity. The upper section is a centered hero/CTA hybrid with floating peripheral metric widgets at 15 percent and 85 percent horizontal margins. Centered headline copy transitions into dual action buttons sitting directly above the massive horizon brand watermark. The page terminates abruptly with a full-bleed midnight footer organized into brand identity, four taxonomy columns, a newsletter capture card, and a bottom utility copyright rule.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pristine: Primary light canvas background for the hero CTA and metric card surfaces
- #070e1c — Midnight Bedrock: Deep navy ground used exclusively for the structural footer container
- #0d1a33 — Slate Void: Elevated container background for the footer newsletter subscription panel
- #1d64f2 — Cobalt Kinetic: Primary interactive action color for CTA button, email submit trigger, and badge icon
- #818cf8 — Atmospheric Indigo: Subtle 25 percent opacity brand tint utilized in the massive background watermark text
- #eef2ff — Badge Periwinkle: Delicate tinted pill background supporting top metadata chip
- #0f172a — Ink Primary: High-contrast charcoal for titles, display copy, and primary values on light canvas
- #64748b — Muted Slate: Secondary description copy on light background and navigational link labels on dark footer
- #10b981 — Vivid Mint: Positive delta metric percentage text and micro-chart trajectory indicator
- #1e293b — Border Subtle: Dividers and input container boundaries across the dark footer section
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 19px subheading, 24px heading, 52px display. Tracking -0.03em at display, +0.06em at uppercase labels. The typography presents an authoritative, precision-engineered fintech cadence using a crisp neo-grotesque sans-serif. Tight tracking on display headlines creates a dense, modern tone of institutional competence. Monospaced and micro-tracked uppercase styles lend an audit-ready, analytical feel. Substitution with Inter, Plus Jakarta Sans, or Geist preserves the required balance between tech-forward speed and financial reliability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth on the light canvas is handled through expansive, diffused drop shadows (0 12px 32px rgba(15, 23, 42, 0.05)) coupled with 1px border lines (#f1f5f9) on floating cards. The dark footer deliberately avoids traditional drop shadows, expressing hierarchy through layered surface luminance: base ground #070e1c beneath elevated panel #0d1a33. Subtle atmospheric glow effects sit behind the hero text to provide depth without physical elevation.
IMAGERY
Visual media is exclusively restricted to abstract financial interface telemetry: minimalist vector sparklines, micro bar graphs, and crisp UI metrics. No lifestyle photography or photorealistic representations are permitted. Visual telemetry must communicate speed, accuracy, and real-time computation through clean geometric vectors and soft gradient area charts.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the massive 180px periwinkle brand wordmark placed in the hero CTA that is abruptly cut across its horizontal midline by the straight horizon line of the midnight footer. This turns the brand name into both a decorative architectural foundation for the light CTA and a massive visual anchor uniting light and dark canvases.
MUST
- Anchor the oversized translucent wordmark directly onto the footer partition line so the dark background bisects it cleanly.
- Maintain high contrast by utilizing pure #ffffff text for dark-mode headers and #0f172a for light-mode titles.
- Enforce exactly 10px corner radii on all interactive conversion buttons across light and dark modes.
- Keep floating peripheral metric cards asymmetric to frame the centered CTA text block gracefully.
AVOID
- Do not let the massive watermark sit completely inside the light canvas; it must kiss the footer edge.
- Never use dark dropshadows on the dark footer panel; use 1px stroke borders (#1e293b) instead.
- Do not mix rounded pill buttons with the 10px squircle buttons used for calls-to-action.
- Avoid colored backgrounds on the metric cards; keep them crisp white to pop off ambient periwinkle.
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 中尝试 
