Design a dark-mode mobile app interface screen: dark editorial staging draped in deep obsidian with razor-sharp gold accents and cinematic contrast.
LAYOUT
The mobile viewport is structured vertically starting with a lightweight branded app bar integrated into the hero imagery. The top 55% of the viewport is dedicated to a full-bleed cinematic hero image supporting left-aligned editorial typography and a pill CTA. Below the hero pager, the interface transitions into modular stacked cards (#131416) with 18px rounded corners that compartmentalize business statistics and horizontal portfolio galleries.
PALETTE (use these exact hex values)
- #080809 — Canvas Obsidian: Root background canvas behind the hero photograph and primary scroll area.
- #131416 — Card Charcoal: Background fill for floating section cards including statistics and galleries.
- #202227 — Card Border Dark: Subtle 1px boundary stroke enclosing section card containers.
- #C99E5C — Burnished Gold: Brand hero titles, active pagination pill, tracking subtitles, and primary button outlines.
- #FFFFFF — Pure White: Primary headings, display titles, and prominent numeric statistics.
- #8F9297 — Muted Silver: Secondary descriptive body copy, passive status icons, and inactive carousel dots.
- #4A6B82 — Icon Tint Blue: Circular outline and glyph fill for experience stat badge.
- #D87A68 — Icon Tint Rose: Circular outline and glyph fill for photoshoot and client stat badges.
- #6BBFA0 — Icon Tint Mint: Circular outline and glyph fill for awards stat badge.
TYPOGRAPHY
Typeface Barlow Condensed (or Oswald, League Gothic, Anton), weights 600/700. Sizes 10px caption, 11px body-sm, 13px body, 15px subheading, 18px heading, 22px heading-lg, 38px display. Tracking 0.04em at display, 0.12em at subheadings. The typographic tone is authoritative, high-fashion, and strictly architectural. Condensed geometric sans-serif headings echo modern luxury editorial mastheads, while clean neutral grotesque body text provides legible utility. The pairing feels deliberate and restrained, avoiding expressive script or ornamental serifs in favor of modernist prestige.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved purely through surface tone layering without soft blur shadows. The baseline obsidian canvas (#080809) recedes, allowing slightly elevated cards (#131416) to emerge cleanly via crisp geometry and subtle dark perimeter boundaries. High-contrast photographic highlights provide the only organic dimensional depth.
IMAGERY
Photography follows high-fashion, dramatic low-key studio lighting with strong subject separation against deep black backgrounds. Human subjects feature gold leaf, metallic cosmetics, or high-contrast gloss finishes. Off-brand imagery includes bright daylight consumer snapshots, flat lay graphics, or low-contrast washed-out images.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone stacked headline ('DIGITAL' in white over 'PHOTOGRAPHY' in warm burnished gold) coupled with a dark charcoal floating container card architecture. This signature balances editorial art direction with functional app card modularity. It is misused when gold is applied haphazardly to entire paragraphs or when background cards lose their subtle tone separation from the canvas.
MUST
- Pair pure white and burnished gold (#C99E5C) for split display headlines to maintain editorial prestige.
- Enclose distinct informational sections inside rounded #131416 charcoal cards to create rhythm over black.
- Use uppercase tracking (0.12em to 0.15em) on 10px subheadings to mimic luxury print typography.
- Restrict bright saturated colors to muted, thin 1px icon badges inside dark surfaces.
AVOID
- Do not use saturated primary yellow or neon amber in place of desaturated burnished gold (#C99E5C).
- Never introduce pure white backgrounds or light theme card containers.
- Avoid standard system drop shadows; rely solely on #131416 tone lifts against #080809 base.
- Do not crowd hero typography into the model's face or subject focal area.
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 中尝试 
