CafeBlend Design System

CafeBlend Design System mockup preview
Click to expand

CafeBlend is a cozy, coffee-toned design system for coffee shop and small cafe websites. The neumorphism-inspired elevation and warm browns create a tactile, inviting atmosphere that mirrors the comfort of a neighborhood cafe. Rounded forms and soft gradients make every element feel warm to the touch.

Primary#8B5E3C
Secondary#C4956A
Tertiary#FDF6EC
Surface#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1DM Serif Display · 34px · Regular

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

h2DM Serif Display · 26px · Regular

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

h3DM Serif Display · 20px · Regular

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

h4DM Serif Display · 16px · Regular

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

bodyWork Sans · 14px · Regular

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

smallWork Sans · 12px · Regular

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

monoIBM Plex Mono · 13px · Regular

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

Spacing

Base: 8px

CafeBlend is a cozy, coffee-toned design system for coffee shop and small cafe websites. The neumorphism-inspired elevation and warm browns create a tactile, inviting atmosphere that mirrors the comfort of a neighborhood cafe. Rounded forms and soft gradients make every element feel warm to the touch.

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::Seasonal

Checkbox

Unchecked

Checked

Indeterminate

Radio

Unchecked

Checked

Tooltip

Default

Elevation & Depth

raised
inset
sm
md
lg
focus

Do's & Don'ts

Do

use the neumorphic `raised`/`inset` shadows only on the warm cream background — they break on pure white.
keep the coffee-toned palette consistent; avoid introducing cool blues or grays.
use DM Serif Display sparingly for headlines only; never for body text.
include high-quality product photography with warm white balance matching the palette.
maintain a cozy, neighborhood feel — avoid corporate language or dense data tables.
test the neumorphic shadows in both light and dark ambient conditions for readability.

Don't

stack multiple neumorphic elements close together — they need spacing to maintain the soft 3D illusion.
apply `raised` shadow to small elements under 24px — the effect is lost and looks muddy.
use flat error states with neumorphic inputs; switch to bordered style for error/focus clarity.
use more than two headline sizes on a single page to keep the intimate cafe scale.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.8 KB
Downloads 0
food landing-page organic premium warm

Use with MCP

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

Don't have the MCP? Install it here