Design a light-mode web interface screen: crystalline light-mode web3 canvas anchored by celestial cobalt spheres and razor-sharp typographic telemetry.
LAYOUT
The page is structured as a two-pane layout: a persistent 240px navigation rail locked to the left margin, and an expansive right canvas scrolling vertically through distinct narrative bands. The content begins with an asymmetrical hero visual block, transitions to an integrated four-metric horizontal ribbon, moves into a 2x2 capability grid, and concludes with dense card matrices and multi-point telemetry charts. Sections maintain consistent 80px vertical margins with an aligned 1120px inner content bounds.
PALETTE (use these exact hex values)
- #FAFBFC — Canvas Ground: Global outer canvas background behind sidebar and scrolling content sections
- #FFFFFF — Card Surface: Elevated card containers, search input, metric tiles, and floating dashboards
- #F1F5F9 — Subtle Wash: Nested panels, search pill backgrounds, and passive metric boxes
- #2B6DF8 — Interchain Cobalt: Primary CTA buttons, active card borders, key iconography, and anchor links
- #EEF4FF — Active Azure Tint: Active navigation item pill background and selected state card fill
- #0F172A — Obsidian Body: Primary headings, major telemetry figures, and primary button label text
- #64748B — Slate Secondary: Descriptive body copy, navigation links, and structural column headers
- #10B981 — Telemetry Emerald: Positive yield percentages, network status pill dot, and upward trendline vectors
- #E2E8F0 — Hairline Border: Card perimeter outlines, vertical data dividers, and sidebar partition rule
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 44px display. Tracking -0.03em at display, -0.01em at body, 0.02em at micro. The typographic tone is clinical, institutional, and reassuringly precise, speaking like an advanced financial infrastructure protocol. Plus Jakarta Sans (or Inter as a primary substitute) delivers geometric clarity with wide apertures and tight letter-tracking in large sizes (-0.03em), balancing modern consumer-tech friendliness with institutional rigor.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 999px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated through atmospheric layering rather than layered drop shadows. Content cards float flush or near-flush with hairline 1px borders (#E2E8F0) and pure white surfaces against the #FAFBFC canvas. True dimensional depth is reserved exclusively for the 3D rendered celestial orbs and rings, which feature realistic diffuse contact occlusion shadows.
IMAGERY
The imagery language consists of hyper-tactile, soft-frosted 3D renders representing celestial bodies, orbiting planetary nodes, and floating layered discs rendered in vivid cobalt blue, periwinkle, and translucent glass. Flat photography, stock imagery, and harsh geometric low-poly vector art are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the floating, frosted cobalt-blue celestial sphere wrapped in planetary orbits, set against an impeccably sterile, light-mode financial interface. It transforms cold crypto infrastructure into an approachable, tactile universe. Misuse occurs when the 3D render is shrunk into a standard 24px icon box or when noisy multi-colored gradients ruin its pure cobalt-to-periwinkle surface.
MUST
- Anchor all primary calls-to-action in solid royal blue (#2B6DF8) with white 500-weight typography.
- Enclose distinct metric clusters inside 1px bordered containers (#E2E8F0) over pure white surfaces.
- Restrict positive delta indicators and upward sparklines strictly to emerald green (#10B981).
- Pair heavy 700-weight display titles with muted slate (#64748B) descriptive paragraphs.
AVOID
- Do not introduce dark mode canvases or black card containers into this light architecture.
- Never apply high-opacity drop shadows to interface cards; depth comes from hairline borders.
- Avoid warm accent tones like red, amber, or purple unless communicating critical system errors.
- Do not use sharp 0px corners on interactive buttons or structural content containers.
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 中尝试 
