Design a light-mode mobile app interface screen: warm editorial minimalism framed by antique gold accents and rounded exhibition surfaces.
LAYOUT
The mobile viewport follows a strict single-column rhythm flanked by 20px margins. It begins with an unpinned utility header, descends into a 24px-radius feature carousel, followed by a dot indicator. Next, the Services section presents a unified stacked list card, followed by the Portfolio block featuring a category pill strip and a multi-column thumbnail row.
PALETTE (use these exact hex values)
- #FAF9F6 — Canvas Bone: Primary screen background setting the warm editorial ambience.
- #FFFFFF — Card White: Background for floating hero banner, service list containers, and buttons.
- #F5EFEB — Icon Neutral: Soft circular backdrops behind line-art service icons.
- #C59B58 — Antique Gold: Selected tabs, logo mark, highlighted display italic script, and active dots.
- #1A1A1A — Charcoal Black: Primary headings, titles, top bar brandmark text, and main navigation icon.
- #767676 — Slate Gray: Body descriptions, inactive categories, and secondary captions.
- #EFECE6 — Border Hairline: Delicate separating lines between list items and subtle card borders.
- #DFDBD5 — Dot Inactive: Pagination indicator dots for inactive carousel cards.
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Bodoni MT, EB Garamond), weights 400/600. Sizes 10px caption, 12px body-sm, 13px body, 15px subheading, 22px heading, 36px display. Tracking -0.01em. The typography communicates bespoke luxury, craftsmanship, and boutique creative direction. Playfair Display conveys high-fashion heritage and editorial authority, particularly in its italic form. Inter stabilizes the interface with razor-sharp legible clarity in captions and utility navigation.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created purely through tone layering without diffuse drop shadows. The soft bone-white page canvas (#FAF9F6) recedes behind pure white container cards (#FFFFFF), while hairlines in #EFECE6 subtly demarcate boundaries. Inner icon discs (#F5EFEB) provide a shallow third tier of elevation.
IMAGERY
Imagery follows an avant-garde editorial aesthetic: monochromatic or neutral-tone artistic double-exposure portraiture blending into the hero card surface. Portfolio items showcase studio product designs on muted, clean backgrounds with generous breathing room. Stock photos with busy backgrounds or high saturation are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the seamless integration of artistic double-exposure portraiture fading into the hero card surface alongside italic antique gold serif highlights. Misuse happens when designers substitute standard rectangular photos without gradient fading, or apply the gold accent to full paragraphs rather than a single punchy keyword.
MUST
- Use warm antique gold (#C59B58) sparingly for active states and italicized serif emphasis.
- Enclose multi-row content inside a single continuous white container with hairline interior dividers.
- Maintain high-contrast serif typography for display headlines and geometric sans for functional UI.
- Keep background tones off-white (#FAF9F6) to allow white cards to create gentle physical layering.
AVOID
- Do not introduce heavy black drop shadows; rely entirely on surface contrast and hairlines.
- Avoid cold blue or stark neutral gray tones that disrupt the warm editorial palette.
- Do not set long paragraphs or multi-line metadata in the serif font.
- Never use sharp 0px or 4px radii on major container cards.
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 中尝试 
