Design a light-mode web interface screen: an artisan bakery storefront paired seamlessly with morning operational analytics in rich petrol and warm flour tones.
LAYOUT
The viewport uses an asymmetrical fixed sidebar and flexible content canvas. The left 240px hosts navigation, a compact direct-message promo tile, and the persistent live cart indicator. The main stage splits horizontally: the upper zone pairs a 65% width hero promo banner with a 35% stack of quick-buy cards, while the lower zone arranges three equal-height analytics and table modules across a 3-column grid.
PALETTE (use these exact hex values)
- #01232B — Sidebar Petrol: Primary navigation bar background, anchoring the left column across full viewport height
- #F8F7F4 — Linen Canvas: Main backdrop canvas behind hero cards and analytics panels
- #FFFFFF — Pure White: Base surface for dashboard widgets, top product listings, and order tables
- #F6F1EA — Hero Dough Cream: Background container fill for the prominent daily special hero showcase
- #24B09B — Mint Turquoise: Telemetry graphs, progress fill meters, badge text, and active notification pips
- #0C363F — Soft Spruce: Background pill fill for selected navigation items and nested callout cards
- #1B2124 — Charcoal Espresso: Primary display titles, section headings, and primary monetary values
- #87939B — Pewter Mist: Metadata labels, timestamps, order hashes, and inactive icon strokes
- #CBE4E5 — Pastel Seafoam: Circular backdrop shape framing the hero bread and baguette imagery
- #E2DCF0 — Pale Thistle: Circular backdrop shape framing dessert photography like sweet muffins
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Gilroy, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 38px display. Tracking -0.03em on display, 0 on body. Plus Jakarta Sans delivers a geometric, highly readable tone with contemporary human warmth that bridges rustic bakery craftsmanship and fintech precision. Crisp alternate forms and tight letter spacing at display scales give titles an upscale culinary magazine feel, while clear numerals prevent ambiguity in tables. Substitute with DM Sans or Gilroy without loss of aesthetic voice.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 14px, buttons 12px. Spacing on a 8px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved almost entirely without drop shadows. Surfaces rely on structural contrast between the dark petrol navigation, the ivory linen canvas, and elevated crisp white card bodies. Where soft shadows occur, they are ultra-diffuse (0px 8px 24px rgba(0, 35, 43, 0.04)) to preserve cleanliness.
IMAGERY
Photography consists of hyper-crisp, naturally lit bakery items (golden sourdough, glazed baguettes, blueberry muffins) extracted as transparent cutouts. Each food hero sits slightly offset over a soft-toned circular graphic backdrop. Flat lifestyle photography, complex background scenes, or un-clipped product photos are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The layered 'halo cutout' bakery presentation: transparent artisan bread photography floating gracefully over a soft pastel circular disc (#CBE4E5) embedded within a dough-tinted (#F6F1EA) 24px curved card. Misuse occurs when standard rectangular stock photos are placed into the cards without extracting the bread silhouette or discarding the pastel backing disc.
MUST
- Ground cutout photography on soft, solid pastel circular shapes (#CBE4E5, #E2DCF0) to ensure high legibility.
- Maintain high contrast between the deep petrol sidebar (#01232B) and warm flour canvas (#F8F7F4).
- Use mint turquoise (#24B09B) sparingly, reserving it strictly for data peaks, pricing accents, and positive deltas.
- Enforce consistent 24px border radii on all top-level content cards and promotional hero blocks.
AVOID
- Never use generic square photo cutouts; imagery must be isolated transparent PNGs overlapping geometric tints.
- Avoid harsh black fills (#000000); use deep petrol teal (#01232B) for dark elements and text contrast.
- Do not introduce sharp 0px or small 4px corners on container cards; this destroys the friendly modern aesthetic.
- Never style trend chart lines with multiple contrasting colors; stick to unified turquoise line weights.
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 中尝试 
