BistroMenu Design System

BistroMenu Design System mockup preview
Click to expand

BistroMenu is a warm, appetite-inducing design system inspired by the classic menu card. It is crafted for restaurant websites and digital menu boards where elegance meets readability. The serif typography and burgundy-gold palette evoke the intimacy of a fine dining experience while keeping dish descriptions and pricing scannable.

Primary#881337
Secondary#CA8A04
Tertiary#FFFBEB
Surface#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Playfair Display · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Playfair Display · 28px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Playfair Display · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Playfair Display · 18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyLora · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallLora · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoSource Code Pro · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 12px

BistroMenu is a warm, appetite-inducing design system inspired by the classic menu card. It is crafted for restaurant websites and digital menu boards where elegance meets readability. The serif typography and burgundy-gold palette evoke the intimacy of a fine dining experience while keeping dish descriptions and pricing scannable.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus AvailableStatus LimitedStatus Sold OutStatus Featured

Elevation & Depth

sm
md
lg
focus

Do's & Don'ts

Do

use Playfair Display for all dish category headings to maintain the menu-card elegance.
display prices in monospace to ensure clean column alignment on menus.
use dashed dividers between menu items for the traditional bistro feel.
use the featured variant (gold top border) sparingly for chef's specials or seasonal items.
include dietary icons (vegetarian, gluten-free) as small chip components next to dish names.
maintain generous spacing (12px base) to let the typography breathe.

Don't

use neon or saturated accent colors — stick to the warm burgundy-gold palette.
overload cards with too many dish images; whitespace is part of the luxury experience.
place more than one primary CTA per menu section.
use the destructive button variant for standard actions like 'Remove from Cart'.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.3 KB
Downloads 0
elegant food landing-page premium warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/bistromenu and implement it in my code

Don't have the MCP? Install it here