---
version: alpha
name: Playful Quick-Serve Commerce Interface
description: "A quick-service food commerce design system for high-energy restaurant, snack, drink, bakery, pop-up, and takeaway experiences. It combines a warm cream canvas, tomato-red order actions, appetite-sized display type, ingredient evidence, menu tickers, nutrition/price proof, and motion that supports browsing and ordering instead of hiding the transaction."

colors:
  primary: "#f91814"
  primary-hover: "#d9100d"
  on-primary: "#fff7e8"
  accent: "#0e7a4f"
  accent-soft: "#dff3df"
  canvas: "#f5e3cd"
  canvas-warm: "#f8d9ae"
  surface-card: "#fff7e8"
  surface-raised: "#fffaf1"
  surface-hot: "#ffcf3a"
  ink: "#17120d"
  body: "#3b2a1d"
  muted: "#765f4b"
  subtle: "#a88767"
  hairline: "#d8b78e"
  charcoal: "#21170f"
  cheddar: "#ffba2d"
  pickle: "#0e7a4f"
  lettuce: "#83b64a"
  tomato: "#f2482e"
  sesame: "#f8d58a"
  bun: "#d98b3e"
  success: "#1f8a55"
  warning: "#bd6b13"
  danger: "#c92320"

typography:
  display-xl:
    fontFamily: "Bricolage Grotesque, Fraunces, Cooper Black, Arial Rounded MT Bold, system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 860
    lineHeight: 0.86
    letterSpacing: 0
  display-lg:
    fontFamily: "Bricolage Grotesque, Fraunces, Cooper Black, Arial Rounded MT Bold, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 820
    lineHeight: 0.92
    letterSpacing: 0
  heading-md:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 780
    lineHeight: 1.14
    letterSpacing: 0
  heading-sm:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 760
    lineHeight: 1.28
    letterSpacing: 0
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.55
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 520
    lineHeight: 1.46
    letterSpacing: 0
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 820
    lineHeight: 1.24
    letterSpacing: 0.04em
    textTransform: uppercase
  mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 12px
    fontWeight: 620
    lineHeight: 1.42
    letterSpacing: 0
    fontVariantNumeric: "tabular-nums"

rounded:
  xs: 4px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 34px
  pill: 9999px

spacing:
  base: 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 18px
  lg: 28px
  xl: 44px
  xxl: 72px
  section: 104px

components:
  order-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: 13px 20px
  menu-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 18px
  nutrition-badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 12px
  ingredient-chip:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.body}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 12px
  takeaway-card:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 20px

motion:
  appetite-loader:
    purpose: "Set energy before content loads, then quickly reveal menu and order path."
    properties: "opacity, transform, clip-path"
    duration: "500ms to 900ms"
    fallback: "Use a static loading label and show the menu CTA immediately."
  menu-ticker:
    purpose: "Create appetite and product rhythm without becoming the only navigation."
    properties: "transform"
    duration: "continuous, slow, pausable"
    fallback: "Use a static row of menu categories."
  ingredient-reveal:
    purpose: "Explain freshness, layers, and customization."
    properties: "transform, opacity"
    duration: "180ms to 420ms"
    fallback: "Use a static ingredient stack with labels."
  page-transition:
    purpose: "Connect menu, details, cart, and confirmation without losing order context."
    properties: "opacity, transform"
    duration: "180ms to 360ms"
    fallback: "Use direct route changes with preserved cart state."

layout:
  hero: "First viewport shows a real food object or credible product rendering, menu entry, price or nutrition signal, and a persistent order CTA."
  grid: "Desktop uses a two-plane hero: appetite type and order proof on one side, product/ingredient stage on the other. Mobile stacks product, CTA, menu chips, and cart state in that order."
  density: "High-energy display type is balanced by compact transaction modules: price, calories, ingredients, pickup/delivery, and cart state."
  media: "Use licensed or owned food photography, generated placeholders, or CSS product illustrations. Do not copy source case imagery, video, brand marks, or menu names."

guidance:
  do:
    - "Keep the order action visible in the first viewport and after scroll."
    - "Pair playful copy with concrete commerce data: price, ingredients, calories, pickup time, cart count, and location."
    - "Use red for ordering, green for freshness/quality evidence, yellow for appetite highlights, and charcoal for checkout or takeaway modules."
    - "Give every animated menu or ingredient element a reduced-motion static equivalent."
  dont:
    - "Do not turn the page into only a looping food animation."
    - "Do not hide price, order CTA, or cart state behind hover-only interactions."
    - "Do not copy CRAV, Anyflow, their imagery, their wordmark, their menu names, videos, or exact transitions."
    - "Do not let oversized type cause horizontal overflow on mobile."

caseStudy:
  source: "Awwwards Crav Burgers Site of the Day, June 13 2026"
  url: "https://www.awwwards.com/sites/crav-burgers"
  analysis: "Awwwards lists Crav Burgers as a 7.25/10 Site of the Day with E-Commerce, Food & Drink, Hotel / Restaurant, Animation, Colorful, Typography, Web Fonts, 404 pages, Next.js, SVG, and GSAP signals. Its public palette lists #f5e3cd and #f91814. The live site exposes transaction-oriented food signals including smashed fresh, bold flavor, Order Now, calories, high protein, fresh ingredients, organic/quality claims, takeaway cities, and ingredient layering. The reusable pattern is not the brand; it is appetite-first commerce where motion and type keep pushing users back toward menu comprehension and ordering."
---

# Playful Quick-Serve Commerce Interface

Use this design system for restaurants and food-commerce experiences that need energy without losing the ordering path. It is strongest for quick-service restaurants, burger shops, coffee, drinks, bakeries, food trucks, pop-ups, takeaway booking, and campaign pages where product desire and transaction clarity must share the first screen.

The system turns playful food visuals into a working commerce surface. The first viewport must show a product, a menu entry, a price or nutrition signal, and a stable order CTA. Motion, display type, and ingredient theatrics are allowed only when they help users understand the menu, ingredients, pickup/delivery state, or cart.

## Overview

The core idea is appetite with proof. Food sites often over-index on images and slogans; commerce sites often flatten food into utility. This interface keeps both: large type and color create appetite, while badges, menu cards, ingredient labels, and cart state make the page actionable.

Use the source case as research evidence, not as visual material. The design language is abstracted from public Awwwards metadata and live-site content around playful burger ordering, fast interactions, dynamic motion, cream/red palette, ingredient layers, nutrition claims, takeaway contexts, and order actions.

## Colors

### Action

- `primary` #f91814 is the order action. Use it for Order Now, Add, Checkout, selected menu tab, and confirmation emphasis.
- `primary-hover` #d9100d is the pressed state. Do not use opacity-only hover on food-commerce CTAs.
- `on-primary` #fff7e8 keeps red buttons warm and readable.

### Appetite

- `canvas` #f5e3cd is the warm base. It should feel like packaging paper, not a beige lifestyle blog.
- `cheddar` #ffba2d and `sesame` #f8d58a are small appetite accents for highlights, product details, and ingredient callouts.
- `tomato` #f2482e supports food illustration and warning-adjacent appetite moments, but primary actions stay in `primary`.

### Evidence

- `pickle` #0e7a4f and `lettuce` #83b64a communicate freshness, quality, vegetarian, ingredient, or nutrition evidence.
- `charcoal` #21170f creates contrast for checkout, takeaway, and footer modules.
- `hairline` #d8b78e defines cards and rails without cooling the palette into generic gray.

## Typography

Display type is big, round, and loud, but letter spacing stays at 0. The best open substitutes are Bricolage Grotesque, Fraunces, Baloo 2, or another bold rounded display face with strong counters. Do not use narrow condensed display type; the system needs flavor and impact, not sports signage.

UI text uses Inter or system sans. Product details, ingredients, and price should be plain and scan-friendly. Use mono only for order numbers, pickup times, inventory counts, calorie labels, and cart IDs.

## Layout

### First Viewport

The first screen should contain:

- Product object or credible food rendering.
- Brand or category signal.
- Menu entry.
- Price, calorie, ingredient, or pickup evidence.
- Stable Order CTA.
- Cart or order state when ordering is possible.

If the hero only says "bold flavor" over a looping video, it is not enough. The interface must prove that the user can choose, customize, and order.

### Product Stage

Use a staged product composition: burger, drink, pastry, bowl, or ingredient stack at the center; appetite copy and CTA nearby; evidence chips around the edges. Keep label positions stable so motion does not shift layout.

### Menu Grid

Menu cards should expose item name, short description, price, one nutrition or quality signal, and add action. Avoid hidden hover-only descriptions. On mobile, cards should keep image, price, and add action visible without requiring horizontal scroll.

### Ingredient Layer

Ingredient layers can be playful, but each layer needs text. Users should be able to understand bun, sauce, protein, greens, cheese, spice, or customization without relying on animation.

### Takeaway & Location

Takeaway cards can be dark and high contrast. Include city/location, pickup/delivery time, packaging state, and CTA. Do not show city cards as decorative postcards without ordering relevance.

## Components

### Order Button

The primary order button uses `primary`, pill radius, high contrast, and at least 44px height. It can include cart count or price, but never becomes an icon-only mystery action.

### Menu Ticker

The ticker is for energy and category rhythm: Burgers, Fries, Sauces, Drinks, Pickup, Specials. It must pause on hover/focus or be replaced by a static chip row under reduced motion.

### Nutrition Badge

Nutrition badges summarize proof: High Protein, 450 kcal, Fresh Ingredients, Vegan Option, Spicy, New. They are support signals, not medical claims.

### Ingredient Chip

Ingredient chips label visible layers. Use them around product drawings, on customization rows, and in detail pages.

### Takeaway Card

Takeaway cards use `charcoal` with warm text and red CTA. They work for locations, pickup slots, delivery radius, or packaging content.

## Interaction

Motion should make ordering feel alive, but it cannot obscure the transaction. Good motion includes:

- Loader that exits quickly and reveals CTA.
- Ingredient reveal tied to scroll or selection.
- Menu card add-to-cart feedback.
- Cart drawer transition that preserves selected item and price.
- Page transition between menu, detail, and checkout under 360ms.

Avoid scroll hijacking, long preloader sequences, cursor-only reveals, and motion that blocks price, CTA, or cart state. In `prefers-reduced-motion`, use static product stages, visible labels, and direct route changes.

## Responsive Rules

Mobile order:

1. Product image or rendering.
2. Order CTA and price.
3. Menu chips.
4. Ingredient or nutrition badges.
5. Cart state.
6. Supporting story.

Large display type must wrap safely and never create horizontal overflow. Repeated words can become two lines, but should not push CTA below the first screen on common mobile heights.

## Accessibility

- Buttons need visible text, not only illustrated food labels.
- Menu cards need headings, price text, and accessible add controls.
- Animated tickers require pause/reduced-motion behavior.
- Do not use red/green alone for spicy, vegetarian, unavailable, or selected states; add text labels.
- Food photography requires alt text that names the dish and important state.
- Cart and add feedback should use live regions only when it changes order state.

## Case Study

Awwwards lists Crav Burgers as Site of the Day on June 13, 2026 with a 7.25 score. The public listing identifies Food & Drink, E-Commerce, Hotel / Restaurant, Animation, Colorful, Typography, Web Fonts, 404 pages, Next.js, SVG, and GSAP. It also exposes the source palette `#f5e3cd` and `#f91814`, and highlights footer animation, page transition, loader animation, and 404 elements.

The live site copy reveals why the style works as commerce rather than decoration: it starts from product appetite, repeats "smashed fresh" and "bold flavor", keeps Order Now available, shows high-protein/fresh-ingredient signals, explains ingredient layers, and gives takeaway city contexts. The reusable lesson is to bind every expressive surface to product choice, food proof, location, and ordering.

## Source Links

- Awwwards Crav Burgers: https://www.awwwards.com/sites/crav-burgers
- Crav Burgers live site: https://www.cravburgers.shop/
- Awwwards loader element: https://www.awwwards.com/inspiration/loader-animation-crav-burgers
- Awwwards Food & Drink collection: https://www.awwwards.com/websites/food-drink/