A modern casual restaurant website built around food photography and real conversion goals. Warm peach hero with split text-left photo-right layout, tabbed menu with circular dish images and dotted-border treatment, a bento-grid deals section, WhatsApp order button, and a phone number in the nav. Designed to feel like a real restaurant site people actually order from — not a template.
What Is This Style?
A modern casual restaurant site built around one conversion goal: get people to order. The warm peach hero with food photography on the right catches attention instantly. The tabbed menu with circular dotted-border dish images makes browsing feel considered, not generic. The bento deals grid creates urgency without feeling cheap. The WhatsApp floating button and phone number in the nav remove every barrier between hunger and an order.
The color system is entirely warm — peach background, orange primary, no cool tones anywhere. Food and blue don't work. Food and orange always work.
The Vibe
The food is the hero. The site is the waiter.
Warm. Appetizing. Frictionless. This is a site where you scroll the menu and immediately reach for your phone — to WhatsApp your order. Every design decision serves that moment.
Who Is Using It?
Sweetgreen, Shake Shack, and Leon use variants of this pattern — clean photography-led layout, prominent menu, friction-free ordering CTA. In local markets where WhatsApp is the primary ordering channel (South Asia, Middle East, Africa), this pattern is the standard for any food business with a serious digital presence.
The dotted circular dish image treatment is the signature element of this specific style — it appears in dozens of independent restaurant site templates because it makes food photography feel curated rather than stock.
When to Use It
Local restaurants, cafes, cloud kitchens, and food businesses where WhatsApp and phone are the primary order channels. Especially strong for markets where customers expect to order via WhatsApp rather than a checkout flow. Avoid it for fine dining (needs a darker, more editorial approach) or food delivery aggregators (needs a product-catalogue e-commerce layout).
Design Rules (Deep Dive)
The Peach Hero Is Non-Negotiable
The hero background is #FFEFE7 — warm peach — for the entire section. Not an image overlay. Not a gradient. Not white. The peach creates warmth before the food photography even loads, and it makes the orange CTAs (#FF7A2B) feel natural rather than aggressive. The split layout (text left, tall portrait food photo right) works because the peach field unifies both columns.
The Dotted Circular Dish Image
Every dish card uses a circular crop with a dashed orange ring (border: 2.5px dashed #FFBB99; border-radius: 50%). On hover, the ring color shifts to full orange (#FF7A2B). This treatment does two things: it differentiates the layout from generic food site templates, and it makes the emoji or actual photo feel intentional rather than rectangular and card-like. The dish image must always be circular — never square, never rectangular.
Orange Is the Only Interactive Color
Every button, active tab indicator, price, link, section label, and CTA uses #FF7A2B. The hover state always darkens to #E8661A — never lighten, never change hue. Green (#3D7A5F) appears only on dietary tags (Vegan, GF). WhatsApp green (#25D366) appears only on the floating button. These three colors never touch each other in the same visual block.
The Bento Deals Grid
Four card types (dark charcoal, solid orange, light peach tint, white bordered) in an asymmetric grid (2fr 1fr 1fr with the tall card spanning 2 rows). This replaces a conventional promotions section with an editorial grid that creates visual interest and communicates multiple deals without feeling like a flyer. Each card type signals a different deal tier — dark for flagship offers, orange for time-limited, light for standard deals, white for informational.
WhatsApp as Primary CTA
The floating WhatsApp button is not an afterthought — it is the primary conversion mechanism. It is always visible, always pulsing, and always pre-fills the message with the restaurant name. The hero CTA also links directly to WhatsApp, not to a contact form. The phone number in the nav is clickable on mobile. These three touchpoints together remove every possible friction between a hungry visitor and a completed order.
The Trust Strip
Four trust signals between the hero and the menu (Fresh Daily, Free Delivery, WhatsApp Orders, 30-Min Delivery) set the expectation before the visitor sees the menu. These are not decorative — each one addresses a specific objection a potential customer might have. The strip uses warm #FFF8F3 background to maintain the peach warmth of the hero.
The Core Philosophy
A restaurant website fails if people visit it and don't order. Every design decision in this system points toward that single outcome. The peach hero creates appetite. The photography creates desire. The dotted dish images create consideration. The bento deals create urgency. The WhatsApp button creates action.
The phone number in the nav is the most important trust signal on the page. It tells visitors: there is a real person here. You can call them. This is not a faceless delivery app. For local restaurants competing with aggregator platforms, that signal is worth more than any animation or illustration.
Design for the order, not for the award.