Design a light-mode web interface screen: punchy commercial appetite appeal grounded in disciplined geometric card architecture and striking crimson accents.
LAYOUT
The page follows a structured vertical cadence anchored by a standard 1200px container. It initiates with a full-width hero featuring an aggressive diagonal color wedge, instantly followed by a floating horizontal category navigation bar. Mid-page sections transition into structured 3-column and 2-column card grids, broken rhythmically by an expansive dark #1A2332 application banner, concluding with a split social-proof and video feed row.
PALETTE (use these exact hex values)
- #D62327 — Brand Crimson: Hero callout background, primary action buttons, key brand headlines, and cart badges
- #FFFFFF — Canvas White: Primary surface for cards, horizontal category tray, and modal containers
- #F8F9FA — Canvas Muted: Page-level background tint providing contrast beneath pure white cards
- #1A2332 — Midnight Slate: Full-width feature card background for mobile application download conversion
- #18191F — Charcoal Black: Primary display headings, product names, price numerals, and prominent labels
- #6B7280 — Muted Slate: Product descriptions, category subtitles, metadata timestamps, and social handles
- #5FA543 — Fresh Herb: Promotional product pill tags indicating new arrivals or special items
- #E5E7EB — Hairline Border: Subtle card outlines, horizontal dividers, and outline-style tertiary buttons
TYPOGRAPHY
Typeface Montserrat (or Archivo, Poppins, Inter), weights 600/800/900. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 36px heading-lg, 56px display. Tracking -0.02em to -0.01em. The typographic tone is authoritative, loud, and appetizingly commercial without feeling disorderly. The bold condensed Montserrat/Archivo variant acts as an attention magnet, channeling classic fast-food print advertising into a sleek digital medium. Secondary text relies on Inter for rapid scanning and legibility of pricing and order parameters.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 56px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through layered dimensional cutouts rather than heavy drop shadows. Cards sit flat on a #F8F9FA surface with ultra-soft 0px 4px 16px rgba(0,0,0,0.04) ambient occlusion or hairline borders (#E5E7EB). True elevation is created when product imagery (e.g. burgers, cookie plates) breaks container edges, casting soft contact shadows beneath food items.
IMAGERY
Photography consists of hyper-crisp, studio-lit commercial food renders on transparent backgrounds, emphasizing crispy textures, steam, and saturated golden-brown frying tones. Ancillary cards use clean, un-graded documentary kitchen photography and minimal vector map graphics. Muddy, amateur, or low-contrast lifestyle photography is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of the 45-degree diagonal red wedge in the hero coupled with floating, transparent-backed food photography and circular price medallions ('ONLY 19.50 TL'). This creates an unmistakable retail-circular energy translated directly into modern web UI.
MUST
- Keep card backgrounds pure white (#FFFFFF) against the subtle #F8F9FA page surface.
- Render all prominent section headlines in uppercase bold weights with tight tracking.
- Use transparent PNG food cutouts that deliberately float and overlap card boundaries.
- Restrict bright crimson (#D62327) strictly to primary buttons, prices, and brand anchors.
AVOID
- Do not use dark or muddy backgrounds for product cards; food imagery requires pure white.
- Never substitute rounded pill buttons with sharp, unrounded rectangular borders.
- Avoid using uppercase styling for secondary body copy or metadata.
- Do not introduce multi-colored drop shadows; stick to soft 4% to 8% black blurs.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2064:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
