Design a dark-mode website section: luminescent neon slit rays slicing through obsidian glass panels for high-stakes digital unboxing.
LAYOUT
The top CTA adopts an asymmetric two-column split layout across a 1280px container: headline, description, and dual buttons on the left; an encapsulated live drop preview card on the right. A luminous vertical light flare bisects the two columns in the background. The bottom footer switches to a five-column layout with brand identity on the left, four navigation pillars in the center, and a boxed enterprise card on the right, terminating in a single-row copyright bar.
PALETTE (use these exact hex values)
- #07090c — Obsidian Ground: Root background canvas across the hero and footer sections
- #0e1319 — Card Trench: Background fill for product preview card, enterprise box, and inputs
- #1b232c — Obsidian Border: Hairline structural border on cards, dividers, badges, and carousel frame
- #eb4b4b — Hot Coral: Primary CTA fill, active card glow halo, brand logo mark, and subscribe button
- #10b981 — Aurora Emerald: Live status indicators, verification badges, and central ray illumination
- #bef264 — Spectral Lime: Highlight flare within the vertical background neon curtain
- #8593a3 — Ghost Slate: Body copy, inactive nav links, footer column items, and metadata labels
- #f8fafc — Stark White: Main display headings, active badge labels, and primary button labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 52px display. Tracking -0.03em at display, 0.05em at caps. The typography is clinical, confident, and machine-precise. Setting titles in tight-tracked (-0.035em) neo-grotesque sans gives the unboxing platform an elite gaming-hardware feel. Navigation labels and status indicators lean into micro-uppercase styling for cryptographic authenticity. Inter or Plus Jakarta Sans perfectly preserves this architectural crispness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity layering rather than drop shadows. Flat, dark card planes (#0e1319) sit directly over the obsidian foundation (#07090c), outlined by 1px stroke borders (#1b232c). Atmosphere and dimension are projected purely through back-to-front light spills: the vertical green aurora beam behind the pack preview and the crimson bloom surrounding the featured collectible card.
IMAGERY
Imagery pairs high-fidelity 3D metallic renders (glossy vacuum-sealed foil packs with subtle prism reflections) with minimalist flat vector UI. Digital trading cards use dark, textured filigree and centered radiant emblems. Photography is completely absent; visuals strictly emphasize physical collectible packaging translated into high-tech digital artifacts.
SIGNATURE DETAIL — the thing that makes this design itself
The vertical aurora borealis slit: a centered, atmospheric column of emerald-to-chartreuse light rays that looks like an illuminated scanner bed shining between the value proposition and the pack reveal card.
MUST
- Anchor the hero with a high-contrast coral button against the dark backdrop.
- Use 1px borders (#1b232c) to define surfaces instead of heavy drop shadows.
- Restrict neon green and lime glows to metadata, status pings, and the central vertical aurora.
- Maintain strict vertical column grids in the footer with 11px uppercase cyan-tinted category headers.
AVOID
- Never replace the dark obsidian (#07090c) background with a light canvas.
- Avoid pill radii on main action buttons; keep them rigidly structured at 8px.
- Do not spread the vertical aurora curtain across the entire screen; keep it a focused vertical slit.
- Never use warm yellow or orange lighting that conflicts with the coral (#eb4b4b) and emerald (#10b981) palette.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试