Design a light-mode mobile app interface screen: rustic editorial warmth wrapped in warm parchment, deep forest greens, and golden crust tones.
LAYOUT
Mobile single-column vertical flow bounded by a 16px side margin. The rhythm proceeds from top brand navigation into an immersive hero feature, immediately followed by an enclosed category selector strip. Below sits a featured promo deal with high visual weight, resolving into horizontal carousels of featured inventory.
PALETTE (use these exact hex values)
- #FBF8F3 — Warm Canvas: Dominant light parchment background for the entire page body.
- #FFFFFF — Card Ivory: Clean elevated container background for category blocks and product trays.
- #1B302F — Deep Forest Slate: Deep moody backdrop for promotional deal banners.
- #1C1A17 — Artisan Charcoal: Primary typography, top bar branding, and major section headings.
- #C8A676 — Golden Crust: Primary CTA button background, active pagination dots, and star emblems.
- #6D1A24 — Bakery Maroon: Category iconography and distinct artisan branding accents.
- #F5EFE6 — Soft Oatmeal: Subtle tint for category icon button backgrounds.
- #8C8276 — Muted Wheat: Secondary labels, countdown unit labels, and subtle breadcrumbs.
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond,Cinzel,Baskerville), weights 400/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 22px heading, 32px display. Tracking -0.01em at display, 0.04em at subheadings. The typographic voice blends high-end Parisian bakery heritage with contemporary luxury lifestyle publishing. Playfair Display conveys warmth, slow-crafted tradition, and artisan care, while Inter ensures modern tactile usability on small handheld displays. For free alternatives, Cormorant Garamond provides an equally aristocratic editorial tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 6px. Spacing on a 4px unit, 12px gaps, 20px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved through high-contrast surface transitions rather than heavy drop shadows. Dark hero cards and forest green deal cards contrast sharply against the warm parchment canvas (#FBF8F3). Product cards use crisp 1px borders or subtle soft ambient diffusion that feels like natural light hitting paper.
IMAGERY
Photography is cinematic, moody, and warm-toned with direct directional light highlighting flour textures, golden crusts, and chocolate glazes. Backgrounds consistently feature rustic wood boards, linen, wheat stalks, and stoneware bowls. High-key clinical e-commerce shots on pure white backgrounds are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the warm parchment ground (#FBF8F3) combined with the stacked serif logotype framed by diamond star flourishes, anchoring high-contrast rustic photography inside soft 16px rounded cards. It fails if replaced by sterile white backgrounds and standard corporate sans fonts.
MUST
- Use warm off-white #FBF8F3 for the page canvas rather than clinical #FFFFFF.
- Pair a high-contrast editorial serif for headlines with clean neo-grotesque sans for UI labels.
- Ensure photography features dark, flour-dusted, warm wooden rustic kitchen settings.
- Style primary buttons with tan-gold (#C8A676) backgrounds and sharp uppercase sans typography.
AVOID
- Do not introduce bright, synthetic neon or saturated primary blues and purples.
- Do not use sharp 0px rectangular edges on promo containers or product cards.
- Do not set long paragraphs or functional system metrics in serif typefaces.
- Never use pure black #000000; substitute with warm artisan charcoal #1C1A17.
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 中尝试