Design a dark-mode web interface screen: artisanal dark slate meets electric lime herbs and rustic culinary textures.
LAYOUT
The layout progresses logically from a compact utility alert bar and nav, straight into an asymmetrical hero with left-aligned editorial copy and right-aligned overhead dish staging. Beneath the hero, a centralized 'Browse By' section introduces a 3-column card grid. This is followed by a 4-item horizontal carousel of circular recipe previews, concluding with a 4-column bordered KPI stat bar.
PALETTE (use these exact hex values)
- #080F14 — Canvas Dark: Deep slate-black base background for page wrapper and body
- #0B151C — Card Surface: Background fill for category tiles, recipe cards, and metric strips
- #162833 — Border Subtle: Subtle hairline stroke enclosing cards, pill outlines, and stat dividers
- #7DA135 — Brand Chartreuse: Solid primary CTAs, text highlights, and brand identity emblem
- #99E343 — Electric Lime Neon: Glow lines on hero subheader and category line-art icons
- #42C5D1 — Cyan Glow: Alternate neon glow on select category line icons (cooking pot)
- #C85A80 — Tag Magenta: Category label text for Breakfast, Dinner, Lunch, and Dessert tags
- #FFFFFF — Pure White: Primary headings, titles, active navigation links, and key figures
- #8C9BA5 — Muted Slate: Subtitles, body paragraphs, meta details (time, cal), and inactive links
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 48px display. Tracking 0.02em to 0.12em on all-caps. Clean, modern, and authoritative, the sans-serif typography (reminiscent of Inter or Plus Jakarta Sans) uses tight display tracking on titles and generous tracking on all-caps subheadings. It lends a clinical yet premium culinary authority without the nostalgic clutter of vintage serif fonts.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through stroke definition and dark-tone separation rather than cast shadows. Background slate (#080F14) supports card surfaces (#0B151C) outlined by a 1px border (#162833). The only luminous elements are delicate neon outer glows (approx blur 8px-12px) cast by line illustrations.
IMAGERY
Imagery features overhead, culinary overhead photography with moody slate textures, fresh greens, creamy cheeses, and natural wood or marble backgrounds that fade into pitch black. Bright studio lighting with harsh reflections or low-angle lifestyle shots would clash with this dark artisanal aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The circular plate photography crop paired with neon-line wireframe icons over dark slate. It bridges rustic home-cooked food photography with tech-forward interface precision; losing the neon glow or the overhead circular crops would reduce this to a standard food blog.
MUST
- Anchor headline drama with a two-tone text split: white primary line and neon lime secondary line.
- Use overhead, bird's-eye food photography seamlessly blended into deep slate-black edges.
- Render recipe photos as circular crops within elevated dark cards to maintain geometric rhythm.
- Use category indicator tags styled in subdued magenta uppercase typography (#C85A80).
AVOID
- Do not use solid bright backgrounds; canvas must stay pitch slate-black (#080F14).
- Do not use rectangular full-bleed photo cards in the recipe row; enforce the circular plate crop.
- Avoid heavy multi-colored drop shadows; depth is strictly hairline strokes and icon glows.
- Do not set category tags in bright green; reserve magenta (#C85A80) to avoid color competition.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
