ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
menulio/docs/qr-example.md
T

14 KiB
Raw Permalink Blame History

The Urban Burger - Tabletop QR Menu Stand Design System

Color Palette

  • Forest Green Background: #1c3e2b / #163323 (ambient tabletop / environment backdrop)
  • Rust / Terracotta Leather Plaque: #a64d2a / #b35431 (primary card & stand body)
  • Cream / Warm Alabaster QR Inset: #f8f3eb (QR code container background)
  • Rust QR Pattern: #a64d2a / #944222 (custom branded QR pixel matrix)
  • Warm Golden Wheat: #f5be72 / #e9b366 (logo outline, flame accents, hand-drawn icons)
  • Pure White / Cream UI Text: #ffffff / #fef8f0 (display headers, scan instructions, category list)
  • Subtle Divider / Border Lines: #c96b46 / rgba(255, 255, 255, 0.2) (category separation rules)

Typography

  • Display / Headers: Montserrat, Plus Jakarta Sans, or Oswald (weights 800-900, uppercase, clean geometric sans-serif with tight line-height)
  • Logo Typography: Stylized bold outline font with flame icon ligature (or stylized custom geometric sans)
  • Instructional & Body: Inter, Plus Jakarta Sans, or DM Sans (weights 500-700, generous tracking 0.1em to 0.2em)

Font imports:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

Spacing & Layout

  • Stand Plaque Dimensions: 360px – 400px width, ~700px height (aspect ratio ~1:1.8 portrait tabletop stand)
  • Border Radius: 28px (rounded-[2rem]) on outer card with physical drop shadow
  • QR Plate Corner Radius: 24px (rounded-3xl) with inset shadow
  • Hierarchy Order:
    1. Brand Logo (Top)
    2. Action Callout (DIGITAL MENU / SCAN TO ORDER)
    3. Centered Large QR Code Box with custom rounded finder patterns
    4. Camera Prompt (Use your phone's camera)
    5. Category Quick-View List (Burgers, Fries, Shakes, Vegan Options) flanked by illustrative line icons

Reusable Components

1. Urban Burger Brand Badge & Header

<div class="flex flex-col items-center text-center">
  <!-- Stylized Brand Logo -->
  <div class="border-2 border-[#f5be72] rounded-xl px-4 py-2 flex flex-col items-center mb-5 bg-[#a64d2a]/60 shadow-sm">
    <div class="flex items-center gap-1.5 text-[#f5be72] font-black text-xl tracking-wider uppercase font-['Montserrat']">
      <span>THE URBAN</span>
      <!-- Flame Icon -->
      <svg class="w-5 h-5 fill-[#f5be72]" viewBox="0 0 24 24">
        <path d="M12 2c1.5 3.5 4 6.5 4 10 0 4.42-3.58 8-8 8s-8-3.58-8-8c0-3.5 2.5-6.5 4-10 .5 2 1.5 3.5 3 4.5.5-2.5 2-5 5-6.5z"/>
      </svg>
    </div>
    <span class="text-[#f5be72] font-black text-2xl tracking-[0.25em] uppercase font-['Montserrat'] -mt-1">
      BURGER
    </span>
  </div>

  <!-- Scan Call to Action -->
  <h2 class="text-white font-['Montserrat'] font-black text-2xl sm:text-3xl tracking-tight uppercase leading-[0.95] drop-shadow-sm">
    DIGITAL MENU<br>
    <span class="tracking-wide">SCAN TO ORDER</span>
  </h2>
</div>

2. Custom Branded QR Code Box

<div class="w-56 h-56 sm:w-64 sm:h-64 bg-[#f8f3eb] rounded-[2rem] p-5 shadow-inner flex items-center justify-center relative border border-black/10 my-6">
  <!-- QR Code SVG with Custom Rust Pixels -->
  <svg class="w-full h-full text-[#a64d2a]" viewBox="0 0 100 100" fill="currentColor">
    <!-- Top-Left Finder -->
    <rect x="5" y="5" width="28" height="28" rx="8" fill="currentColor"/>
    <rect x="10" y="10" width="18" height="18" rx="5" fill="#f8f3eb"/>
    <rect x="14" y="14" width="10" height="10" rx="3" fill="currentColor"/>
    
    <!-- Top-Right Finder -->
    <rect x="67" y="5" width="28" height="28" rx="8" fill="currentColor"/>
    <rect x="72" y="10" width="18" height="18" rx="5" fill="#f8f3eb"/>
    <rect x="76" y="14" width="10" height="10" rx="3" fill="currentColor"/>
    
    <!-- Bottom-Left Finder -->
    <rect x="5" y="67" width="28" height="28" rx="8" fill="currentColor"/>
    <rect x="10" y="72" width="18" height="18" rx="5" fill="#f8f3eb"/>
    <rect x="14" y="76" width="10" height="10" rx="3" fill="currentColor"/>
    
    <!-- Data Blocks -->
    <rect x="38" y="8" width="8" height="8" rx="2"/>
    <rect x="50" y="8" width="8" height="14" rx="2"/>
    <rect x="38" y="22" width="14" height="8" rx="2"/>
    <rect x="8" y="38" width="8" height="12" rx="2"/>
    <rect x="20" y="42" width="12" height="8" rx="2"/>
    <rect x="38" y="38" width="24" height="24" rx="4"/>
    <rect x="42" y="42" width="16" height="16" rx="2" fill="#f8f3eb"/>
    <rect x="46" y="46" width="8" height="8" rx="2" fill="currentColor"/>
    <rect x="68" y="38" width="10" height="14" rx="2"/>
    <rect x="82" y="42" width="10" height="10" rx="2"/>
    <rect x="38" y="68" width="12" height="10" rx="2"/>
    <rect x="54" y="72" width="8" height="18" rx="2"/>
    <rect x="68" y="68" width="12" height="12" rx="2"/>
    <rect x="84" y="72" width="8" height="8" rx="2"/>
    <rect x="68" y="84" width="24" height="8" rx="2"/>
  </svg>
</div>

3. Menu Quick-Categories Section with Floating Icons

<div class="w-full relative px-6 mt-2 text-center">
  <p class="text-white/90 text-sm font-['Plus_Jakarta_Sans'] tracking-wide mb-4 font-medium">
    Use your phone's camera
  </p>

  <!-- Left Burger Line Icon -->
  <div class="absolute left-2 bottom-3 text-[#f5be72] opacity-80">
    <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
      <path d="M4 11a8 8 0 0 1 16 0H4z"/>
      <rect x="3" y="14" width="18" height="3" rx="1.5"/>
      <path d="M5 20a3 3 0 0 0 14 0H5z"/>
    </svg>
  </div>

  <!-- Right Drink / Shake Line Icon -->
  <div class="absolute right-2 bottom-3 text-[#f5be72] opacity-80">
    <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
      <path d="M7 8h10l-1.5 13h-7L7 8z"/>
      <path d="M5 8h14"/>
      <path d="M12 2v6"/>
      <path d="M9 2l3 6"/>
    </svg>
  </div>

  <!-- Category List -->
  <div class="flex flex-col gap-2 max-w-[200px] mx-auto text-white font-['Montserrat'] font-extrabold uppercase tracking-widest text-base sm:text-lg">
    <div class="py-1">BURGERS</div>
    <div class="w-full h-[1px] bg-white/20"></div>
    <div class="py-1">FRIES</div>
    <div class="w-full h-[1px] bg-white/20"></div>
    <div class="py-1">SHAKES</div>
    <div class="w-full h-[1px] bg-white/20"></div>
    <div class="py-1 text-sm sm:text-base">VEGAN OPTIONS</div>
  </div>
</div>

Full Responsive Standalone HTML / CSS Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>The Urban Burger - Tabletop QR Menu</title>
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            tableGreen: '#1a3a29',
            tableGreenDark: '#12281c',
            rustStand: '#a64d2a',
            rustStandDark: '#8e3f20',
            qrCream: '#f8f3eb',
            goldWheat: '#f5be72',
          },
          fontFamily: {
            display: ['Montserrat', 'sans-serif'],
            sans: ['Plus Jakarta Sans', 'sans-serif']
          }
        }
      }
    }
  </script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">

  <style>
    body {
      background-color: #1a3a29;
      background-image: 
        radial-gradient(circle at 50% 50%, rgba(26, 58, 41, 0.9) 0%, rgba(14, 32, 22, 1) 100%),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, transparent 2px, transparent 8px);
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .leather-texture {
      background-color: #a64d2a;
      background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4 sm:p-8 select-none">

  <!-- Outer Tabletop QR Stand Plaque -->
  <main class="w-full max-w-[380px] leather-texture rounded-[2.5rem] p-6 sm:p-7 flex flex-col items-center text-white relative shadow-[0_25px_60px_rgba(0,0,0,0.6),0_4px_10px_rgba(0,0,0,0.3)] border-2 border-black/30">
    
    <!-- Subtle Inner Border Accent -->
    <div class="absolute inset-2.5 rounded-[2rem] border border-white/10 pointer-events-none"></div>

    <!-- 01. Top Brand Badge -->
    <header class="flex flex-col items-center text-center mt-2 z-10">
      <div class="border-2 border-goldWheat rounded-xl px-4 py-1.5 flex flex-col items-center mb-5 bg-[#a64d2a]/80 shadow-md">
        <div class="flex items-center gap-1 text-goldWheat font-black text-lg sm:text-xl tracking-wider uppercase font-display">
          <span>THE URBAN</span>
          <!-- Flame Icon -->
          <svg class="w-4 h-4 sm:w-5 sm:h-5 fill-goldWheat" viewBox="0 0 24 24">
            <path d="M12 2c1.5 3.5 4 6.5 4 10 0 4.42-3.58 8-8 8s-8-3.58-8-8c0-3.5 2.5-6.5 4-10 .5 2 1.5 3.5 3 4.5.5-2.5 2-5 5-6.5z"/>
          </svg>
        </div>
        <span class="text-goldWheat font-black text-2xl tracking-[0.22em] uppercase font-display -mt-1">
          BURGER
        </span>
      </div>

      <!-- Main Action Callout -->
      <h1 class="font-display font-black text-2xl sm:text-3xl tracking-tight uppercase leading-[0.92] text-white drop-shadow">
        DIGITAL MENU<br>
        <span class="tracking-wider">SCAN TO ORDER</span>
      </h1>
    </header>

    <!-- 02. Centered Branded QR Code Box -->
    <section class="w-60 h-60 sm:w-64 sm:h-64 bg-qrCream rounded-3xl p-5 shadow-2xl flex items-center justify-center my-6 relative border-2 border-black/15 z-10">
      <svg class="w-full h-full text-rustStand" viewBox="0 0 100 100" fill="currentColor">
        <!-- Top-Left Target -->
        <rect x="6" y="6" width="28" height="28" rx="8" fill="currentColor"/>
        <rect x="11" y="11" width="18" height="18" rx="5" fill="#f8f3eb"/>
        <rect x="15" y="15" width="10" height="10" rx="3" fill="currentColor"/>
        
        <!-- Top-Right Target -->
        <rect x="66" y="6" width="28" height="28" rx="8" fill="currentColor"/>
        <rect x="71" y="11" width="18" height="18" rx="5" fill="#f8f3eb"/>
        <rect x="75" y="15" width="10" height="10" rx="3" fill="currentColor"/>
        
        <!-- Bottom-Left Target -->
        <rect x="6" y="66" width="28" height="28" rx="8" fill="currentColor"/>
        <rect x="11" y="71" width="18" height="18" rx="5" fill="#f8f3eb"/>
        <rect x="15" y="75" width="10" height="10" rx="3" fill="currentColor"/>
        
        <!-- Data Matrix Pattern -->
        <rect x="38" y="8" width="8" height="8" rx="2"/>
        <rect x="50" y="8" width="8" height="14" rx="2"/>
        <rect x="38" y="22" width="14" height="8" rx="2"/>
        <rect x="8" y="38" width="8" height="12" rx="2"/>
        <rect x="20" y="42" width="12" height="8" rx="2"/>
        <rect x="38" y="38" width="24" height="24" rx="5"/>
        <rect x="42" y="42" width="16" height="16" rx="3" fill="#f8f3eb"/>
        <rect x="46" y="46" width="8" height="8" rx="2" fill="currentColor"/>
        <rect x="68" y="38" width="10" height="14" rx="2"/>
        <rect x="82" y="42" width="10" height="10" rx="2"/>
        <rect x="38" y="68" width="12" height="10" rx="2"/>
        <rect x="54" y="72" width="8" height="18" rx="2"/>
        <rect x="68" y="68" width="12" height="12" rx="2"/>
        <rect x="84" y="72" width="8" height="8" rx="2"/>
        <rect x="68" y="84" width="24" height="8" rx="2"/>
      </svg>
    </section>

    <!-- 03. Prompt & Category Highlights -->
    <footer class="w-full relative px-4 text-center z-10 pb-2">
      <p class="text-white/90 text-sm font-sans tracking-wide mb-3 font-semibold">
        Use your phone's camera
      </p>

      <!-- Left Decorative Burger Icon -->
      <div class="absolute left-1 bottom-4 text-goldWheat/90">
        <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
          <path d="M4 10a8 8 0 0 1 16 0H4z"/>
          <rect x="3" y="13" width="18" height="3" rx="1.5"/>
          <path d="M5 19a3 3 0 0 0 14 0H5z"/>
        </svg>
      </div>

      <!-- Right Decorative Shake Icon -->
      <div class="absolute right-1 bottom-4 text-goldWheat/90">
        <svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
          <path d="M7 8h10l-1.5 13h-7L7 8z"/>
          <path d="M5 8h14"/>
          <path d="M12 2v6"/>
          <path d="M9 2l3 6"/>
        </svg>
      </div>

      <!-- Category Text Stack -->
      <div class="flex flex-col gap-1.5 max-w-[190px] mx-auto text-white font-display font-extrabold uppercase tracking-widest text-base">
        <div class="py-0.5">BURGERS</div>
        <div class="w-full h-[1px] bg-white/25"></div>
        <div class="py-0.5">FRIES</div>
        <div class="w-full h-[1px] bg-white/25"></div>
        <div class="py-0.5">SHAKES</div>
        <div class="w-full h-[1px] bg-white/25"></div>
        <div class="py-0.5 text-sm tracking-wider">VEGAN OPTIONS</div>
      </div>
    </footer>

  </main>
</body>
</html>

Design Philosophy

  • Tactile Leather Plaque Aesthetic: Earthy rust-terracotta background paired with an ambient forest green setting to replicate physical wooden/leather restaurant table stands.
  • High-Scanability Contrast: Clean high-contrast cream QR card embedded with rust custom rounded pixels for instant mobile scanning.
  • Bold Urban Typography: Punchy condensed uppercase headings paired with clean line-art food icons for quick menu category orientation.
Reference in New Issue View Git Blame Copy Permalink