Every decision — from typography to micro-interactions — was shaped by one question: can a restaurant owner who's never used a CMS feel confident using this on their phone?
Typography
Each font has a single purpose. Display attracts. Body informs. Mono quantifies. Restaurants can choose between three themes — the typography changes, the hierarchy doesn't.
Cafetería
Plus Jakarta Sans
Display · Headings
Pan de masa madre dorada en mantequilla
DM Sans
Body · Descriptions
$125
JetBrains Mono
Prices · Data
Theme Switcher — Live Preview
Cafetería Nimbus
Café de especialidad
Cappuccino
Espresso doble con leche texturizada
$65
Color
Orange for action. Stone for everything else. No harsh blacks — the darkest value is stone-900. Each restaurant injects their own primary via CSS custom properties. The system adapts without breaking.
Dynamic Color Injection
Each restaurant's primary color is injected as --menu-color on the menu container. Chips, prices, and accents consume it. The system never breaks because it never hardcodes color — it references the variable.
Cappuccino
$65
Matcha Latte
$65
--menu-color: #F97316
Spacing & Layout
The public menu uses generous spacing — it should feel premium, like a well-set table. The CMS uses compact spacing — it should feel efficient, like a kitchen during service.
Scale (base: 4px)
Responsive
Designed at 375px first. Desktop is an enhancement, not the starting point. Touch targets: 44-48px minimum. CTAs sticky at thumb reach.
375px
Primary
768px
1280px
Interaction
The system was designed for a user who's never used a CMS — and is editing their menu while standing in their kitchen with flour on their hands. Every interaction must be obvious, instant, and forgiving.
No 'Save' button anywhere. Every edit persists immediately with optimistic updates. A subtle toast confirms — the user never wonders 'did it save?'
Images show a shimmer placeholder while loading, then fade in over 300ms. The key={dish.id} trick resets state between different dishes.
Bottom nav tabs activate instantly via useTransition + optimistic state. A 2px progress bar appears only if navigation exceeds 100ms.
Every tappable element uses active:scale-90 with 75ms duration. Subtle but critical — it's the difference between 'this is a website' and 'this is an app.'
More Patterns
Swipe dismiss
Vaul drawer with spring physics. Scroll-aware — only closes when scrolled to top.
Focus ring
border-transparent → border-orange-400 on focus. Always present, never causes layout shift.
Confirm destructive
Auto-save for edits. Dialog confirmation only for deletions. Asymmetric trust.
Components
The public menu and the CMS share the same design tokens but use them at different densities. Premium spacing for diners. Compact efficiency for operators.
Public Menu
RestaurantHeader — name, cuisine, logo
CategoryChips — horizontal scroll, color-aware
MenuSection — category title + dish list
DishDetailDrawer — swipe dismiss, skeleton images
SearchBar — instant filter, debounced
MenuFooter — Menura badge (Free only)
ThemeColorMeta — dynamic Android status bar
CMS Dashboard
BottomNav — native-style, optimistic state
MenuTabs — carta selector, horizontal scroll
DishEditRow — inline edit, auto-resize textarea
ColorPicker — 10 presets + custom hex input
FontPicker — Instagram-style, live preview
InviteOwnerButton — generate link + WhatsApp share
PlanSection — pricing toggle, Stripe checkout
Principles
Every component is designed at 375px first. Desktop doesn't add features — it adds breathing room. The CMS has no sidebar. Navigation lives at the bottom, within thumb reach.
Color and typography are free for all plans. When a restaurant owner sees their brand color and chosen font on their menu, it stops being 'a Menura menu' and becomes 'their menu.'
If a UI needs a tooltip, the design failed. Every input, button, and gesture must be obvious to someone who only uses WhatsApp and their bank app. Label everything. Animate with purpose.
SSG for sub-2s loads. Optimistic updates for zero-latency editing. Skeleton shimmers instead of spinners. Auto-save instead of 'Submit'. The user should never feel like they're waiting.
Same orange focus ring on every input. Same scale-90 on every button. Same toast for every save. The user builds muscle memory fast because the system never surprises them.
30 dishes, 15 photos, custom colors, custom fonts, multi-menu — all free. The free plan must feel complete, not crippled. Pro adds scale, not identity.