Design a dark-mode mobile app interface screen: curated cultural journalism bound in high-contrast cinematic dark mode with vibrant issue-driven color pops.
LAYOUT
Vertical mobile hierarchy begins with a utility header, immediately transitioning to an asymmetrical horizontal hero carousel. Content below breaks into distinct themed blocks ('Discover' card scroll, followed by 'Collections' vertical list), separated by 28px gaps and anchored by identical section header patterns.
PALETTE (use these exact hex values)
- #0d0f12 — Deep Obsidian Base: Screen background canvas behind all feeds, cards, and navigation headers.
- #16191f — Elevated Slate Card: Background fill for horizontal collection rows and subtle container elements.
- #c61b1b — Editorial Crimson: Hero card tint and collection badge background designating physical issue releases.
- #2f6fed — Electric Royal: Interactive text links, active pagination indicator, and 'NEW' tag pill.
- #72d5a3 — Sage Mint: Category badge background for audio and podcast editorial items.
- #f16363 — Soft Coral: Category badge background for photo essay cards and notification alert dots.
- #ffffff — Pure White: Primary headings, titles, active glyphs, and high-emphasis cta button surface.
- #8e95a2 — Muted Ash: Secondary subtitles, article counts, dates, and inactive pagination indicators.
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 20px heading, 24px heading-lg, 44px display. Tracking -0.03em at display, 0.05em at micro-caps. The typographical voice is modern, rigorous, and restrained, echoing luxury print culture magazines through stark neo-grotesque weights. Tight negative tracking on large display numbers pairs with spacious positive tracking on tiny uppercase labels to establish crisp architectural authority. Inter or SF Pro Display serves as the ideal drop-in replacement.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 12px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Elevation is purely flat and tonal, completely omitting drop shadows. Hierarchy is achieved by layering dark slate containers (#16191f) over the deep obsidian base (#0d0f12), punctuated by vibrant imagery and high-contrast typography.
IMAGERY
Photography leans toward cinematic portraiture, high-fashion monochrome crops, and evocative atmospheric stills with deep shadows. Avoid oversaturated lifestyle stock, clip art, or playful illustrative figures; imagery must read as high-end print editorial.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of stark oversized crimson issue blocks displaying monolithic numerals ('21', '31') directly beside full-bleed cinematic photography. To execute it properly, set numerals at 40px+ bold white over solid #c61b1b, paired strictly with clean uppercase labels ('ISSUE'). Misusing it by introducing subtle gradients or non-issue marketing copy destroys its print-periodical character.
MUST
- Use solid white buttons with black text only for primary calls-to-action against photographic cards.
- Pair full-bleed imagery with a bottom-up black gradient (#000000 0% to transparent 70%) to ensure label contrast.
- Reserve vibrant crimson (#c61b1b) exclusively for issue numbers and active alert dots.
- Maintain uniform 16px border-radius across all carousel cards and portrait media thumbnails.
AVOID
- Do not introduce light-colored background sheets; maintain #0d0f12 base canvas throughout.
- Do not apply drop shadows to cards; rely entirely on surface fill tone differences (#16191f vs #0d0f12).
- Do not color section headings; reserve color accents strictly for 'View All' links and badges.
- Do not mix serif typography into headlines; keep the sans-serif geometric voice pure.
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 中尝试 
