Design a dark-mode mobile app interface screen: a moody private-kitchen darkroom where cinematic gastronomy glows against deep obsidian surfaces.
LAYOUT
The mobile view follows a disciplined vertical stack framed by a consistent 20px screen margin. Hierarchy starts with the greeting and avatar header, moves through the instant-access search and horizontal category chips, peaks at the large featured hero recipe, and concludes with a horizontally-scrolling card carousel of ongoing courses.
PALETTE (use these exact hex values)
- #0E1113 — Obsidian Ground: Root page background canvas behind all feeds and headers
- #1A1E22 — Graphite Card: Background fill for search inputs and elevated card containers
- #162E24 — Emerald Tint: Container fill for active category chips and progress pill surfaces
- #4EBA7E — Sage Bright: Active state indicators, step counts, see-all links, and notification pips
- #F6B73C — Warm Gold: Star rating icon for reviewed recipes and chef masterclasses
- #FFFFFF — Pure Stark: Display headlines, card titles, and high-visibility header typography
- #949DA6 — Muted Slate: Subheadings, placeholder text, meta labels, and inactive category icons
- #F3F4F6 — Action Cream: High-contrast hero call-to-action button surface
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, Work Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 17px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em at display, 0 at caption. The typographic tone is sophisticated yet accessible, relying on a neutral neo-grotesque sans-serif that lets the lush imagery speak. Display headers use snug -0.02em tracking to convey authority, while body and metadata use relaxed tracking for rapid scanning in the kitchen. Inter or SF Pro Display offer the exact modern clarity required.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 16px, buttons 12px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is strictly flat and atmospheric, achieved without heavy drop shadows. Elevation shifts rely entirely on value steps from #0E1113 (canvas) to #1A1E22 (card surface) and dark radial/linear gradient vignettes that drape over high-saturation food photography.
IMAGERY
Photographs are rich, warm, editorial food and culinary prep shots taken from direct top-down or 45-degree angles under directional studio lighting. Food must look fresh and organic with rich green, red, and golden tones; flat digital illustrations, low-res user uploads, or sterile stock images are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal split-composition Hero Recipe Card: a rounded 24px container that pairs an asymmetric dark gradient on the left half for textual data with an unobstructed, glistening culinary shot on the right. Misusing it by placing text directly over the food without a deep scrim or centering the text destroys legibility and signature balance.
MUST
- Use pitch charcoal (#0E1113) for view backgrounds rather than true OLED black (#000000) to avoid harsh clipping.
- Rely on full-bleed photography with dark linear gradients (0° angle, dark on text side) for hero card backgrounds.
- Keep primary CTA buttons in solid high-contrast off-white (#F3F4F6) with dark bold text for immediate visual hierarchy.
- Apply sage green (#4EBA7E) sparingly to indicators, active chips, and progress metrics to maintain its accent power.
AVOID
- Never use bright white containers or light background themes; photography depends on high dark-contrast.
- Avoid colored drop shadows or harsh glow effects around cards; depth must come purely from surface contrast.
- Do not render primary CTA buttons in green; reserve emerald solely for states, pips, and navigation badges.
- Never shrink the search bar height below 48px or square its corner radius below 16px.
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 中尝试 
