Design a dark-mode web interface screen: deep charcoal theatrical staging abruptly yielding to surgical, airy high-contrast product cards.
LAYOUT
The page flows from a dramatic, two-column dark hero (left: typographic pitch and dual CTAs; right: monumental 3D medallion asset) down into a bright, daylight canvas. The transition is followed immediately by a 3-column asset performance grid, a four-point horizontal value proposition strip, and an asymmetrical portfolio breakdown widget before culminating in a dense multi-column dark footer.
PALETTE (use these exact hex values)
- #0d0e12 — Obsidian Deep: Background canvas for the hero section, header bar, and main footer.
- #fcfcfd — Light Canvas: Primary light body background for product grids, market tables, and feature highlights.
- #ffffff — Card Pure White: Raised surface fill for crypto pricing cards and secondary dashboard widgets.
- #f7f7f8 — Card Inset Gray: Background tint for secondary action buttons, input fields, and recessed panels.
- #df5345 — Crimson Coral: High-intent CTA buttons, logo accent, italic headline emphasis, and ambient scene backlights.
- #c84437 — Crimson Coral Hover: State transition color for primary interactive buttons.
- #27a168 — Positive Green: Data telemetry indicating 24-hour positive percentage gains and upward trending sparklines.
- #6c8ebb — Neutral Trend Blue: Sparkline trajectory stroke for alternative asset tracking graphs.
- #11141a — Text Primary Dark: High-emphasis headings, asset names, and numerical tickers in light sections.
- #828792 — Text Secondary Muted: Subtext, asset ticker symbols, table headers, and inactive navigational links.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 32px heading, 40px heading-lg, 64px display. Tracking -0.03em at display, 0 at body. The typography balances computational precision with high-fashion editorial prestige. Tight, technical sans-serif letterforms handle complex currency metrics with geometric authority, while the lone, fluid italic serif interjection ('effortless') delivers a human, premium flourish that disarms crypto skepticism. Substitution should preserve this high-contrast tension by matching Inter with Newsreader or Instrument Serif.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created theatrically in the hero using physical light rendering—a hyper-realistic dark pedestal with subtle crimson ground glow and perimeter rim lights. In the UI canvas below, elevation is deliberately flat: tactile layers rely entirely on sharp 1px border strokes (#f0f0f0), white-on-light-gray contrast, and spacious internal breathing room rather than fuzzy multi-stop box shadows.
IMAGERY
The visual anchor is a hyper-detailed, ray-traced 3D black metallic coin with a faceted vermilion core, resting on a dual-tiered matte cylinder base. The lighting is low-key, directional, and studio-grade, emitting soft coral neon reflections onto ribbed backdrops. Flat stock photography or cartoon vector illustrations are strictly incompatible with this identity.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas theatrical plunge: setting a hyper-rendered, dark-room 3D medallion scene that abruptly opens up into an exceptionally crisp, clinical white data layer. Its character hinges entirely on the single hand-crafted italic serif word glowing within an otherwise rigid sans-serif display statement. It is commonly misused by making the entire headline serif or softening the dark-to-light boundary with muddy gradients.
MUST
- Retain the sharp visual boundary between the theatrical dark hero and the airy white product body.
- Use coral (#df5345) exclusively for primary interactive affordances and the singular italic hero word.
- Maintain generous 28px interior padding inside cryptocurrency data cards to avoid visual compression.
- Format currency numbers in bold sans-serif with fractional values slightly downweighted or standard sized.
AVOID
- Do not extend the dark hero background into the data card grid; it destroys the deliberate polarity.
- Do not apply drop shadows to the light crypto cards; depth is achieved solely with hairline strokes.
- Do not use serif typography anywhere outside the single accent word in the hero headline.
- Do not introduce harsh saturated colors for secondary sparklines; stick to muted blues and greens.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2160:3824. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
