Family Bakery Website Design SystemDESIGN.md alpha

This system is for family bakeries, patisseries and small bread shops: the daily bread list, custom cake orders, pickup slots and the addresses of a few shops around town. It should feel like a warm bakery counter early in the morning, calm and generous, with soft shapes that echo round loaves, rolls and cakes. Fonts were chosen with full Latin Extended coverage for Polish, Czech and other Central European text.

primary#1C1917
secondary#A8441A
tertiary#F2A054
neutral#8E857C
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayUrbanist · 56px · Medium

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

headline-lgUrbanist · 40px · Medium

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

headline-mdUrbanist · 28px · Medium

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

headline-smUrbanist · 22px · Medium

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

body-lgUrbanist · 18px · Regular

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

body-mdUrbanist · 16px · Regular

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

body-smUrbanist · 14px · Regular

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

label-lgUrbanist · 16px · Bold

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

label-mdUrbanist · 13px · Bold

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

label-smUrbanist · 12px · SemiBold

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

statUrbanist · 32px · Medium

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

Corner Radius

0px
20px
999px
40px
9999px

Spacing

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

This system is for family bakeries, patisseries and small bread shops: the daily bread list, custom cake orders, pickup slots and the addresses of a few shops around town. It should feel like a warm bakery counter early in the morning, calm and generous, with soft shapes that echo round loaves, rolls and cakes. Fonts were chosen with full Latin Extended coverage for Polish, Czech and other Central European text.

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.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Chips

defaultaccent

Stat

default

Caption

default

default

Navigation

default

Footer

default

Elevation & Depth

card-shadow

Do's & Don'ts

Do

Crop product photos into circles and connect them with thin arcs.
Show which bread is available today and until when.

Don't

Use square corners anywhere. All elements must be rounded.
Use bold headlines; Medium (500) weight is sufficient.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 7.9 KB
Downloads 4
Copies 1

Use with MCP

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

Don't have the MCP? Install it here