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.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 4pxThis 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
stat
default
default
default
default
success
error
default
default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here