RecipeBook Design System

RecipeBook Design System mockup preview
Click to expand

RecipeBook is a homey, step-by-step design system tailored for recipe sharing and cooking instruction platforms. It emphasizes clarity in ingredient lists and sequential cooking steps. The warm, natural color palette and rounded components create a welcoming kitchen-table feel that encourages users to explore, save, and share recipes.

Primary#65A30D
Secondary#DC2626
Tertiary#FEF9C3
Background#FFFBF5
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Merriweather · 32 · Black

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

h2Merriweather · 24 · Bold

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

h3Merriweather · 20 · Bold

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

h4Merriweather · 16 · Bold

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

bodyNunito · 15 · Regular

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

smallNunito · 13 · Regular

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

monoJetBrains Mono · 14 · Regular

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

Spacing

Base: 8px

RecipeBook is a homey, step-by-step design system tailored for recipe sharing and cooking instruction platforms. It emphasizes clarity in ingredient lists and sequential cooking steps. The warm, natural color palette and rounded components create a welcoming kitchen-table feel that encourages users to explore, save, and share recipes.

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

FilterStatusPublishedStatusDraftStatusAllergyStatusFavorited

List

Default

Selected

Checkbox

Default

Checked

Indeterminate

Tooltip

Default

Elevation & Depth

sm
md
lg
focus

Do's & Don'ts

Do

use monospace font for all measurements and quantities (e.g., "2 cups", "350F")
number cooking steps with `primary` colored circles for clear visual sequence
use the strikethrough checkbox pattern for ingredient shopping/prep tracking
include a tip box (using `surface-raised` yellow) for chef's tips and substitutions
display prep time, cook time, and servings prominently in every recipe card header
provide allergy and dietary chips (gluten-free, vegan) near the recipe title

Don't

truncate ingredient lists — always show the full list without scrolling when possible
use the secondary red for anything except favorites and error states
auto-play video content; let users initiate playback from step instructions
use complex layouts for step instructions — one step per row, clear numbering
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0
clean food light organic warm

Use with MCP

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

Don't have the MCP? Install it here