Design a light-mode mobile app interface screen: cinematic editorial luxury grounded in warm charcoal, deep port wine, and luminous gallery-grade cream surfaces.
LAYOUT
The page builds vertically in distinct tonal chapters. It begins with a rounded dark obsidian hero block containing brand headlines and CTA, abruptly overlapping into a crisp white three-pillar value proposition module. Beneath this, the warm linen background hosts a dark featured case study card, followed by a titled horizontal-scrolling rail of portrait-oriented work tiles.
PALETTE (use these exact hex values)
- #f5f4ef — Linen Canvas: Dominant background canvas for the lower scrolling page and case study feeds.
- #151618 — Hero Obsidian: Dark moody base canvas for the hero section and featured case study card.
- #ffffff — Gallery White: Floating pillars card, badge discs, and inverted high-contrast elements.
- #542028 — Vintage Port: Primary interactive touchpoints including the main CTA button and floating chat bubble.
- #c39c6b — Warm Ochre: Accent horizontal rules, uppercase category eyebrows, active carousel dots, and case study links.
- #181818 — Charcoal Black: Primary text on light surfaces and prominent headline typography.
- #75736f — Muted Stone: Secondary descriptors, subheadings, and explanatory captions on light surfaces.
- #eae7e1 — Separation Line: Vertical divider lines between value proposition columns in the white floating card.
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Ogg, Freight Text), weights 400/600. Sizes 10px caption, 12px body-sm, 14px body, 16px subheading, 24px heading, 34px display. Tracking -0.02em at display, normal in body. The type choice balances heritage luxury with Scandinavian UI clarity. The serif displays high stroke contrast and fluid italics reminiscent of vintage Vogue editorial spreads, establishing bespoke craft and prestige. Licensing Playfair Display or Cormorant Garamond provides a ready open-source match, paired strictly with geometric sans like Plus Jakarta Sans for operational readability.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 12px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created primarily through large-radius card overlapping rather than harsh z-index stepping. The primary capability card physically straddles the dark hero and warm canvas using a soft ambient shadow (0px 10px 30px rgba(0,0,0,0.06)). Within dark surfaces, elevation is communicated through subtle lightness shifts, stepping from #151618 up to #1d1e20.
IMAGERY
Photography leans toward cinematic luxury, still-life art direction, and tactile high-end materials like gold hardware, brushed leather, and heavy paper textures. Portraits are cast in warm, dramatic chiaroscuro side-lighting with deep shadows. Avoid clinical tech mockups, generic vector illustrations, or bright stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-weight editorial headline formula: starting in Roman serif ('We Are Everyone\'s') and finishing in an expressive italic serif ('Digital Agency'), punctuated by a minimal 24px gold bar beneath. Misusing it means italicizing the whole sentence or omitting the warm bar, which degrades an intentional haute-couture signature into a standard blog headline.
MUST
- Pair Roman regular serif words with flowing italic serifs within the exact same display headline.
- Use warm ochre (#c39c6b) sparingly: reserve it for dividers, eyebrows, and active indicators.
- Apply 24px border radius consistently across all elevated foreground card modules.
- Maintain generous tracking (0.15em to 0.2em) on all uppercase sans-serif subheadings.
AVOID
- Do not use saturated primary colors or bright neon blues; stick strictly to wine and ochre accents.
- Never render long paragraphs of body copy in serif; restrict serifs to headings and titles.
- Avoid sharp 0px corners; this aesthetic relies on smooth, tactile 12px to 24px rounded corners.
- Do not add dark solid borders around cards; rely on subtle surface contrast and ambient drop shadows.
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 中尝试 
