Design a light-mode mobile app interface screen: quiet luxury editorial commerce structured around deep pine green accents, high-contrast serif typography, and restrained tactile cards.
LAYOUT
The mobile view organizes vertically in a strict sequence: system status bar, branded editorial masthead with utility search, horizontal circular brand filter rail, and a vertical stack of composite product cards. Inside each card, the layout bifurcates into an image frame on the left and metadata plus actions on the right. Action buttons are placed predictably at the bottom right corner of each card unit.
PALETTE (use these exact hex values)
- #FBFBFC — Porcelain Canvas: Global application background setting a pristine, gallery-like ambience
- #FFFFFF — Pure White: Card containers, search button surface, and active swatch rings
- #F3F3F5 — Studio Neutral: Consistent studio backdrop fill behind cutout product imagery
- #173A2F — Deep Pine: Primary Add to Bag CTA, featured category circle, and active size indicator
- #E7EFEA — Sage Mist: Background for confirmation states such as the Added to bag pill
- #111614 — Obsidian Ink: Primary page header, product titles, prices, and high-emphasis icons
- #767B79 — Mineral Slate: Header subtitle, inactive brand labels, and unselected size labels
- #EEEEF0 — Hairline Rule: Delicate borders framing cards, circular icon actions, and dropdown toggles
TYPOGRAPHY
Typeface Canela (or Playfair Display, Instrument Serif, Caslon Book), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 18px heading, 44px display. Tracking -0.02em at display, -0.01em at titles. The typographic tone is aloof, cultured, and authoritative, evoking international fashion biannuals like 032c or Fantastic Man. High stroke contrast in the Canela-like serif delivers instant cultural prestige, while neutral grotesque sans elements provide utilitarian legibility for sizes and pricing. When licensed, Canela and SF Pro should be prioritized; Instrument Serif and Inter serve as robust open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is strictly physical and minimal, rejecting layered floating elevations. Product cards exist on a single 1px hairline-bordered plane over the porcelain base, bolstered by an imperceptible 0 4px 12px rgba(0,0,0,0.02) shadow. Controls like buttons and chips rest flat without skeuomorphic gradients or heavy bevels.
IMAGERY
Imagery strictly follows luxury atelier cataloguing: pristine studio packshots on light neutral grey fills with natural, soft floor contact shadows. Subject matter includes avant-garde designer apparel, footwear, and accessories with zero background distraction. Busy street-style or lifestyle candid photos are forbidden within these card frames.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal split product card pairing a 14px-radiused grey photographic mat on the left directly against an editorial typographic stack with an ultra-deep pine green (#173A2F) pill button on the right. It transforms a standard commerce listing into a tactile archive index card. Misusing it involves stacking the image vertically over the text or substituting the forest green with standard digital blue.
MUST
- Pair the editorial display serif exclusively with compact, uppercase neutral sans metadata.
- Reserve the #173A2F pine green strictly for focal interactions and the primary call-to-action.
- Isolate all product photography against neutral studio light-gray (#F3F3F5) bounding mats.
- Maintain uniform 20px card corner radius across the entire shopping feed.
AVOID
- Do not apply vivid saturated colours like red, pure blue, or bright green.
- Never replace the high-contrast display serif on product titles with a geometric sans.
- Avoid solid black backgrounds; this design relies on an open, gallery-grade white canvas.
- Do not crowd variant swatches; maintain at least 6px separation between touch targets.
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 中尝试 
