Barbershop Website Design SystemDESIGN.md alpha

A barbershop website design system for classic and modern barbers, grooming lounges and shave parlours. It should feel like a well-kept shop with leather chairs and brass details: confident, masculine without cliches, and tidy. Booking a chair with a favourite barber must take less than a minute. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#14213D
secondary#7A2E2E
tertiary#C9A063
neutral#8B8E97
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayOswald · 56px · SemiBold

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

headline-lgOswald · 40px · SemiBold

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

headline-mdOswald · 28px · SemiBold

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

headline-smOswald · 22px · SemiBold

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

body-lgSource Sans 3 · 18px · Regular

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

body-mdSource Sans 3 · 16px · Regular

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

body-smSource Sans 3 · 14px · Regular

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

label-lgSource Sans 3 · 16px · Bold

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

label-mdSource Sans 3 · 13px · Bold

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

label-smSource Sans 3 · 12px · SemiBold

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

statOswald · 32px · SemiBold

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

Corner Radius

0px
2px
4px
6px
9999px

Spacing

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

A barbershop website design system for classic and modern barbers, grooming lounges and shave parlours. It should feel like a well-kept shop with leather chairs and brass details: confident, masculine without cliches, and tidy. Booking a chair with a favourite barber must take less than a minute. 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

eyebrow

default

default

default

default

default

default

default

badge

success

alert

error

Do's & Don'ts

Do

Do show real haircuts from the shop in the gallery.
Do make it possible to choose a specific barber when booking.

Don't

Don't overuse the barber-pole stripe; once per page is enough.
Don't put white text on brass.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 7.5 KB
Downloads 3
Copies 1

Use with MCP

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

Don't have the MCP? Install it here