Design a light-mode web interface screen: institutional deep-space financial telemetry transitioning seamlessly into pristine, data-dense alpine light surfaces.
LAYOUT
The vertical page architecture unfolds systematically: an open-sky dark hero housing navigation, primary headline value proposition, and globe-mapped telemetry; an overlapping hybrid white data card bridging the transition horizon; a centered section header introducing a 3x2 balanced capability grid; and a split two-column security section pairing an authoritative audit checklist against a central isometric glowing asset.
PALETTE (use these exact hex values)
- #030712 — Void Hero Base: Deep cosmic backdrop for hero visualization, navigation, and celestial telemetry points.
- #FFFFFF — Pure Canvas: Primary light-mode card face, input backgrounds, and elevated data platforms.
- #F8FAFC — Subtle Wash: Global light section backdrop behind feature grids and technical readouts.
- #0066FF — Electric Cobalt: Primary action triggers, active tabs, brand logo geometry, and sparkline trajectories.
- #EFF6FF — Cobalt Tint: Background fill for light-mode feature icon badges and soft focus highlights.
- #0F172A — Midnight Slate: Light mode primary headlines, numerical values, and active table items.
- #64748B — Muted Slate: Secondary descriptors, inactive navigation links, table column headers, and subheadings.
- #10B981 — Market Gain: Positive percentage yields, upward sparkline paths, and verified state badges.
- #EF4444 — Market Loss: Negative percentage yields and bearish market performance indicators.
- #E2E8F0 — Hairline Border Light: 1px structural containment strokes separating light cards and table grid rows.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 36px heading-lg, 56px display. Tracking -0.03em display, +0.06em uppercase telemetry. The typographic tone is authoritative, clean, and mathematically neutral, echoing institutional Swiss finance re-engineered for Web3 infrastructure. Plus Jakarta Sans (or Inter) provides rigid vertical terminal cuts and open counters that keep small 11px uppercase metadata instantly scannable beside high-frequency financial figures. Heading tracking is deliberately clamped down to -0.035em to convey structural solidity and density.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through stark surface color collision rather than stacked skeuomorphic shadows. The dark hero utilizes layered z-index planes (dotted globe base, pinned telemetry overlays, floating glass pills). The light body maintains a remarkably flat, architectural discipline relying on 1px stroke boundaries (#E2E8F0), punctured only by the central analytics slab which casts a soft 24px ambient blur shadow to denote physical elevation above the seam.
IMAGERY
Imagery strictly balances mathematical wireframe telemetry with high-fidelity isometric 3D rendering. The hero is dominated by a monochrome dot-matrix wireframe sphere pinned with real-time financial callouts. Below, the security section utilizes a crystalline, luminous cyan-blue isometric monolith surrounded by orbiting cryptographic glyphs; photo imagery or organic lifestyle vectors are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the 'Horizon Breach'—the deliberate placement of a massive, pristine white analytics card that overlaps the junction between the dark cosmic hero canvas and the light alpine content floor. Misusing this pattern by breaking the card into fragmented floating pieces or omitting the strong dark-to-light value contrast completely dissolves the spatial tension that defines the brand identity.
MUST
- Anchor the split-screen horizon using a bold card slab that visibly breaks the boundary between dark and light.
- Use semantic green (#10B981) and red (#EF4444) strictly for financial returns, never for decorative brand styling.
- Keep typography tight: apply negative tracking (-0.03em) to all headings above 32px to ensure technical solidity.
- Maintain high contrast on dark telemetry cards by combining 1px rgba(255,255,255,0.12) borders with backdrop-blur.
AVOID
- Do not bleed dark hero graphics into the light feature grid below the bridging analytics card.
- Never apply colored saturated drop shadows; use diffused slate/black ambient shadows with low opacity (<=8%).
- Avoid pill-shaped (full-round) CTA buttons; use sharp, controlled 8px radii to maintain institutional rigor.
- Do not mix illustrative styles; keep 3D elements confined to isometric technological assets and flat line vectors.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1344:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
