Design a dark-mode web interface screen: deep obsidian surfaces illuminated by soft neon gradients and high-contrast editorial product tiles.
LAYOUT
The viewport is anchored by a persistent left sidebar (240px wide) housing primary product categories and account management. The main body opens with a search-and-utility header followed by an asymmetrical hero split: bold typography and stats on the left, an angled 3D floating machine on the right. Below, curated rows ('Physical Goods', 'Digital Goods') follow consistent 4-to-5 column grids with trailing promo cards and tabbed filters.
PALETTE (use these exact hex values)
- #03070E — Void Canvas: Deepest canvas background framing the entire viewport and main content feed
- #080C16 — Obsidian Surface: Background for floating cards, sidebar panels, input fields, and metric modules
- #1B2234 — Border Subtle: Hairline structural borders dividing sections, metrics boxes, and cards
- #38E1FF — Brand Glow Cyan: Active states, subtle glows, progress bars, and promotional highlight accents
- #A78BFA — Iridescent Purple: Hero display text gradient transitions and featured badge accents
- #FFFFFF — Text Primary: Headers, primary product titles, and active nav label typography
- #8F99B0 — Text Secondary: Subtitles, secondary descriptions, metadata, inactive links, and pricing labels
- #131A29 — Pill Overlay Dark: Background for floating photo chips, search bar, and secondary pill buttons
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 72px display. Tracking -0.03em at large headings, -0.01em at body. The typographic tone is ultra-modern, crisp, and technical yet premium, relying on geometric grotesque letterforms. The massive 'Shop' title carries custom character with its gradient mask, grounding the store's avant-garde identity. Inter Display or Geist are ideal matches, providing strict legibility at small metadata scales (11px) while remaining commanding at display sizes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 9999px, buttons 9999px. Spacing on a 4px unit, 20px gaps, 48px between sections, 1440px container, comfortable density.
DEPTH
Depth is created purely through luminous edge highlights and ambient color glows rather than traditional black drop shadows. Surfaces step forward by transitioning from deep blue-black (#03070E) to subtle tinted slate (#0A101D), bounded by 1px translucent strokes. Floating hero elements cast diffused cyan and violet radial blurs onto the dark background below.
IMAGERY
Photography is high-key, stylized, and vibrant, featuring glossy pastel nail art, saturated product staging, and playful desk accessories. The hero module relies on clean isometric 3D sci-fi hardware rendering illuminated by neon edge lights. Dull, desaturated lifestyle photography or generic corporate stock imagery would break the hyper-curated aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The subtle neon perimeter glow paired with a deep void canvas and floating thumbnail pills. Specifically, thumbnail cards featuring translucent dark floating pill badges anchored at their bottom-left corner over pastel imagery define this store's browsing experience. Misusing it by placing solid opaque rectangular tags or high-contrast white badges destroys the effortless editorial feel.
MUST
- Keep all card thumbnails strictly rounded to 16px with overflow hidden.
- Use pill-shaped contours for all interactive buttons, search bars, and floating product tags.
- Limit iridescent violet-to-cyan gradients to hero typography, CTA accents, and subtle glow backdrops.
- Pair vivid pastel product photography with the deep obsidian canvas to maximize contrast.
AVOID
- Do not introduce sharp 0px corners on cards, badges, or input fields.
- Do not use solid bright background cards; cards must stay dark (#0A101D) or translucent.
- Never use pure black (#000000); keep the canvas slightly tinted blue (#03070E) for depth.
- Avoid cluttering product previews with prices overlaying the images; keep metadata strictly below the preview.
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 中尝试 
