<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Roboto+Flex:ital,opsz,wght@0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;1,8..144,400&display=swap'><style>.bmx-root{-webkit-font-smoothing:antialiased;text-align:left}
.bmx-root h1,.bmx-root h2,.bmx-root h3,.bmx-root h4,.bmx-root p,.bmx-root ul,.bmx-root li,.bmx-root figure{margin:0;padding:0;line-height:1.2;font-family:inherit;letter-spacing:normal;text-transform:none}
.bmx-root p,.bmx-root li{line-height:inherit}
.bmx-root h1,.bmx-root h2,.bmx-root h3{font-weight:400}
.bmx-root label{display:block;margin:0;font-weight:inherit}
.bmx-root code{background:none;padding:0;border:0;font-family:inherit}
.bmx-root small{font-size:inherit}
.bmx-root a{text-decoration:inherit}
.bmx-root section{display:block;width:auto}
#case-standard-hero{display:none!important}
.bmx-root{color-scheme: light;--page:#f5f5f5;--ink:#131417;--ink-2:#5b5e66;--rule:#dcdcde;--panel:#ffffff;--f-site:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--bm-content:#0d3337;--bm-body:#4a5568;--bm-accent:#eff0f7;--bm-subtle:#eef2f3;--bm-inverse:#0d3337;--bm-inverse-content:#eff0f7;--bm-primary-hover:#092326;--bm-orange:#eb4700;--bm-orange-hover:#d64100;--bm-hover:#e0e7e9;--bm-disabled:#b3c4c9;--bm-error:#d21d1d;--bm-success:#25835c;--bm-white:#ffffff;--f-bm:'Roboto Flex','Roboto',system-ui,sans-serif;--r-btn:8px;--r-card:16px;--r-hero:24px}
.bmx-root,.bmx-root *{box-sizing:border-box}
.bmx-root{background:var(--page);color:var(--ink);font-family:var(--f-site);font-size:16px;line-height:1.55;margin:0}
.bmx-root .bmx-wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bmx-root a{color:inherit}
.bmx-root h1,.bmx-root h2,.bmx-root h3{font-weight:400;text-wrap:balance;margin:0}
.bmx-root p{margin:0}
.bmx-root .bmx-small{font-size:12px;color:var(--ink-2)}
.bmx-root .bmx-panel{border-radius:28px;overflow:hidden;position:relative}
.bmx-root .bmx-panel-pad{padding:clamp(20px,5vw,64px)}
.bmx-root .bmx-caption{font-size:13px;color:var(--ink-2);margin-top:12px}
.bmx-root .bmx-kicker-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;font-size:16px}
.bmx-root .bmx-kicker-row b{font-weight:500}
.bmx-root .bmx-intro{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,6vw,96px);padding-block:56px 40px}
.bmx-root .bmx-intro h1{font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-0.02em}
.bmx-root .bmx-meta-row{border-bottom:1px solid var(--rule);padding-block:14px 16px}
.bmx-root .bmx-meta-row:first-child{padding-top:0}
.bmx-root .bmx-meta-row p:last-child{font-size:20px;margin-top:6px}
.bmx-root .bmx-lede{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:46ch}
@media (max-width:820px){.bmx-root .bmx-intro{grid-template-columns:1fr}
}
.bmx-root section{padding-block:56px}
.bmx-root .bmx-sec-head{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,6vw,96px);margin-bottom:36px}
.bmx-root .bmx-sec-head h2{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-0.01em}
.bmx-root .bmx-sec-head .bmx-body{display:grid;gap:14px;font-size:17px;max-width:62ch;min-width:0}
.bmx-root .bmx-sec-label{font-size:12px;color:var(--ink-2);margin-bottom:10px;letter-spacing:.04em}
@media (max-width:820px){.bmx-root .bmx-sec-head{grid-template-columns:1fr}
}
.bmx-root .bmx-stats{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule)}
.bmx-root .bmx-stat{padding:20px 16px 4px 0;border-right:1px solid var(--rule)}
.bmx-root .bmx-stat:last-child{border-right:0}
.bmx-root .bmx-stat b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:400;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.bmx-root .bmx-stat span{font-size:13px;color:var(--ink-2)}
.bmx-root .bmx-stat + .bmx-stat{padding-left:16px}
@media (max-width:820px){.bmx-root .bmx-stats{grid-template-columns:repeat(3,1fr)}
.bmx-root .bmx-stat:nth-child(3){border-right:0}
.bmx-root .bmx-stat:nth-child(4){padding-left:0}
}
@media (max-width:480px){.bmx-root .bmx-stats{grid-template-columns:repeat(2,1fr)}
.bmx-root .bmx-stat{border-right:0;padding-left:0!important}
}
.bmx-root .bmx-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bmx-root .bmx-principle{background:var(--panel);border-radius:20px;padding:24px;display:grid;gap:10px;align-content:start}
.bmx-root .bmx-principle .bmx-n{font-size:12px;color:var(--ink-2)}
.bmx-root .bmx-principle h3{font-size:20px}
.bmx-root .bmx-principle p{color:var(--ink-2);font-size:15px}
@media (max-width:820px){.bmx-root .bmx-principles{grid-template-columns:1fr}
}
.bmx-root .bmx-bm{font-family:var(--f-bm);color:var(--bm-content)}
.bmx-root .bmx-bm-eyebrow{font:700 12px/16px var(--f-bm);letter-spacing:1.2px;text-transform:uppercase;color:var(--bm-orange)}
.bmx-root .bmx-bm-tag{display:inline-block;background:var(--bm-orange);color:var(--bm-white);font:500 11px/16px var(--f-bm);padding:3px 8px;border-radius:var(--r-btn)}
.bmx-root .bmx-bm-tag.bmx-soft{background:var(--bm-subtle);color:var(--bm-content)}
.bmx-root .bmx-bm-btn{display:inline-flex;align-items:center;gap:6px;font:600 15px/24px var(--f-bm);padding:8px 16px;border-radius:var(--r-btn);border:1px solid transparent;white-space:nowrap}
.bmx-root .bmx-bm-btn.bmx-primary{background:var(--bm-orange);color:var(--bm-white)}
.bmx-root .bmx-bm-btn.bmx-secondary{background:var(--bm-content);color:var(--bm-white)}
.bmx-root .bmx-bm-btn.bmx-outline{background:var(--bm-white);color:var(--bm-content);border-color:var(--bm-content)}
.bmx-root .bmx-bm-btn.bmx-ghost{background:transparent;color:var(--bm-content)}
.bmx-root .bmx-bm-btn.bmx-disabled{background:var(--bm-hover);color:var(--bm-disabled)}
.bmx-root .bmx-hero-panel{background:#dfe6e8}
.bmx-root .bmx-browser{background:var(--bm-white);border-radius:var(--r-card);box-shadow:0 30px 60px -30px rgba(13,51,55,.35);overflow:hidden;max-width:1000px;margin:0 auto}
.bmx-root .bmx-b-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:1px solid var(--bm-subtle)}
.bmx-root .bmx-logo{display:flex;align-items:center;gap:8px;font:600 17px/1 var(--f-bm);color:var(--bm-content)}
.bmx-root .bmx-logo i{width:20px;height:20px;border-radius:50%;background:var(--bm-orange);display:inline-block;position:relative}
.bmx-root .bmx-logo i::after{content:'';position:absolute;inset:6px 5px;border-top:2px solid var(--bm-white);border-bottom:2px solid var(--bm-white)}
.bmx-root .bmx-b-nav{display:flex;gap:6px;font:500 12px/1 var(--f-bm)}
.bmx-root .bmx-b-nav span{padding:7px 10px;border-radius:6px}
.bmx-root .bmx-b-nav span.bmx-on{background:var(--bm-subtle)}
.bmx-root .bmx-b-actions{display:flex;gap:8px}
.bmx-root .bmx-b-actions .bmx-bm-btn{font-size:12px;padding:5px 10px;line-height:18px}
.bmx-root .bmx-b-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:32px 40px 24px;align-items:center}
.bmx-root .bmx-b-hero h3{font:800 clamp(22px,3vw,36px)/1.12 var(--f-bm);letter-spacing:-.5px;margin-top:10px}
.bmx-root .bmx-b-meta{font:400 12px/18px var(--f-bm);color:var(--bm-body);margin-top:12px}
.bmx-root .bmx-photo{aspect-ratio:4/3;border-radius:var(--r-card);background:radial-gradient(circle at 30% 18%,#1a1a1a 0 7%,transparent 7.5%),linear-gradient(160deg,transparent 0 46%,#d9d9d9 46% 49%,#b8b8b8 49% 100%),linear-gradient(135deg,var(--bm-orange),#c83c00);position:relative;overflow:hidden;max-width:100%}
.bmx-root .bmx-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--bm-content)}
.bmx-root .bmx-b-body{display:grid;grid-template-columns:1fr 240px;gap:28px;padding:8px 40px 36px}
.bmx-root .bmx-lines{display:grid;gap:8px}
.bmx-root .bmx-lines i{display:block;height:7px;border-radius:4px;background:var(--bm-subtle)}
.bmx-root .bmx-lines i:nth-child(3n){width:86%}
.bmx-root .bmx-b-callout{background:var(--bm-subtle);border-radius:var(--r-card);padding:14px 16px;display:grid;gap:6px;margin-block:14px}
.bmx-root .bmx-b-callout b{font:700 12px/16px var(--f-bm)}
.bmx-root .bmx-b-callout li{font:400 11px/16px var(--f-bm);color:var(--bm-body);list-style:none;display:flex;gap:6px;align-items:center}
.bmx-root .bmx-b-callout li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--bm-orange);flex:none}
.bmx-root .bmx-b-h2{border-left:3px solid var(--bm-orange);padding-left:10px;font:600 15px/20px var(--f-bm);margin-block:16px 10px}
.bmx-root .bmx-side{display:grid;gap:12px;align-content:start}
.bmx-root .bmx-side-card{border:1px solid var(--bm-subtle);border-radius:12px;padding:12px;display:grid;gap:8px}
.bmx-root .bmx-side-card .bmx-t{font:700 12px/16px var(--f-bm)}
.bmx-root .bmx-side-card .bmx-field{height:26px;border-radius:6px;background:var(--bm-subtle)}
.bmx-root .bmx-side-card .bmx-bm-btn{justify-content:center;font-size:12px;line-height:16px;padding:6px}
.bmx-root .bmx-mini-rel{display:flex;gap:8px;align-items:center}
.bmx-root .bmx-mini-rel .bmx-thumb{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--bm-orange),#c83c00);flex:none}
.bmx-root .bmx-mini-rel .bmx-lines{flex:1}
@media (max-width:760px){.bmx-root .bmx-b-hero,.bmx-root .bmx-b-body{grid-template-columns:1fr;padding-inline:20px}
.bmx-root .bmx-b-nav{display:none}
.bmx-root .bmx-side{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){.bmx-root .bmx-side{grid-template-columns:1fr}
.bmx-root .bmx-b-actions .bmx-outline{display:none}
}
.bmx-root .bmx-found{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.bmx-root .bmx-card{background:var(--panel);border-radius:24px;padding:clamp(20px,3vw,32px);min-width:0}
.bmx-root .bmx-card-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.bmx-root .bmx-card-title h3{font-size:20px}
.bmx-root .bmx-card-title span{font-size:12px;color:var(--ink-2)}
.bmx-root .bmx-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.bmx-root .bmx-sw{display:grid;gap:8px}
.bmx-root .bmx-sw .bmx-chip{height:64px;border-radius:12px;border:1px solid rgba(0,0,0,.06)}
.bmx-root .bmx-sw code{font:500 12px/1.3 var(--f-bm);color:var(--ink)}
.bmx-root .bmx-sw small{font-size:11px;color:var(--ink-2);display:block;line-height:1.35}
.bmx-root .bmx-type-scale{display:grid}
.bmx-root .bmx-ts{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;padding-block:10px;border-bottom:1px solid #efefef}
.bmx-root .bmx-ts:last-child{border-bottom:0}
.bmx-root .bmx-ts code{font:500 11px/1.4 var(--f-bm);color:var(--ink-2)}
.bmx-root .bmx-ts .bmx-s{color:var(--bm-content);min-width:0;overflow-wrap:anywhere}
@media (max-width:900px){.bmx-root .bmx-found{grid-template-columns:1fr}
}
@media (max-width:480px){.bmx-root .bmx-ts{grid-template-columns:1fr;gap:4px}
}
.bmx-root .bmx-radii{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.bmx-root .bmx-radii div{display:grid;gap:6px;justify-items:center;font-size:11px;color:var(--ink-2)}
.bmx-root .bmx-radii i{width:56px;height:56px;background:var(--bm-subtle);border:1px solid var(--bm-content)}
.bmx-root .bmx-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch}
.bmx-root .bmx-tier{background:var(--panel);border-radius:24px;padding:24px;display:grid;gap:14px;align-content:start;position:relative}
.bmx-root .bmx-tier + .bmx-tier{margin-left:28px}
.bmx-root .bmx-tier + .bmx-tier::before{content:'→';position:absolute;left:-24px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--ink-2)}
.bmx-root .bmx-tier .bmx-sec-label{margin:0}
.bmx-root .bmx-tier h3{font-size:22px}
.bmx-root .bmx-tier p{font-size:14px;color:var(--ink-2)}
.bmx-root .bmx-pill-list{display:flex;flex-wrap:wrap;gap:6px}
.bmx-root .bmx-pill-list span{font:500 12px/1 var(--f-bm);color:var(--bm-content);background:var(--bm-subtle);padding:7px 10px;border-radius:999px}
@media (max-width:900px){.bmx-root .bmx-flow{grid-template-columns:1fr;gap:28px}
.bmx-root .bmx-tier + .bmx-tier{margin-left:0}
.bmx-root .bmx-tier + .bmx-tier::before{content:'↓';left:50%;top:-26px;transform:translateX(-50%)}
}
.bmx-root .bmx-board{background:var(--bm-content);color:var(--bm-inverse-content)}
.bmx-root .bmx-board-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bmx-root .bmx-tile{background:var(--bm-white);border-radius:var(--r-card);padding:22px;display:grid;gap:14px;align-content:start;min-width:0}
.bmx-root .bmx-tile .bmx-lab{font:700 11px/16px var(--f-bm);letter-spacing:1.2px;text-transform:uppercase;color:var(--bm-body)}
.bmx-root .bmx-t-btns{grid-column:span 7}
.bmx-root .bmx-t-tags{grid-column:span 5}
.bmx-root .bmx-t-call{grid-column:span 4}
.bmx-root .bmx-t-stat{grid-column:span 4}
.bmx-root .bmx-t-quote{grid-column:span 4}
.bmx-root .bmx-t-news{grid-column:span 7}
.bmx-root .bmx-t-faq{grid-column:span 5}
.bmx-root .bmx-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bmx-root .bmx-bm-callout{background:var(--bm-subtle);border-radius:var(--r-card);padding:16px 18px;display:grid;gap:6px}
.bmx-root .bmx-bm-callout b{font:700 15px/22px var(--f-bm)}
.bmx-root .bmx-bm-callout p{font:400 14px/20px var(--f-bm);color:var(--bm-body)}
.bmx-root .bmx-bm-stat b{font:800 40px/44px var(--f-bm);color:var(--bm-orange);letter-spacing:-1px}
.bmx-root .bmx-bm-src{font:italic 400 12px/16px var(--f-bm);color:var(--bm-body)}
.bmx-root .bmx-bm-quote{border-left:4px solid var(--bm-orange);padding-left:14px;display:grid;gap:8px}
.bmx-root .bmx-bm-quote q{font:600 18px/26px var(--f-bm)}
.bmx-root .bmx-bm-quote span{font:400 12px/16px var(--f-bm);color:var(--bm-body)}
.bmx-root .bmx-bm-news{background:var(--bm-accent);border-radius:var(--r-card);padding:18px;display:grid;grid-template-columns:1fr 1.2fr;gap:16px;align-items:end}
.bmx-root .bmx-bm-news h4{font:700 16px/22px var(--f-bm);margin:4px 0}
.bmx-root .bmx-bm-news p{font:400 12px/16px var(--f-bm);color:var(--bm-body)}
.bmx-root .bmx-bm-field{display:grid;gap:4px}
.bmx-root .bmx-bm-field label{font:500 12px/16px var(--f-bm)}
.bmx-root .bmx-bm-field .bmx-in{display:flex;gap:8px}
.bmx-root .bmx-bm-field .bmx-box{flex:1;min-width:0;background:var(--bm-white);border-radius:var(--r-btn);padding:8px 12px;font:400 14px/24px var(--f-bm);color:var(--bm-body)}
.bmx-root .bmx-bm-faq{border:1px solid var(--bm-subtle);border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.bmx-root .bmx-bm-faq .bmx-q{display:flex;justify-content:space-between;gap:10px;font:600 14px/20px var(--f-bm)}
.bmx-root .bmx-bm-faq p{font:400 13px/19px var(--f-bm);color:var(--bm-body)}
@media (max-width:980px){.bmx-root .bmx-t-btns,.bmx-root .bmx-t-tags,.bmx-root .bmx-t-news,.bmx-root .bmx-t-faq{grid-column:span 12}
.bmx-root .bmx-t-call,.bmx-root .bmx-t-stat,.bmx-root .bmx-t-quote{grid-column:span 6}
.bmx-root .bmx-t-quote{grid-column:span 12}
}
@media (max-width:620px){.bmx-root .bmx-board-grid>*{grid-column:span 12!important}
.bmx-root .bmx-bm-news{grid-template-columns:1fr}
}
.bmx-root .bmx-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bmx-root .bmx-h-var{background:var(--panel);border-radius:24px;padding:18px;display:grid;gap:12px;align-content:start}
.bmx-root .bmx-h-var .bmx-name{display:flex;justify-content:space-between;font-size:13px}
.bmx-root .bmx-h-var .bmx-name span{color:var(--ink-2)}
.bmx-root .bmx-h-demo{border-radius:14px;background:var(--bm-white);border:1px solid #ececec;padding:14px;display:grid;gap:10px;aspect-ratio:4/3;align-content:center;max-width:100%}
.bmx-root .bmx-h-demo .bmx-ttl{font:800 15px/18px var(--f-bm);color:var(--bm-content)}
.bmx-root .bmx-h-demo .bmx-photo{aspect-ratio:auto;height:100%;min-height:60px;border-radius:10px}
.bmx-root .bmx-split{grid-template-columns:1fr 1fr;align-items:center}
.bmx-root .bmx-stacked{justify-items:center;text-align:center;grid-template-rows:auto 1fr}
.bmx-root .bmx-stacked .bmx-photo{width:100%}
.bmx-root .bmx-band{background:var(--bm-inverse);border-color:var(--bm-inverse);grid-template-columns:1fr 1fr;align-items:center}
.bmx-root .bmx-band .bmx-ttl{color:var(--bm-inverse-content)}
@media (max-width:900px){.bmx-root .bmx-heroes{grid-template-columns:1fr}
}
.bmx-root .bmx-grid-diagram{display:grid;gap:14px}
.bmx-root .bmx-gd-row{display:flex;gap:0;height:72px;border-radius:12px;overflow:hidden;font:500 12px/1.3 var(--f-bm)}
.bmx-root .bmx-gd-row div{display:grid;place-items:center;text-align:center;padding:4px}
.bmx-root .bmx-gd-content{background:var(--bm-accent);color:var(--bm-content);flex:680}
.bmx-root .bmx-gd-gutter{background:var(--panel);color:var(--ink-2);flex:116;border-inline:1px dashed #cfd3e0}
.bmx-root .bmx-gd-side{background:#fdf0e3;color:var(--bm-content);flex:300}
.bmx-root .bmx-gd-mobile{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.bmx-root .bmx-gd-phone{width:120px;height:72px;border-radius:12px;background:var(--panel);display:flex;padding-inline:6px}
.bmx-root .bmx-gd-phone div{flex:1;background:var(--bm-accent);border-radius:6px;display:grid;place-items:center;font:500 11px/1 var(--f-bm);color:var(--bm-content)}
.bmx-root .bmx-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.bmx-root .bmx-rule{display:grid;grid-template-columns:150px 1fr;gap:16px;padding-block:16px;border-top:1px solid var(--rule)}
.bmx-root .bmx-rule b{font-weight:500}
.bmx-root .bmx-rule p{color:var(--ink-2);font-size:15px}
@media (max-width:820px){.bmx-root .bmx-rules{grid-template-columns:1fr}
}
@media (max-width:480px){.bmx-root .bmx-rule{grid-template-columns:1fr;gap:4px}
}
.bmx-root a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
</style><div class='bmx-root'><div class='bmx-wrap'><div aria-label='Beyond Menu article page built entirely from the blog design system' class='bmx-panel bmx-hero-panel bmx-panel-pad' role='img'><div aria-hidden='true' class='bmx-browser bmx-bm'><div class='bmx-b-head'><div class='bmx-logo'><i></i>beyond menu</div>
<div class='bmx-b-nav'><span class='bmx-on'>Offerings</span><span>Resources</span><span>Company</span></div>
<div class='bmx-b-actions'><span class='bmx-bm-btn bmx-outline'>Log in</span><span class='bmx-bm-btn bmx-primary'>Get a demo</span></div>
</div>
<div class='bmx-b-hero'><div><span class='bmx-bm-tag'>Build Loyalty</span><h3>Restaurant Marketing in Phoenix: A Guide for Independent Operators</h3><p class='bmx-b-meta'>25 September 2026 · 12 min read</p>
</div>
<div class='bmx-photo'></div>
</div>
<div class='bmx-b-body'><div><div class='bmx-lines'><i></i><i></i><i></i><i></i></div>
<div class='bmx-b-callout'><b>Quick insights before you dig in</b><ul style='margin:0;padding:0;display:grid;gap:4px'><li>Google comes first, so lead with reviews</li><li>Own your order link</li><li>Keep it running all summer</li></ul></div>
<div class='bmx-b-h2'>Why Phoenix Restaurant Marketing Is Different</div>
<div class='bmx-lines'><i></i><i></i><i></i></div>
</div>
<div class='bmx-side'><div class='bmx-side-card'><span class='bmx-t'>Related Articles</span><div class='bmx-mini-rel'><span class='bmx-thumb'></span><div class='bmx-lines'><i></i><i></i></div>
</div>
<div class='bmx-mini-rel'><span class='bmx-thumb'></span><div class='bmx-lines'><i></i><i></i></div>
</div>
</div>
<div class='bmx-side-card'><span class='bmx-bm-eyebrow'>Newsletter</span><span class='bmx-t'>Marketing ideas for slow months</span><span class='bmx-field'></span><span class='bmx-bm-btn bmx-primary'>Subscribe</span></div>
</div>
</div>
</div>
</div>
<div class='bmx-kicker-row'><p><b>Client:</b> Beyond Menu</p>
<p>Design System | Component Library | Blog Templates</p>
</div>
<div class='bmx-intro'><h1>Beyond Menu Blog Design System</h1><div><div class='bmx-meta-row'><p class='bmx-small'>Client</p>
<p>Beyond Menu</p>
</div>
<div class='bmx-meta-row'><p class='bmx-small'>Year</p>
<p>2026</p>
</div>
<div class='bmx-meta-row'><p class='bmx-small'>Scope of Work</p>
<p>Design System | Component Library | Blog Templates</p>
</div>
<div class='bmx-meta-row'><p class='bmx-small'>Tools</p>
<p>Figma variables, text styles and nested components</p>
</div>
</div>
</div>
<section style='padding-top:8px'><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Overview</p>
<h2>One set of building blocks for every post</h2></div>
<div class='bmx-body'><p class='bmx-lede'>Beyond Menu is an online ordering and marketing platform for independent restaurants. Its blog publishes guides, city playbooks and marketing pages for restaurant owners.</p>
<p>I designed a unified design system for the blog so that every article, guide and landing page is assembled from the same components, colors and type. I modeled its structure on our Manager App design system and scaled it to what a blog needs: long-form reading, lead capture and article navigation.</p>
<p>I built it with the blog content team in mind. They can start a page from a template, swap content inside the components, and get a result that matches the live blog without detaching anything.</p>
</div>
</div>
<div aria-label='System contents, counted from the Figma file' class='bmx-stats'><div class='bmx-stat'><b>8</b><span>sections, from foundations to templates</span></div>
<div class='bmx-stat'><b>32</b><span>documented components</span></div>
<div class='bmx-stat'><b>159</b><span>component variants</span></div>
<div class='bmx-stat'><b>31</b><span>semantic color tokens</span></div>
<div class='bmx-stat'><b>31</b><span>text styles, desktop and mobile</span></div>
<div class='bmx-stat'><b>6</b><span>radius tokens</span></div>
</div>
</section>
<section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Principles</p>
<h2>Three rules the whole file follows</h2></div>
<div class='bmx-body'><p>I wrote these on the cover page of the file so anyone opening it knows how to work with it before they touch a component.</p>
</div>
</div>
<div class='bmx-principles'><div class='bmx-principle'><span class='bmx-n'>Rule 1</span><h3>Build from atoms</h3><p>Start pages from a template or assemble them from content, conversion and navigation blocks. Never detach. Edit through component properties and exposed nested instances.</p>
</div>
<div class='bmx-principle'><span class='bmx-n'>Rule 2</span><h3>Use tokens only</h3><p>Every color, radius, font and shadow comes from the Blog / Theme variables and text styles. No raw hex values, no detached styles.</p>
</div>
<div class='bmx-principle'><span class='bmx-n'>Rule 3</span><h3>Extend, don't fork</h3><p>A new need gets a new variant, a new property, or a new semantic token on the existing component, so components keep matching the live blog.</p>
</div>
</div>
</section>
<section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Foundations</p>
<h2>Semantic tokens, named by role</h2></div>
<div class='bmx-body'><p>Colors are named by what they do (page, content, body, primary, outline, field) and not by their hue. Components only reference these names, so a theme can change values without anyone rebuilding a component.</p>
<p>Typography uses one variable family, Roboto Flex, with separate font variables for display, heading, body, label and button roles. Each text style has a desktop and a mobile size.</p>
</div>
</div>
<div class='bmx-found'><div class='bmx-card'><div class='bmx-card-title'><h3>Color</h3><span>Blog / Theme collection, default theme</span></div>
<div class='bmx-swatches'><div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-content)'></div>
<div><code>base/content</code><small>Headlines, main text, dark bands</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-body)'></div>
<div><code>base/body</code><small>Paragraph and meta text</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-orange)'></div>
<div><code>secondary/secondary</code><small>Main call to action fill</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-primary-hover)'></div>
<div><code>primary/hover</code><small>Dark button pressed state</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-accent)'></div>
<div><code>base/accent</code><small>Newsletter and stat panels</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-subtle)'></div>
<div><code>base/subtle</code><small>Callouts, fields, tags</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-hover)'></div>
<div><code>neutral/hover</code><small>Hover and disabled fills</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-success)'></div>
<div><code>success/success</code><small>Form confirmation</small></div>
</div>
<div class='bmx-sw'><div class='bmx-chip' style='background:var(--bm-error)'></div>
<div><code>error/error</code><small>Field errors</small></div>
</div>
</div>
<div class='bmx-card-title' style='margin:28px 0 8px'><h3>Radius</h3><span>radius/…</span></div>
<div class='bmx-radii'><div><i style='border-radius:8px'></i>button · field · tag 8</div>
<div><i style='border-radius:16px'></i>card · image 16</div>
<div><i style='border-radius:24px'></i>hero 24</div>
</div>
</div>
<div class='bmx-card'><div class='bmx-card-title'><h3>Typography</h3><span>Roboto Flex · 31 styles</span></div>
<div class='bmx-type-scale bmx-bm'><div class='bmx-ts'><code>Display · 64/68</code><span class='bmx-s' style='font:800 clamp(30px,3.6vw,48px)/1.06 var(--f-bm);letter-spacing:-1px'>Phoenix playbook</span></div>
<div class='bmx-ts'><code>H1 · 52/58</code><span class='bmx-s' style='font:800 clamp(24px,2.8vw,36px)/1.1 var(--f-bm);letter-spacing:-.5px'>Phoenix playbook</span></div>
<div class='bmx-ts'><code>H2 · 30/38</code><span class='bmx-s' style='font:600 clamp(20px,2.2vw,26px)/1.25 var(--f-bm)'>Plan two playbooks</span></div>
<div class='bmx-ts'><code>H3 · 24/32</code><span class='bmx-s' style='font:600 20px/1.3 var(--f-bm)'>Plan two playbooks, not one campaign</span></div>
<div class='bmx-ts'><code>Lead · 20/32</code><span class='bmx-s' style='font:400 18px/1.6 var(--f-bm);color:var(--bm-body)'>Plan two playbooks, not one campaign</span></div>
<div class='bmx-ts'><code>Body M · 16/24</code><span class='bmx-s' style='font:400 16px/1.5 var(--f-bm);color:var(--bm-body)'>Plan two playbooks, not one campaign</span></div>
<div class='bmx-ts'><code>Caption · 14/20</code><span class='bmx-s' style='font:italic 400 14px/20px var(--f-bm);color:var(--bm-body)'>Plan two playbooks, not one campaign</span></div>
<div class='bmx-ts'><code>Eyebrow · 12/16</code><span class='bmx-s bmx-bm-eyebrow'>Plan two playbooks</span></div>
<div class='bmx-ts'><code>Link · 18/28</code><span class='bmx-s' style='font:500 17px/28px var(--f-bm);color:var(--bm-orange);text-decoration:underline'>Plan two playbooks, not one campaign</span></div>
</div>
</div>
</div>
</section>
<section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Structure</p>
<h2>Small parts build bigger parts</h2></div>
<div class='bmx-body'><p>Every component is built from smaller ones. A Callout is made of Text, Heading, Eyebrow and List. The Article Page is made of nothing but components from the earlier sections. When a foundation changes, the change reaches every template.</p>
</div>
</div>
<div class='bmx-flow'><div class='bmx-tier'><p class='bmx-sec-label'>Foundations and atoms</p>
<h3>Tokens, type, actions, forms</h3><p>Sections 01 to 04</p>
<div class='bmx-pill-list'><span>Color</span><span>Typography</span><span>Radius & Border</span><span>Spacing & Layout</span><span>Icons</span><span>Text</span><span>Heading</span><span>Eyebrow</span><span>Link</span><span>Button</span><span>Icon Button</span><span>Tag</span><span>Input</span><span>Phone Input</span><span>Checkbox</span></div>
</div>
<div class='bmx-tier'><p class='bmx-sec-label'>Blocks</p>
<h3>Content, conversion, navigation</h3><p>Sections 05 to 07</p>
<div class='bmx-pill-list'><span>List</span><span>Section Heading</span><span>Callout</span><span>Pull Quote</span><span>Figure</span><span>Image Wrap</span><span>Divider</span><span>FAQ Item</span><span>Newsletter</span><span>Lead Form</span><span>CTA Banner</span><span>Logo</span><span>Nav Link</span><span>Site Header</span><span>Breadcrumb</span><span>Article Meta</span><span>Table of Contents</span><span>Related Articles</span><span>Article Card</span><span>Footer</span></div>
</div>
<div class='bmx-tier'><p class='bmx-sec-label'>Templates</p>
<h3>Pages</h3><p>Section 08</p>
<div class='bmx-pill-list'><span>Article Hero</span><span>Article Page</span></div>
</div>
</div>
</section>
</div>
<section class='bmx-board'><div class='bmx-wrap'><div class='bmx-sec-head' style='color:var(--bm-inverse-content)'><div><p class='bmx-sec-label' style='color:var(--bm-disabled)'>Components</p>
<h2>Built for long reading and lead capture</h2></div>
<div class='bmx-body' style='color:var(--bm-inverse-content)'><p>A blog page has two jobs: help an owner read a long guide, and give them a clear next step. The content blocks break long articles into scannable parts. The conversion blocks give the newsletter, demo request and end-of-article banner one consistent look.</p>
</div>
</div>
<div class='bmx-board-grid bmx-bm'><div class='bmx-tile bmx-t-btns'><span class='bmx-lab'>Button · primary, secondary, outline, ghost, disabled</span><div class='bmx-row'><span class='bmx-bm-btn bmx-primary'>Get a free demo →</span><span class='bmx-bm-btn bmx-secondary'>Get a free demo</span><span class='bmx-bm-btn bmx-outline'>Get a free demo</span><span class='bmx-bm-btn bmx-ghost'>Get a free demo</span><span class='bmx-bm-btn bmx-disabled'>Get a free demo</span></div>
<p class='bmx-bm-src' style='font-style:normal'>Sizes L 48 for forms and heroes, M 40 for cards and the header, S 32 for compact rows. One primary per block.</p>
</div>
<div class='bmx-tile bmx-t-tags'><span class='bmx-lab'>Tag</span><div class='bmx-row'><span class='bmx-bm-tag'>Build Loyalty</span><span class='bmx-bm-tag'>Marketing</span><span class='bmx-bm-tag bmx-soft'>Operations</span><span class='bmx-bm-tag bmx-soft'>Loyalty</span></div>
<p class='bmx-bm-src' style='font-style:normal'>At most two tags per card.</p>
</div>
<div class='bmx-tile bmx-t-call'><span class='bmx-lab'>Callout · default</span><div class='bmx-bm-callout'><b>Plan the slow season in the busy season</b><p>Summer used to be three months. Now it is really six. Plan two playbooks, not one campaign.</p>
</div>
</div>
<div class='bmx-tile bmx-t-stat'><span class='bmx-lab'>Callout · stat</span><div class='bmx-bm-callout bmx-bm-stat'><b>$119M</b><p>Spent at bars and restaurants by out-of-state fans during the 2026 Cactus League season.</p>
<span class='bmx-bm-src'>Source: Cactus League 2026 economic impact study</span></div>
</div>
<div class='bmx-tile bmx-t-quote'><span class='bmx-lab'>Pull Quote · bar</span><div class='bmx-bm-quote'><q>Summer used to be three months. Now summer is really six months.</q><span>Kimber Lanning, Local First Arizona</span></div>
</div>
<div class='bmx-tile bmx-t-news'><span class='bmx-lab'>Newsletter · inline</span><div class='bmx-bm-news'><div><span class='bmx-bm-eyebrow'>Newsletter</span><h4>Marketing ideas for slow months</h4><p>One practical tip a week for independent restaurants. No spam.</p>
</div>
<div class='bmx-bm-field'><label for='demo-email'>Email address</label><div class='bmx-in'><span class='bmx-box' id='demo-email'>you@restaurant.com</span><span class='bmx-bm-btn bmx-primary'>Subscribe</span></div>
</div>
</div>
</div>
<div class='bmx-tile bmx-t-faq'><span class='bmx-lab'>FAQ Item · open and closed</span><div class='bmx-bm-faq'><div class='bmx-q'>How do Phoenix restaurants survive the summer? <span aria-hidden='true'>−</span></div>
<p>Plan for two seasons. Push delivery, loyalty and indoor offers from June to September.</p>
</div>
<div class='bmx-bm-faq'><div class='bmx-q'>When should I start my summer marketing? <span aria-hidden='true'>+</span></div>
</div>
</div>
</div>
<p class='bmx-caption' style='color:var(--bm-disabled);padding-bottom:8px'>Rendered from the system's tokens. Sample copy is from the Phoenix guide used throughout the Figma file.</p>
</div>
</section>
<div class='bmx-wrap'><section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Templates</p>
<h2>Three hero layouts, one article page</h2></div>
<div class='bmx-body'><p>The Article Hero sits at the top of every post. It is built from Tag, Heading, Article Meta and an image, and comes in three layouts. Split is the default for guides. Stacked centers the title over a wide image for big features. Band puts the hero on a dark inverse band for campaign and seasonal posts.</p>
</div>
</div>
<div class='bmx-heroes'><div class='bmx-h-var'><div class='bmx-name'><b>A · Split</b><span>Guides</span></div>
<div aria-hidden='true' class='bmx-h-demo bmx-split'><div style='display:grid;gap:6px'><span class='bmx-bm-tag' style='justify-self:start'>Build Loyalty</span><span class='bmx-ttl'>Restaurant Marketing in Phoenix</span></div>
<div class='bmx-photo'></div>
</div>
</div>
<div class='bmx-h-var'><div class='bmx-name'><b>B · Stacked</b><span>Big features</span></div>
<div aria-hidden='true' class='bmx-h-demo bmx-stacked'><div style='display:grid;gap:6px;justify-items:center'><span class='bmx-bm-tag'>Build Loyalty</span><span class='bmx-ttl'>Restaurant Marketing in Phoenix</span></div>
<div class='bmx-photo'></div>
</div>
</div>
<div class='bmx-h-var'><div class='bmx-name'><b>C · Band</b><span>Campaigns, seasonal</span></div>
<div aria-hidden='true' class='bmx-h-demo bmx-band'><div style='display:grid;gap:6px'><span class='bmx-bm-tag' style='justify-self:start'>Build Loyalty</span><span class='bmx-ttl'>Restaurant Marketing in Phoenix</span></div>
<div class='bmx-photo'></div>
</div>
</div>
</div>
<div class='bmx-card' style='margin-top:16px'><div class='bmx-card-title'><h3>Article page grid</h3><span>Desktop 1096 container · Mobile 343 column</span></div>
<div class='bmx-grid-diagram'><div aria-label='Desktop: 680 pixel content column, 116 pixel gutter, 300 pixel sticky sidebar' class='bmx-gd-row' role='img'><div class='bmx-gd-content'>Content column<br/>680</div>
<div class='bmx-gd-gutter'>Gutter<br/>116</div>
<div class='bmx-gd-side'>Sticky sidebar<br/>300</div>
</div>
<div class='bmx-gd-mobile'><div aria-label='Mobile: 343 pixel column with 16 pixel margins' class='bmx-gd-phone' role='img'><div>343</div>
</div>
<p>On mobile the sidebar blocks (Related Articles, Newsletter, Lead Form) move inline below the article, inside one 343 column with 16 margins.</p>
</div>
</div>
</div>
</section>
<section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Documentation</p>
<h2>Each component explains how to use it</h2></div>
<div class='bmx-body'><p>Every component has its own documentation frame with a description, usage rules, all variants, and a preview in context. The rules keep pages consistent when someone other than me builds them. A few examples:</p>
</div>
</div>
<div class='bmx-rules'><div class='bmx-rule'><b>Button</b><p>One primary per block. Labels in sentence case, verb first.</p>
</div>
<div class='bmx-rule'><b>Checkbox</b><p>Pre-checked consent boxes are not allowed.</p>
</div>
<div class='bmx-rule'><b>Table of Contents</b><p>Use for articles with four or more H2s.</p>
</div>
<div class='bmx-rule'><b>Related Articles</b><p>Exactly three items, titles at most two lines.</p>
</div>
<div class='bmx-rule'><b>Article Card</b><p>The whole card is the link. Do not add a separate button.</p>
</div>
<div class='bmx-rule'><b>Pull Quote</b><p>Quotes come from a real person, and always name who said it.</p>
</div>
<div class='bmx-rule'><b>Figure</b><p>Captions in sentence case, with the source when needed.</p>
</div>
<div class='bmx-rule'><b>Phone Input</b><p>The country box stays fixed at 84 so the number field lines up across forms.</p>
</div>
</div>
</section>
<section><div class='bmx-sec-head'><div><p class='bmx-sec-label'>Outcome</p>
<h2>What the system changes</h2></div>
<div class='bmx-body'><p>A new post no longer needs its own design. The content team starts from the Article Page template, fills in the components, and the page matches the live blog by default.</p>
<p>Because components only reference semantic tokens, the same structure can take a new visual theme by changing variable values. I am using this to explore more interactive blog styles on a separate page, without touching the default components.</p>
</div>
</div>
</section>
</div>
</div>
<style> .bmx-live{padding-block:56px} .bmx-lv{background:#fff;border-radius:28px;padding:clamp(12px,2vw,20px);box-shadow:0 1px 0 rgba(0,0,0,.04)} .bmx-lv-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:4px 4px 16px} .bmx-lv-grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bmx-lv-lab{font:500 12px/1 'Manrope',system-ui,sans-serif;color:#5b5e66;letter-spacing:.02em} .bmx-seg{display:inline-flex;background:#f1f2f3;border-radius:999px;padding:3px;gap:2px} .bmx-seg button{all:unset;cursor:pointer;font:500 13px/1 'Manrope',system-ui,sans-serif;color:#131417;padding:8px 14px;border-radius:999px;transition:background .15s,color .15s,box-shadow .15s} .bmx-seg button:hover{background:rgba(255,255,255,.7)} .bmx-seg button[aria-pressed='true']{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)} .bmx-seg button:focus-visible,.bmx-tgl:focus-visible,.bmx-open:focus-visible{outline:2px solid #131417;outline-offset:2px} .bmx-tgl{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 'Manrope',system-ui,sans-serif;color:#131417;padding:6px 4px} .bmx-tgl i{width:34px;height:20px;border-radius:999px;background:#d9dadc;position:relative;transition:background .2s;flex:none} .bmx-tgl i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s} .bmx-tgl[aria-pressed='true'] i{background:#7b2fbf} .bmx-tgl[aria-pressed='true'] i::after{transform:translateX(14px)} .bmx-open{all:unset;cursor:pointer;font:500 13px/1 'Manrope',system-ui,sans-serif;color:#131417;padding:9px 14px;border:1px solid #dcdcde;border-radius:999px;transition:background .15s} .bmx-open:hover{background:#f5f5f5} .bmx-stage{position:relative;background:#e4e8ea;border-radius:18px;overflow:hidden;height:760px;display:flex;justify-content:center;align-items:flex-start;padding-top:20px;transition:height .3s} .bmx-dev{flex:none;position:relative;transform-origin:top center;background:#fff;border-radius:12px;box-shadow:0 30px 60px -30px rgba(13,51,55,.45);overflow:hidden;transition:width .35s ease,height .35s ease} .bmx-dev.is-mobile{border-radius:28px;outline:8px solid #131417} .bmx-dev iframe{display:block;width:100%;height:100%;border:0;background:#fff} .bmx-chrome{height:34px;background:#f6f7f8;border-bottom:1px solid #e6e8ea;display:flex;align-items:center;gap:6px;padding:0 12px} .bmx-chrome i{width:10px;height:10px;border-radius:50%;background:#dcdfe2} .bmx-chrome span{margin-left:12px;flex:1;max-width:360px;height:20px;border-radius:6px;background:#fff;border:1px solid #e6e8ea;font:400 11px/18px system-ui,sans-serif;color:#8a8f98;padding:0 8px;overflow:hidden;white-space:nowrap} .bmx-dev.is-mobile .bmx-chrome{display:none} .bmx-load{position:absolute;inset:0;display:grid;place-items:center;font:500 13px/1 'Manrope',system-ui,sans-serif;color:#5b5e66} .bmx-hint{font:400 13px/1.5 'Manrope',system-ui,sans-serif;color:#5b5e66;margin-top:12px;padding-inline:4px} @media (max-width:820px){.bmx-stage{height:640px}.bmx-hero-grp{display:none}} </style> <section class='bmx-live' id='bmx-live'> <div class='bmx-sec-head'><div><p class='bmx-sec-label'>Try it live</p><h2>The Article Page, working</h2></div> <div class='bmx-body'><p>This is the Article Page template from the Figma file, built as a working page from the same tokens and components. Scroll it, open the FAQ, try the menu on mobile, and submit the forms to see the error and success states.</p><p>Switch devices to watch the sidebar blocks move inline on mobile, swap between the three hero layouts, and turn on Show components to see which component each part of the page is built from.</p></div></div> <div class='bmx-lv'> <div class='bmx-lv-bar'> <div class='bmx-lv-grp'><span class='bmx-lv-lab'>Device</span><div class='bmx-seg' role='group' aria-label='Device' data-k='device'><button type='button' data-v='desktop' aria-pressed='true'>Desktop</button><button type='button' data-v='tablet' aria-pressed='false'>Tablet</button><button type='button' data-v='mobile' aria-pressed='false'>Mobile</button></div></div> <div class='bmx-lv-grp bmx-hero-grp'><span class='bmx-lv-lab'>Hero</span><div class='bmx-seg' role='group' aria-label='Hero layout' data-k='hero'><button type='button' data-v='split' aria-pressed='true'>Split</button><button type='button' data-v='stacked' aria-pressed='false'>Stacked</button><button type='button' data-v='band' aria-pressed='false'>Band</button></div></div> <div class='bmx-lv-grp'><button type='button' class='bmx-tgl' aria-pressed='false'><i></i>Show components</button><button type='button' class='bmx-open'>Open full screen ↗</button></div> </div> <div class='bmx-stage'><div class='bmx-dev'><div class='bmx-chrome'><i></i><i></i><i></i><span>getbm.com/blog/restaurant-marketing-phoenix</span></div><div class='bmx-load'>Loading the template…</div><iframe title='Beyond Menu Article Page template, interactive preview' loading='lazy'></iframe></div></div> <p class='bmx-hint'>Sample content from the Phoenix guide. Nothing you type is sent anywhere.</p> </div> </section> <script> (function(){ var sec=document.getElementById('bmx-live');if(!sec||sec.getAttribute('data-ready'))return;sec.setAttribute('data-ready','1'); var docs=[].slice.call(document.querySelectorAll('.bmx-root .bmx-sec-label')); var anchor=null;docs.forEach(function(p){if(p.textContent.trim()==='Documentation')anchor=p.closest('section')}); if(anchor&&anchor.parentNode){anchor.parentNode.insertBefore(sec,anchor)}else{var w=document.querySelector('.bmx-root .bmx-wrap:last-of-type');if(w)w.appendChild(sec)} var src=document.getElementById('bmx-live-src');var html=src?src.value:''; var stage=sec.querySelector('.bmx-stage'),dev=sec.querySelector('.bmx-dev'),fr=sec.querySelector('iframe'),load=sec.querySelector('.bmx-load'); var state={device:'desktop',hero:'split',inspect:false}; if(stage.clientWidth<600){state.device='mobile';sec.querySelectorAll('[data-k=device] button').forEach(function(x){x.setAttribute('aria-pressed',x.getAttribute('data-v')==='mobile'?'true':'false')})} var sizes={desktop:[1280,900,true],tablet:[820,1080,true],mobile:[375,780,false]}; function send(){try{fr.contentWindow.postMessage({bm:{hero:state.hero,inspect:state.inspect}},'*')}catch(e){}} function layout(){var sz=sizes[state.device],W=stage.clientWidth-32,H=stage.clientHeight-20; var chrome=sz[2]?34:0;var w=sz[0],h=sz[1]+chrome; var sc=Math.min(1,W/w);if(state.device==='mobile'){sc=Math.min(1,(H-16)/h,W/(w+16))} if(state.device!=='mobile'){h=Math.max(h,(H/sc))} dev.style.width=w+'px';dev.style.height=h+'px';dev.style.transform='scale('+sc+')'; dev.classList.toggle('is-mobile',state.device==='mobile');fr.style.height=(h-chrome)+'px'} function boot(){if(fr.getAttribute('data-on'))return;fr.setAttribute('data-on','1');fr.srcdoc=html;fr.addEventListener('load',function(){load.style.display='none';send()})} if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){boot();io.disconnect()}},{rootMargin:'600px'});io.observe(sec)}else boot(); sec.querySelectorAll('.bmx-seg').forEach(function(g){g.addEventListener('click',function(e){var btn=e.target.closest('button');if(!btn)return;var k=g.getAttribute('data-k');state[k]=btn.getAttribute('data-v'); g.querySelectorAll('button').forEach(function(x){x.setAttribute('aria-pressed',x===btn?'true':'false')});if(k==='device')layout();else send()})}); var t=sec.querySelector('.bmx-tgl');t.addEventListener('click',function(){state.inspect=!state.inspect;t.setAttribute('aria-pressed',state.inspect?'true':'false');send()}); sec.querySelector('.bmx-open').addEventListener('click',function(){var u=URL.createObjectURL(new Blob([html],{type:'text/html'}));window.open(u,'_blank','noopener')}); addEventListener('resize',layout);layout(); })(); </script> <textarea id='bmx-live-src' hidden aria-hidden='true'><!doctype html><html lang='en'><head><meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'><title>Restaurant Marketing in Phoenix · Beyond Menu</title><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,opsz,wght@0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;1,8..144,400&display=swap'><style>:root{--content:#0d3337;--body:#4a5568;--accent:#eff0f7;--subtle:#eef2f3;--inverse:#0d3337;--inverse-content:#eff0f7;--primary-hover:#092326;--orange:#eb4700;--orange-hover:#d64100;--hover:#e0e7e9;--disabled:#b3c4c9;--error:#d21d1d;--success:#25835c;--white:#fff;--f:'Roboto Flex','Roboto',system-ui,sans-serif;--r-btn:8px;--r-card:16px;--r-hero:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:400 16px/24px var(--f);color:var(--content);background:var(--white);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,ul,figure{margin:0;padding:0}ul{list-style:none}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}.c{max-width:1096px;margin:0 auto;padding:0 24px}.progress{position:fixed;top:0;left:0;height:3px;background:var(--orange);width:0;z-index:60;transition:width .1s linear}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 15px/24px var(--f);padding:8px 16px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--orange);color:var(--white)}.btn.primary:hover{background:var(--orange-hover)}.btn.secondary{background:var(--content);color:var(--white)}.btn.secondary:hover{background:var(--primary-hover)}.btn.outline{background:var(--white);border-color:var(--content)}.btn.outline:hover{background:var(--subtle)}.btn.s{font-size:14px;padding:4px 12px}.btn.l{padding:12px 20px}.btn.block{width:100%}.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.tag{display:inline-block;background:var(--orange);color:var(--white);font:500 12px/16px var(--f);padding:4px 8px;border-radius:var(--r-btn)}.tag.soft{background:var(--subtle);color:var(--content)}.eyebrow{font:700 12px/16px var(--f);letter-spacing:1.2px;text-transform:uppercase;color:var(--orange)}.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--subtle)}.hdr .c{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}.logo{display:flex;align-items:center;gap:8px;font:600 19px/1 var(--f)}.logo i{width:24px;height:24px;border-radius:50%;background:var(--orange);position:relative;flex:none}.logo i::after{content:'';position:absolute;inset:7px 6px;border-top:2.5px solid #fff;border-bottom:2.5px solid #fff}.nav{display:flex;gap:4px}.nav a{font:500 14px/20px var(--f);padding:8px 12px;border-radius:8px;transition:background .15s}.nav a:hover,.nav a.on{background:var(--subtle)}.hdr-actions{display:flex;gap:8px;align-items:center}.burger{display:none;width:40px;height:40px;border:0;background:none;border-radius:8px;cursor:pointer;position:relative}.burger span,.burger::before,.burger::after{content:'';position:absolute;left:10px;right:10px;height:2px;background:var(--content);transition:transform .2s,opacity .2s}.burger::before{top:13px}.burger span{top:19px}.burger::after{top:25px}.menu-open .burger::before{transform:translateY(6px) rotate(45deg)}.menu-open .burger span{opacity:0}.menu-open .burger::after{transform:translateY(-6px) rotate(-45deg)}.mmenu{display:none;border-top:1px solid var(--subtle);padding:12px 24px 20px;background:#fff}.mmenu a:not(.btn){display:block;font:500 16px/24px var(--f);padding:12px 0;border-bottom:1px solid var(--subtle)}.mmenu .btn{margin-top:16px}.menu-open .mmenu{display:block}.crumb{font:400 13px/20px var(--f);color:var(--body);padding:20px 0 0}.crumb a:hover{color:var(--orange)}.crumb span{margin:0 6px;color:var(--disabled)}.hero{padding:24px 0 40px}.hero-in{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}.hero h1{font:800 44px/50px var(--f);letter-spacing:-.6px;margin:14px 0 16px;text-wrap:balance}.meta{font:400 14px/20px var(--f);color:var(--body);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.meta b{font-weight:600;color:var(--content)}.photo{border-radius:var(--r-card);aspect-ratio:4/3;position:relative;overflow:hidden;background:linear-gradient(135deg,#f05a1a,#c83c00)}.photo::before{content:'';position:absolute;left:12%;right:10%;bottom:-6%;height:62%;background:linear-gradient(#2a2a2a,#111);border-radius:14px 14px 0 0;transform:perspective(500px) rotateX(28deg);box-shadow:0 -2px 0 #444 inset}.photo::after{content:'';position:absolute;left:24%;right:22%;bottom:10%;height:26%;background:repeating-linear-gradient(90deg,#3a3a3a 0 9px,#222 9px 11px),#2b2b2b;border-radius:4px;transform:perspective(500px) rotateX(40deg);opacity:.9}.photo .phone{position:absolute;right:12%;top:12%;width:min(18%,96px);aspect-ratio:9/17;background:#111;border-radius:10px;transform:rotate(18deg);box-shadow:0 10px 20px rgba(0,0,0,.25)}.photo.small{aspect-ratio:auto;height:100%}.hero-stacked .crumb{text-align:center}.hero-stacked .hero-in{grid-template-columns:1fr;text-align:center;justify-items:center;gap:28px}.hero-stacked .hero h1{max-width:18ch}.hero-stacked .meta{justify-content:center}.hero-stacked .photo{width:100%;aspect-ratio:21/9}.hero-band .hero{background:var(--inverse);color:var(--inverse-content);border-radius:0;margin-bottom:24px;padding:48px 0}.hero-band .hero .meta{color:var(--disabled)}.hero-band .hero .meta b{color:var(--inverse-content)}.hero-band .crumb{color:var(--disabled)}.layout{display:grid;grid-template-columns:minmax(0,680px) 300px;justify-content:space-between;gap:48px;padding-bottom:64px}.article>*+*{margin-top:20px}.article p{color:var(--body);font-size:17px;line-height:28px}.article p a{color:var(--orange);text-decoration:underline;text-underline-offset:3px;font-weight:500}.article h2{font:600 30px/38px var(--f);border-left:4px solid var(--orange);padding-left:14px;margin-top:40px;scroll-margin-top:84px}.article h3{font:600 24px/32px var(--f);margin-top:32px}.callout{background:var(--subtle);border-radius:var(--r-card);padding:20px 24px}.callout b{display:block;font:700 17px/24px var(--f);margin-bottom:10px}.callout li{display:flex;gap:10px;align-items:baseline;font-size:16px;line-height:26px;color:var(--body)}.callout li::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;transform:translateY(-1px)}.stat{background:var(--accent);border-radius:var(--r-card);padding:24px}.stat strong{display:block;font:800 48px/52px var(--f);color:var(--orange);letter-spacing:-1px}.stat p{color:var(--content);margin-top:6px;font-size:16px;line-height:24px}.stat small{display:block;margin-top:10px;font:italic 400 13px/18px var(--f);color:var(--body)}.figure-wrap{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}.figure-wrap figure .photo{aspect-ratio:4/3}figcaption{font:italic 400 13px/18px var(--f);color:var(--body);margin-top:8px}.quote{border-left:4px solid var(--orange);padding:4px 0 4px 18px}.quote q{display:block;font:600 22px/32px var(--f);quotes:'“' '”'}.quote span{display:block;margin-top:8px;font-size:14px;color:var(--body)}.news{background:var(--accent);border-radius:var(--r-card);padding:24px;display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:end}.news h4{font:700 20px/28px var(--f);margin:4px 0}.news p{font-size:14px;line-height:20px}.field,.slot,.news>div,.side>*,.layout>*{min-width:0}.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}.field label{font:500 13px/18px var(--f)}.row{display:flex;gap:8px}.input{flex:1;min-width:0;height:40px;border:1px solid var(--hover);background:var(--white);border-radius:var(--r-btn);padding:0 12px;font-size:15px;transition:border-color .15s,box-shadow .15s}.input:hover{border-color:var(--disabled)}.input:focus{outline:0;border-color:var(--content);box-shadow:0 0 0 3px rgba(13,51,55,.12)}.invalid .input{border-color:var(--error)}.invalid .input:focus{box-shadow:0 0 0 3px rgba(210,29,29,.14)}.msg{font-size:13px;line-height:18px;min-height:0}.invalid .msg{color:var(--error)}.ok{display:flex;gap:10px;align-items:center;color:var(--success);font:600 15px/22px var(--f);background:#e7f3ed;border-radius:var(--r-btn);padding:10px 14px}.ok::before{content:'✓';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--success);color:#fff;font-size:13px;flex:none}.faq{border-top:1px solid var(--subtle)}.faq details{border-bottom:1px solid var(--subtle)}.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font:600 17px/24px var(--f);padding:18px 0}.faq summary::-webkit-details-marker{display:none}.faq summary i{width:28px;height:28px;border-radius:50%;background:var(--subtle);flex:none;position:relative;transition:background .15s}.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--content);transition:transform .2s}.faq summary i::after{transform:rotate(90deg)}.faq details[open] summary i::after{transform:rotate(0)}.faq summary:hover i{background:var(--hover)}.faq details p{padding:0 40px 20px 0;font-size:16px;line-height:26px}.cta{background:var(--inverse);color:var(--inverse-content);border-radius:var(--r-hero);padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:40px}.cta h4{font:700 24px/32px var(--f)}.cta p{color:var(--disabled);font-size:15px;line-height:22px;margin-top:6px}.side{display:grid;gap:20px;align-content:start;position:sticky;top:88px}.card{border:1px solid var(--subtle);border-radius:var(--r-card);padding:20px;background:#fff}.card h4{font:700 17px/24px var(--f)}.card .lead-h{font:700 20px/26px var(--f);margin:4px 0 6px}.card .sub{font-size:14px;line-height:20px;color:var(--body);margin-bottom:14px}.rel{display:grid;gap:14px;margin-top:14px}.rel a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;border-radius:12px;padding:4px;margin:-4px;transition:background .15s}.rel a:hover{background:var(--subtle)}.rel a:hover .rt{color:var(--orange)}.rel .th{aspect-ratio:1;border-radius:10px;overflow:hidden}.rel .rt{font:600 14px/19px var(--f);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;transition:color .15s}.lead{display:grid;gap:12px}.phone{display:flex;gap:8px}.phone select{width:84px;flex:none;height:40px;border:1px solid var(--hover);border-radius:var(--r-btn);padding:0 8px;background:#fff;cursor:pointer}.check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:17px;color:var(--body);cursor:pointer}.check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--disabled);border-radius:5px;flex:none;margin:0;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}.check input:checked{background:var(--content);border-color:var(--content)}.check input:checked::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}.invalid.check input{border-color:var(--error)}.btn[disabled]{background:var(--hover);color:var(--disabled);cursor:not-allowed}footer{background:var(--inverse);color:var(--inverse-content);padding:48px 0 28px}.ft{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}.ft p{color:var(--disabled);font-size:14px;line-height:20px;margin-top:12px;max-width:30ch}.ft h5{margin:0 0 12px;font:600 13px/18px var(--f);letter-spacing:.6px;text-transform:uppercase;color:var(--disabled)}.ft a{display:block;font-size:14px;line-height:30px;transition:color .15s}.ft a:hover{color:var(--orange)}.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(239,240,247,.14);margin-top:36px;padding-top:20px;font-size:13px;color:var(--disabled)}.legal span a{margin-left:16px}.legal a:hover{color:#fff}.footer .logo i{background:var(--orange)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--content);color:#fff;font:500 14px/20px var(--f);padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;box-shadow:0 10px 30px rgba(13,51,55,.3)}.toast.show{opacity:1;transform:translate(-50%,0)}.inspect [data-c]{outline:1.5px dashed rgba(123,47,191,.55);outline-offset:2px;position:relative}.inspect [data-c]:hover{outline:2px solid #7b2fbf;background-color:rgba(123,47,191,.05)}.ilabel{position:fixed;z-index:90;pointer-events:none;background:#7b2fbf;color:#fff;font:600 11px/16px var(--f);padding:3px 7px;border-radius:5px;display:none;white-space:nowrap}.inspect .ilabel{display:block}@media (max-width:991px){.layout{grid-template-columns:minmax(0,1fr);gap:32px}.side{position:static;grid-template-columns:1fr 1fr}.side .card:first-child{grid-column:1/-1}.hero h1{font-size:38px;line-height:44px}}@media (max-width:767px){.c{padding:0 16px}.nav,.hdr-actions .outline{display:none}.burger{display:block}.hero-in{grid-template-columns:1fr;gap:24px}.hero{padding:16px 0 28px}.hero h1{font-size:30px;line-height:36px;letter-spacing:-.3px}.hero-stacked .photo{aspect-ratio:4/3}.article h2{font-size:24px;line-height:32px;margin-top:32px}.article h3{font-size:20px;line-height:28px}.article p{font-size:16px;line-height:26px}.figure-wrap,.news{grid-template-columns:minmax(0,1fr)}.side{grid-template-columns:minmax(0,1fr)}.cta{flex-direction:column;align-items:flex-start;padding:24px}.cta .btn{width:100%}.ft{grid-template-columns:1fr 1fr}.ft>div:first-child{grid-column:1/-1}.stat strong{font-size:40px;line-height:44px}.quote q{font-size:19px;line-height:28px}}</style></head><body><div class='progress' aria-hidden='true'></div><div class='ilabel' aria-hidden='true'></div><header class='hdr' data-c='Site Header'><div class='c'><a href='#top' class='logo' data-c='Logo'><i></i>beyond menu</a><nav class='nav' aria-label='Main'><a href='#' class='on' data-c='Nav Link'>Offerings</a><a href='#' data-c='Nav Link'>Resources</a><a href='#' data-c='Nav Link'>Company</a></nav><div class='hdr-actions'><a href='#' class='btn outline s' data-c='Button · outline · S' data-toast='Log in is not part of this preview'>Log in</a><a href='#lead' class='btn primary s' data-c='Button · primary · S' data-focus-lead>Get a demo</a><button class='burger' aria-label='Open menu' aria-expanded='false' data-c='Icon Button'><span></span></button></div></div><div class='mmenu'><a href='#'>Offerings</a><a href='#'>Resources</a><a href='#'>Company</a><a href='#' class='btn outline block' data-toast='Log in is not part of this preview'>Log in</a></div></header><main id='top'><section class='hero' data-c='Article Hero'><div class='c'><div class='crumb' data-c='Breadcrumb'><a href='#'>Blog</a><span>/</span><a href='#'>Build Loyalty</a><span>/</span>Phoenix</div><div class='hero-in' style='margin-top:20px'><div><span class='tag' data-c='Tag'>Build Loyalty</span><h1 data-c='Heading · H1'>Restaurant Marketing in Phoenix: A Guide for Independent Operators</h1><div class='meta' data-c='Article Meta'><b>Beyond Menu Team</b><span>·</span>25 September 2026<span>·</span>12 min read</div></div><div class='photo' role='img' aria-label='Hands typing on a laptop' data-c='Image Wrap'><span class='phone'></span></div></div></div></section><div class='c layout'><article class='article'><p data-c='Text · Body L'>If you run an independent restaurant in Phoenix, you already know the rhythm: packed patios from November through April, then a long, hot stretch where foot traffic drops and the regulars you built all winter disappear. The restaurants that keep growing are the ones that plan for both seasons.</p><p data-c='Text · Body L'>This guide walks through what makes Phoenix different, how to plan your marketing around the seasons, and the simple tools that keep orders coming in when the temperature climbs past 110°F.</p><div class='callout' data-c='Callout · list'><b>Quick insights before you dig in</b><ul data-c='List'><li>Google comes first, so lead with reviews and a complete profile.</li><li>Own your order link instead of sending every guest to a third-party app.</li><li>Keep it running all summer with delivery, loyalty and indoor offers.</li></ul></div><h2 id='why' data-c='Section Heading · H2'>Why Phoenix Restaurant Marketing Is Different</h2><p data-c='Text · Body L'>Phoenix keeps growing, and so does the competition for every table. Spring brings a wave of visitors for baseball, golf and festivals. Summer brings heat that keeps people indoors and ordering in. A single campaign can't do both jobs, which is why the strongest operators run <a href='#' data-c='Link'>two playbooks a year</a>.</p><div class='stat' data-c='Callout · stat'><strong>$119M</strong><p>Spent at bars and restaurants by out-of-state fans during the 2026 Cactus League season.</p><small>Source: Cactus League 2026 economic impact study</small></div><h3 data-c='Heading · H3'>Build a Phoenix Marketing Calendar Around the Seasons</h3><div class='figure-wrap'><figure data-c='Figure'><div class='photo' role='img' aria-label='Laptop on a restaurant counter'><span class='phone'></span></div><figcaption>Plan your summer offers while the patio is still full.</figcaption></figure><p data-c='Text · Body L'>Start planning in March, while spring traffic is at its peak. Collect guest emails and phone numbers with every order, set up a loyalty reward that only unlocks in June, and line up delivery promotions for the hottest weeks. By the time the heat arrives, your marketing is already running.</p></div><div class='quote' data-c='Pull Quote · bar'><q>Summer used to be three months. Now summer is really six months.</q><span>Kimber Lanning, Local First Arizona</span></div><form class='news js-news' novalidate data-c='Newsletter · inline'><div><span class='eyebrow'>Newsletter</span><h4>Marketing ideas for slow months</h4><p>One practical tip a week for independent restaurants. No spam.</p></div><div class='slot'><div class='field' data-c='Input'><label for='n1'>Email address</label><div class='row'><input id='n1' class='input' type='email' placeholder='you@restaurant.com' autocomplete='email'><button class='btn primary' data-c='Button · primary · M'>Subscribe</button></div><span class='msg' aria-live='polite'></span></div></div></form><h2 id='faq' data-c='Section Heading · H2'>Frequently asked questions</h2><div class='faq' data-c='FAQ Item'><details open><summary>How do Phoenix restaurants survive the summer?<i aria-hidden='true'></i></summary><p>Plan for two seasons. Push delivery, loyalty and indoor offers from June to September, and keep your Google profile fresh so new residents find you.</p></details><details><summary>When should I start my summer marketing?<i aria-hidden='true'></i></summary><p>In March. Spring is when you have the most guests in the door, so it's the best time to collect contact details and enrol people in loyalty.</p></details><details><summary>Do I need my own ordering link?<i aria-hidden='true'></i></summary><p>Yes. A direct link means lower fees and guest data you own, so you can bring regulars back without paying for every order.</p></details></div><div class='cta' data-c='CTA Banner'><div><h4>Turn summer regulars into year-round regulars</h4><p>See how independent restaurants in Phoenix use Beyond Menu to fill slow nights.</p></div><a href='#lead' class='btn primary l' data-focus-lead data-c='Button · primary · L'>Get a free demo →</a></div></article><aside class='side'><div class='card' data-c='Related Articles'><h4>Related Articles</h4><div class='rel'><a href='#' data-toast='Related articles open other posts on the live blog' data-c='Article Card'><div class='th'><div class='photo small'></div></div><div><span class='tag soft'>Marketing</span><div class='rt'>Restaurant Marketing in Scottsdale: A Seasonal Guide</div></div></a><a href='#' data-toast='Related articles open other posts on the live blog' data-c='Article Card'><div class='th'><div class='photo small'></div></div><div><span class='tag soft'>Loyalty</span><div class='rt'>How to Build a Loyalty Program Guests Actually Use</div></div></a><a href='#' data-toast='Related articles open other posts on the live blog' data-c='Article Card'><div class='th'><div class='photo small'></div></div><div><span class='tag soft'>Operations</span><div class='rt'>Delivery Without the Fees: Owning Your Order Link</div></div></a></div></div><form class='card js-news' novalidate data-c='Newsletter · card'><span class='eyebrow'>Newsletter</span><div class='lead-h'>Marketing ideas for slow months</div><p class='sub'>One tip a week. No spam.</p><div class='slot'><div class='field' data-c='Input'><label for='n2'>Email address</label><input id='n2' class='input' type='email' placeholder='you@restaurant.com' autocomplete='email'><span class='msg' aria-live='polite'></span></div><button class='btn primary block' style='margin-top:12px' data-c='Button · primary · M'>Subscribe</button></div></form><form class='card lead' id='lead' novalidate data-c='Lead Form'><span class='eyebrow'>Free demo</span><div class='lead-h'>See your summer marketing on autopilot</div><div class='slot' style='display:grid;gap:12px'><div class='field' data-c='Input'><label for='ln'>Restaurant name</label><input id='ln' class='input' name='name' placeholder='Saguaro Kitchen' autocomplete='organization'><span class='msg'></span></div><div class='field' data-c='Input'><label for='le'>Email</label><input id='le' class='input' name='email' type='email' placeholder='owner@restaurant.com' autocomplete='email'><span class='msg'></span></div><div class='field' data-c='Phone Input'><label for='lp'>Phone</label><div class='phone'><select aria-label='Country code'><option>🇺🇸 +1</option><option>🇨🇦 +1</option><option>🇲🇽 +52</option></select><input id='lp' class='input' name='phone' type='tel' placeholder='(602) 555-0142' autocomplete='tel'></div><span class='msg'></span></div><label class='check' data-c='Checkbox'><input type='checkbox' name='consent'><span>I agree to receive calls and texts from Beyond Menu about my demo.</span></label><button class='btn primary block' data-c='Button · primary · M'>Get a free demo</button></div></form></aside></div></main><footer class='footer' data-c='Footer'><div class='c'><div class='ft'><div><a href='#top' class='logo' style='display:flex;line-height:1'><i></i>beyond menu</a><p>Online ordering and marketing built for independent restaurants.</p></div><div><h5>Offerings</h5><a href='#'>Online Ordering</a><a href='#'>Marketing</a><a href='#'>Loyalty</a><a href='#'>Websites</a></div><div><h5>Resources</h5><a href='#'>Blog</a><a href='#'>Guides</a><a href='#'>Case Studies</a></div><div><h5>Company</h5><a href='#'>About</a><a href='#'>Careers</a><a href='#'>Contact</a></div></div><div class='legal'><span>© 2026 Beyond Menu. All rights reserved.</span><span><a href='#'>Privacy</a><a href='#'>Terms</a></span></div></div></footer><div class='toast' role='status'></div> <script> (function(){ var d=document,b=d.body,toastEl=d.querySelector('.toast'),tt; function toast(t){toastEl.textContent=t;toastEl.classList.add('show');clearTimeout(tt);tt=setTimeout(function(){toastEl.classList.remove('show')},2200)} d.addEventListener('click',function(e){var a=e.target.closest('a');if(!a)return;var h=a.getAttribute('href'); if(a.hasAttribute('data-toast')){e.preventDefault();toast(a.getAttribute('data-toast'));return} if(a.hasAttribute('data-focus-lead')){e.preventDefault();b.classList.remove('menu-open');var l=d.getElementById('lead');l.scrollIntoView({behavior:'smooth',block:'center'});setTimeout(function(){d.getElementById('ln').focus({preventScroll:true})},450);return} if(h==='#'){e.preventDefault();toast('Navigation is not part of this preview')} }); var bg=d.querySelector('.burger');bg.addEventListener('click',function(){var o=b.classList.toggle('menu-open');bg.setAttribute('aria-expanded',o)}); var art=d.querySelector('.article'),pr=d.querySelector('.progress'); function prog(){var r=art.getBoundingClientRect(),t=art.offsetHeight-innerHeight*0.6;var p=Math.min(1,Math.max(0,-r.top/Math.max(1,t)));pr.style.width=(p*100)+'%'} addEventListener('scroll',prog,{passive:true});prog(); var emailRe=/^[^ @]+@[^ @]+[.][^ @]{2,}$/; function setErr(field,m){field.classList.toggle('invalid',!!m);var s=field.querySelector('.msg');if(s)s.textContent=m||''} function success(form,text){var s=form.querySelector('.slot');s.innerHTML='<div class=ok role=status>'+text+'</div>'} d.querySelectorAll('.js-news').forEach(function(f){f.addEventListener('submit',function(e){e.preventDefault();var i=f.querySelector('input'),fld=i.closest('.field'); if(!i.value.trim()){setErr(fld,'Enter your email address.');i.focus();return} if(!emailRe.test(i.value.trim())){setErr(fld,'That email doesn’t look right. Check for a typo.');i.focus();return} setErr(fld,'');success(f,'You’re subscribed. Your first tip arrives Monday.')}); f.querySelector('input').addEventListener('input',function(){this.closest('.field').classList.contains('invalid')&&setErr(this.closest('.field'),'')})}); var lf=d.getElementById('lead'); lf.addEventListener('input',function(e){var fld=e.target.closest('.field');if(fld&&fld.classList.contains('invalid'))setErr(fld,'');if(e.target.name==='consent')e.target.closest('.check').classList.remove('invalid')}); lf.addEventListener('change',function(e){if(e.target.name==='consent')e.target.closest('.check').classList.remove('invalid')}); lf.addEventListener('submit',function(e){e.preventDefault();var first=null; function chk(name,test,m){var i=lf.querySelector('[name='+name+']'),fld=i.closest('.field');var bad=test(i.value.trim());setErr(fld,bad?m:'');if(bad&&!first)first=i} chk('name',function(v){return v.length<2},'Enter your restaurant’s name.'); chk('email',function(v){return !emailRe.test(v)},'Enter a valid email address.'); chk('phone',function(v){return v.replace(/[^0-9]/g,'').length<7},'Enter a phone number we can reach you on.'); var c=lf.querySelector('[name=consent]');if(!c.checked){c.closest('.check').classList.add('invalid');if(!first)first=c} if(first){first.focus();return} var n=lf.querySelector('[name=name]').value.trim();success(lf,'Thanks! We’ll call '+n.replace(/[<>&]/g,'')+' within one business day.');toast('Demo request sent (preview only, nothing was submitted)')}); var ph=d.getElementById('lp');ph.addEventListener('input',function(){var v=ph.value.replace(/[^0-9]/g,'').slice(0,10);if(v.length>6)ph.value='('+v.slice(0,3)+') '+v.slice(3,6)+'-'+v.slice(6);else if(v.length>3)ph.value='('+v.slice(0,3)+') '+v.slice(3);else ph.value=v}); var lab=d.querySelector('.ilabel'); d.addEventListener('mousemove',function(e){if(!b.classList.contains('inspect'))return;var el=e.target.closest('[data-c]');if(!el){lab.style.display='none';return}lab.style.display='block';lab.textContent=el.getAttribute('data-c');var r=el.getBoundingClientRect();lab.style.left=Math.max(4,Math.min(r.left,innerWidth-lab.offsetWidth-4))+'px';lab.style.top=Math.max(4,r.top-22)+'px'}); d.addEventListener('mouseleave',function(){lab.style.display=''}); window.bmSet=function(o){if(o.hero){b.classList.remove('hero-split','hero-stacked','hero-band');b.classList.add('hero-'+o.hero)}if('inspect' in o){b.classList.toggle('inspect',!!o.inspect);lab.style.display=''}}; var q=new URLSearchParams(location.search);if(q.get('hero'))bmSet({hero:q.get('hero')}); window.addEventListener('message',function(e){if(e.data&&e.data.bm)bmSet(e.data.bm)}); })(); </script> </body></html> </textarea>
Client:
Beyond Menu Blog Design System
Design System | Component Library | Blog Templates
Beyond Menu Blog Design System
Client
Beyond Menu Blog Design System
Year
2026
Scope of Work
Design System | Component Library | Blog Templates
Location
Cairo
Beyond Menu is an online ordering and marketing platform for independent restaurants. I designed a unified design system for its blog so that every article, guide and landing page is assembled from the same components, colors and type.
