Design a dark-mode mobile app interface screen: deep obsidian night layered with bioluminescent cyan and magenta synthetic glows.
LAYOUT
Structured for single-column vertical mobile flow with clear hierarchy: screen header and visualizer on top, followed by a large hero banner, a consolidated track list module, and horizontal scrolling recommendations at the bottom. Standard horizontal margins are consistently 16px to 20px.
PALETTE (use these exact hex values)
- #07090E — Obsidian Void: Primary background canvas for the entire screen
- #0E131F — Deep Midnight Slate: Background fill for the hero feature card and grouped tracklist container
- #1E2638 — Subtle Charcoal: Icon button surface fill and track divider lines
- #FFFFFF — Pure White: Primary screen headings, card headlines, and active track titles
- #707E94 — Cool Slate Gray: Subtitles, category subtitles, artist names, and inactive icons
- #3D7BF6 — Electric Azure: Eyebrow tag text, interactive links like See All, and gradient start
- #844FF5 — Hyper Violet: Gradient stop for the hero floating action play button
- linear-gradient(135deg, #4477F5 0%, #9D4EDD 100%) — Hero Glow Gradient: Hero play button background and accent rings
- #111E38 — Midnight Indigo Badge: Background fill for small metadata pill badges such as NEW
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 32px display. Tracking -0.02em at display, 0 at body, 0.08em at uppercase. The type choice is clean, neutral, and hyper-modern (SF Pro or similar grotesque), providing a calm typographical canvas that doesn't compete with the wild cyberpunk cover artwork. Tight letter-spacing on display headers conveys an exclusive, compact app feel. Open-source alternates like Inter or Plus Jakarta Sans easily preserve this tone.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 14px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created through value-layering and luminous imagery rather than drop shadows. Surface level 0 is pitch obsidian, surface level 1 cards sit at #0E131F with subtle contrast, and interactive buttons pop via internal radial gradients and solid white highlights.
IMAGERY
Visual assets rely on hyper-stylized digital 3D renders, neon glows, synthetic fog, and bioluminescent cyan and fuchsia lighting. Organic imagery like hands or human silhouettes are treated with spectral vapor and particle disintegration effects. Mundane, un-retouched lifestyle photography is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The encapsulated tracklist container: rather than edge-to-edge dividing lines typical in streaming apps, tracks are nested within a monolithic rounded dark slate (#0E131F) card with internal dividers and rounded artwork. Misusing it by bleeding track rows edge-to-edge ruins the tailored, floating card feel.
MUST
- Keep the canvas deeply dark (#07090E) to ensure glowing album graphics stand out.
- Use pill-shaped containers and circular touch targets with full rounded corners (999px).
- Pair electric cyan and magenta gradients exclusively with focal interactive elements.
- Maintain generous margin (16-20px) along screen edges for mobile thumbs.
AVOID
- Never introduce harsh #FFFFFF borders or dividers; use #161C2A or opacity instead.
- Avoid flat, pale backgrounds; interface elements must rely on deep midnight hues.
- Do not use sharp 0px or 4px square corners on primary media cards.
- Avoid coloring body text in saturated neons; reserve neons for art and micro-accents.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1616:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
