Design a light-mode web interface screen: an immersive deep-space planetary hero dissolving into crystalline light-mode institutional fintech precision.
LAYOUT
The page follows a deliberate descending narrative: an expansive full-bleed cosmic hero canopy showcasing planetary ecosystem scale, immediately followed by an asymmetric 2-column feature introduction. Beneath, balanced bento grids (spanning a large featured token module and a 2x2 capability matrix) transition cleanly into wide-format metric telemetry charts.
PALETTE (use these exact hex values)
- #050814 — Cosmic Deep Space: Background canvas of the entire hero section, framing the planetary orbit artwork and navigation bar.
- #ffffff — Pure Canvas: Dominant background canvas for all secondary sections, content blocks, and analytical data grids.
- #f8fafd — Ice Plate: Fill color for feature bento tiles, data card panels, and metric table rows.
- #2563eb — Interstellar Cobalt: Primary interactive color for filled action buttons, active toggles, inline text links, and key chart strokes.
- radial-gradient(circle, #38bdf8 0%, #a855f7 50%, #e11d48 100%) — Nebula Radial Glow: Atmospheric backdrop lighting in the hero and lighting accents inside 3D glass assets.
- #0f172a — Obsidian Body Text: Primary text color for headlines, titles, and critical metrics across all light canvas regions.
- #64748b — Slate Caption: Secondary copy, labels, paragraph body descriptions, and inactive navigation links.
- #10b981 — Yield Emerald: Used exclusively for positive yield percentages, verification check icons, and network status tags.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 34px heading, 52px display. Tracking -0.03em for display headings, 0.12em for uppercase eyebrows. The typographic tone is authoritative, scientific, and institutional. By employing Inter with tight negative tracking at display scale and wide tracking on uppercase micro-eyebrows, the type exudes infrastructural reliability. If substituting, use Plus Jakarta Sans to retain the geometric balance and clean numerals.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 104px between sections, 1240px container, comfortable density.
DEPTH
Depth is established through optical luminosity rather than traditional drop shadows. In the hero, glowing radial spheres in deep space provide physical depth; in the white canvas sections, elevation is purely planar, utilizing hairline 1px strokes (#eef2f6) and low-contrast surface contrast (#f8fafd on white) with near-zero box-shadow.
IMAGERY
Imagery consists exclusively of ultra-high-fidelity 3D iridescent glass, crystal refraction, and glowing celestial planetary discs. Assets look tangible, frosted, and light-emitting with prismatic blues, violets, and pinks; flat cartoon vectors or stock photography would severely compromise the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the cosmic-to-laboratory transition: an ethereal, deep-space planetary orbit hero with translucent glowing tokens that dissolves straight into a hyper-clean, icy white bento-grid data workspace. To maintain it, preserve the contrast between planetary dark-space imagery and clinical white analytical cards.
MUST
- Begin with an engulfing deep-space dark section before transitioning downward to crisp white surfaces.
- Use 6px border radii on buttons to keep functional controls distinctly crisper than 16px rounded cards.
- Precede all major section titles with an 11px uppercase tracked eyebrow label.
- Render all 3D assets with iridescent, translucent glass shaders refracting magenta, cyan, and violet.
AVOID
- Do not use full pill (999px) border radii on standard rectangular buttons or interactive action elements.
- Do not introduce muddy grey drop shadows; preserve pristine flat surfaces with hairline boundaries.
- Never replace 3D frosted glass spheres and tokens with flat 2D line-art illustrations.
- Avoid colored backgrounds on page bodies; keep the post-hero interface clean white.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
