Tavola Design System — Next.js + Tailwind 4 UI Kit for Restaurant & Hospitality Apps, with Tokens, 15 Components, App Patterns & Docs Site

This is a design system. You're buying the source code for a UI kit and its documentation site: design tokens, React components and app patterns you copy into your own Next.js project. It has the look of the Restaurant template, packaged for building booking flows, guest accounts, gift cards and front-of-house tools. The restaurant, guests and bookings in the examples are fictional.

What's inside

• Design tokens in one JSON file: colour roles for two themes, a fluid type scale, spacing, soft radii (pills, an archway frame, and control, popover and item radii), warm shadows, easing curves, durations and layout. One command turns them into Tailwind 4 theme variables, so bg-paper, text-ink, rounded-control and ease-out work as utilities
• 15 documented components: pill button, dropdown menu, toolbar, label, display title, band surface, text field / text area / select, input variants (icon, unit, character count, show-password, search with shortcut), switch and segmented control, checkbox group with select-all, radio group (list or cards), number stepper for guests and covers, date picker with calendar, toasts and theme toggle
• 5 app patterns: guest sign in, restaurant settings, tonight's reservations list with toolbar, gift card checkout and a table booking form, fully interactive and ready to copy
• A documentation site you can deploy for your team: foundations, a page per component with live examples, props tables, do/don't guidance and accessibility notes, plus a full token reference

Design

• Two warm themes: Day (peach paper, burgundy ink, coral) and Night (deep wine, cream, soft coral), switched by one attribute
• Bodoni Moda for titles with an italic accent, Figtree for everything you read quickly, labels in sentence case
• Pills for anything you press, generous spacing, and unhurried motion: menus settle from their trigger and numbers roll as they change

Accessibility

• WCAG contrast ratios computed from the tokens and shown in the docs; text pairs pass AA in both themes
• Menus, toolbars, radio groups, the stepper and the calendar follow WAI-ARIA keyboard patterns (arrow keys, Home/End, Escape returns focus)
• Real buttons, links and labelled inputs; visible focus everywhere; motion switches off for reduced motion

Easy to make yours

• Edit the JSON tokens and regenerate the CSS; components only use roles, so a new palette or corner style applies everywhere
• Every component is one typed file with no extra runtime beyond Framer Motion and Lucide icons
• The docs site ships with the source: rename it and deploy it as your own reference

Stack: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, Framer Motion, Lucide icons.