Design a light-mode website section: crisp tactical fintech precision meets electric trading card foil packs on a frozen atmospheric canvas.
LAYOUT
The hero uses an asymmetric split-screen layout beneath a floating navbar. The left column (approximately 45% width) holds the core headline, subtext, call-to-actions, and two live proof cards. The right column (55% width) houses the large pack-opening interactive showcase. Below both spans a full-width workflow strip alongside three compact metric cards arranged in an aligned bento grid.
PALETTE (use these exact hex values)
- #E5EDF4 — Glacier Mist Canvas: Atmospheric soft backdrop behind floating cards with subtle mountain landscape photography
- #FFFFFF — Pure Card White: Solid primary surface for KPI cards, floating navigation bar, and workflow banner
- #0D63F8 — Electric Royal Blue: Primary interactive buttons, key highlighted phrase text, and focus states
- #091124 — Deep Obsidian: Primary headline titles, critical card metrics, and pack names
- #5E6C84 — Slate Smoke: Subheadings, metric labels, inactive navigation links, and microcopy
- #D97706 — Legendary Amber: Hexagon icon and rarity level badge text for legendary tier packs
- #10B981 — Growth Mint: Real-time activity dot indicator, positive growth percentages, and mini sparkline fill
- #061325 — Foil Stage Dark: Atmospheric deep navy-to-cyan backdrop gradient beneath the 3D foil pack render
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, SF Pro Display), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading, 56px display. Tracking -0.03em for headlines, -0.01em for body. Plus Jakarta Sans conveys sharp, institutional grade fintech engineering fused with cutting-edge gaming energy. Its tight tracking and circular geometric curves lend authority to metric figures while keeping dense workflow steps approachable and legible. Inter or SF Pro Display make direct 1:1 functional drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 12px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered through physical layering against an atmospheric photo canvas. Foreground panels are crisp white or frosted glass with soft, wide-radius ambient shadows (box-shadow: 0 12px 32px -4px rgba(9, 17, 36, 0.05)), while the central foil pack uses an illuminated pedestal with diffuse radial cyan glow to lift the pack out of the 2D plane.
IMAGERY
Features high-fidelity, photorealistic 3D renders of crinkled metallic foil trading card packs with glossy holographic print and dynamic specular highlights. Card artwork showcases glowing sci-fi character avatars. Atmospheric backdrop utilizes desaturated, low-contrast mountain ranges filtered through a frosty light blue tint.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the tactile foil booster pack sitting inside an illuminated translucent acrylic showcase chamber surrounded by institutional white telemetry cards. It balances whimsical, high-dopamine Web3 pack-ripping graphics with rigorous enterprise SaaS layout discipline.
MUST
- Highlight key verbs within headlines using single electric royal blue (#0D63F8) span tags.
- Use 16px radius for compact information cards and 24px radius for the primary 3D showcase.
- Pair heavy bold metric numerals (e.g. 3.2M+, $18.7M+) with muted caption labels.
- Maintain high contrast by floating pure white cards over the cool pale-blue atmospheric backdrop.
AVOID
- Never use dark backgrounds for the outer page canvas; preserve the crisp glacial daylit atmosphere.
- Do not drop heavy, dark drop shadows; shadows must remain low opacity (rgba(9,17,36,0.06)).
- Avoid using more than two accent colors outside of the primary electric blue and metric green.
- Do not remove the subtle 1px border on translucent card containers in the showcase window.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
