Design a dark-mode mobile app interface screen: moody neon-lit editorial commerce draped in deep obsidian glass and vibrant blue-magenta gradients.
LAYOUT
The layout follows an asymmetrical mobile rhythm starting with an app bar and large 16:9 editorial hero card. Directly beneath, an all-in-one trust ribbon establishes service credentials before transitioning into an asymmetrical bento grid. The grid organizes two stacked portrait tiles on the left opposite a dominant tall locator tile and a promo badge on the right.
PALETTE (use these exact hex values)
- #0B0E14 — Obsidian Base: Root background canvas behind all scrollable feed components and top app bar.
- #131822 — Surface Elevated: Background fill for value propositions dock, feature cards, and discount tiles.
- #212836 — Surface Stroke: Delicate 1px borders delineating card perimeters and interactive boundaries.
- #1D75FF — Electric Azure: Interactive links, section metadata '2015', and circular icon button backgrounds.
- linear-gradient(90deg, #1D75FF 0%, #D83B96 100%) — Neon Gradient CTA: Primary hero conversion button fill providing dramatic optical vibration.
- #FFFFFF — Text High Contrast: Headlines, section titles, card labels, and primary status icons.
- #8B95A5 — Text Muted Slate: Subtitles, secondary descriptors, microcopy, and pricing indicators.
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Montserrat, Manrope), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 22px heading, 28px display. Tracking -0.01em at display, 0.04em at all-caps headings. The typography speaks with an authoritative, high-fashion architectural voice using clean geometric sans-serif shapes. Bold, all-caps category headers provide editorial tension against lowercase muted body copy. If Inter or SF Pro Display is substituted, ensure geometric neutrality like Montserrat or Manrope is chosen.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 12px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved through surface luminance and subtle boundary illumination rather than drop shadows. Surface level 0 (#0B0E14) recedes, while level 1 tiles (#131822) stand forward via 1px hairline borders in #212836. High-priority cards incorporate internal radial lighting or photographic lens glow to create spatial depth.
IMAGERY
Photography consists of close-up editorial portraits and macro product shots featuring dark backgrounds with rich magenta, violet, and cyan rim lighting. Subjects are captured with shallow depth of field and dramatic studio edge lights. Flat, generic e-commerce packshots on white backgrounds are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric bento grid layout paired with duotone neon rim-lit photography inside uniform 18px dark glass tiles. Its strength relies on the collision of cold slate borders and vivid magenta-cyan lighting accents, which would be destroyed if converted to standard flat e-commerce columns or light surfaces.
MUST
- Maintain high-contrast white text against the obsidian (#0B0E14) canvas for effortless legibility.
- Use subtle 1px border strokes (#212836) to give structure to dark tiles without introducing visual clutter.
- Restrict vibrant pink-to-blue duotone gradients strictly to high-priority calls to action.
- Keep section titles uppercase with slight letter-spacing (0.4px) for an editorial luxury appearance.
AVOID
- Never introduce pure white backgrounds or light mode containers; the interface is strictly dark.
- Do not use heavy, blurred drop shadows; use surface color contrast and 1px hairline borders instead.
- Avoid centering body text or category titles; retain strict left-aligned editorial hierarchy.
- Never apply the gradient button styling to secondary or micro-actions.
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 中尝试 
