Local Coffee Shop Website Design SystemDESIGN.md alpha

This system is for independent coffee shops, neighborhood cafes and small roasteries that want a website as welcoming as their counter: today's menu, online ordering for pickup, a simple loyalty card, opening hours and the way to the door. It should feel like a sunny corner table with a flat white: warm, relaxed and a little handmade, but tidy enough that ordering takes seconds on a phone. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#1F5A45
secondary#8A5A2B
tertiary#D9A15B
neutral#8F8378
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayDM Serif Display · 56px · Regular

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

headline-lgDM Serif Display · 40px · Regular

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

headline-mdDM Serif Display · 28px · Regular

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

headline-smDM Serif Display · 22px · Regular

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

body-lgFigtree · 18px · Regular

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

body-mdFigtree · 16px · Regular

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

body-smFigtree · 14px · Regular

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

label-lgFigtree · 16px · Bold

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

label-mdFigtree · 13px · Bold

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

label-smFigtree · 12px · SemiBold

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

statDM Serif Display · 32px · Regular

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

Corner Radius

0px
8px
999px
14px
9999px

Spacing

Base: 4px
4px
8px
8px
16px
24px
24px
40px
64px
96px
1200px

This system is for independent coffee shops, neighborhood cafes and small roasteries that want a website as welcoming as their counter: today's menu, online ordering for pickup, a simple loyalty card, opening hours and the way to the door. It should feel like a sunny corner table with a flat white: warm, relaxed and a little handmade, but tidy enough that ordering takes seconds on a phone. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

Components

Buttons

Inputs

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Chips

defaultaccent

stat

default

default

default

default

success

error

default

default

Elevation & Depth

card
floating-button

Do's & Don'ts

Do

keep caramel for loyalty and new items only, never for main buttons
show opening hours and address on every page footer
use real photos of the counter, drinks and people, never stock-looking flat lays only

Don't

use pure black text or pure white page backgrounds
put white text on caramel or mint foam
Download .md

License CC-BY
Uploaded yesterday
Version v1
File size 8.6 KB
Downloads 4
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/stormcube/local-coffee-shop-website-design-system and implement it in my code

Don't have the MCP? Install it here