Design a light-mode web interface screen: whipped pastel minimalism framing artisanal confections with tactile studio lighting and crisp SaaS precision.
LAYOUT
The workspace employs a fixed-width left navigation rail (~240px) alongside an expansive main viewport. The top region handles utility actions (search, notifications, and new recipe creation), descending directly into an asymmetric three-column hero section featuring copy on the left, an oversized confectionery visual at center, and floating nutrition metrics on the right. Below the hero sits a full-width multi-attribute specification strip, anchored at the bottom by a horizontal product recommendation carousel.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Global application backdrop providing subtle contrast against elevated pure white cards and panels
- #FFFFFF — Card Surface: Background for floating nutrition panels, bottom cards, inputs, and the left navigation sidebar
- #EE6561 — Primary Coral: Primary conversion CTA, active navigation indicators, and hero product highlights
- #1D72FE — Cobalt Action: Creation utility buttons, system callouts, recipe builders, and secondary metric progress indicators
- #FAD2D8 — Blush Halo: Soft radial backdrop framing the hero ice cream cut-out and circular interactive heart button
- #14B8A6 — Teal Frost: Serving temperature gauges and freshness status micro-bars
- #111827 — Ink Navy: High-priority display titles, card headers, numbers, and primary navigation typography
- #64748B — Muted Slate: Descriptive body copy, input placeholders, category labels, and structural UI iconography
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 44px display. Tracking -0.03em at display, 0 at body. The typography relies entirely on Plus Jakarta Sans, projecting modern Nordic clarity fused with artisanal warmth. Its tight geometric apertures and sturdy stems deliver crisp metric readouts in the dashboard cards, while its open round letters keep the hero display friendly and appetizing. If substituted, Outfit or DM Sans preserve the rounded modern personality, whereas standard Inter leans slightly too corporate.
GEOMETRY & SPACING
Corner radii — cards 20px, links 8px, inputs 12px, buttons 999px. Spacing on a 8px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created using gentle, multi-layered ambient drop shadows (e.g., 0 10px 30px rgba(17, 24, 39, 0.04)) without crisp outlines. Primary buttons feature soft colored glows matching their fill (e.g., coral button with 0 8px 16px rgba(238, 101, 97, 0.25)). Pedestals under products ground elements physically into three-dimensional space while floating cards hover above.
IMAGERY
Photography is studio-grade, hyper-tactile, and isolated on transparent backgrounds, capturing realistic textures like crisp waffle patterns and whipped ice cream ridges. Every hero confection sits on a physical pastel cylinder pedestal or is accompanied by fresh garnish ingredients (berries, pistachios, chocolate flakes). Flat vector illustrations or low-res lifestyle photos are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of an isolated studio food render resting on a minimal 3D pedestal, enclosed within a soft pastel circular halo (#FAD2D8) and surrounded by floating frosted metric cards. This merges tactile physical studio photography with airy SaaS dashboard components. It is commonly misused by using flat 2D vector circles or un-pedestaled clip art which destroys the high-end editorial feel.
MUST
- Use pill-shaped containers (999px radius) for all action buttons and status tags.
- Pair photorealistic product cutouts with subtle circular pastel tinted backdrops (#FAD2D8).
- Keep card backgrounds pure #FFFFFF floating over an off-white #F8FAFC canvas with diffused shadows.
- Render primary conversion actions in warm coral (#EE6561) and secondary utility actions in cobalt (#1D72FE).
AVOID
- Never introduce harsh, saturated black borders; rely solely on subtle fills and soft elevation.
- Do not use sharp 0px or small 4px corners on main cards or interactive elements.
- Avoid flat, un-styled product imagery lacking dimensional lighting, pedestals, or casting shadows.
- Do not mix more than two distinct accent colors within a single card component.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
