Hair Salon Website Design System for Modern SalonsDESIGN.md alpha
A hair salon website design system for modern hair salons, color studios and beauty bars. It should feel like a fashion editorial: calm, elegant and confident, with the portfolio of real work as the hero. The practical side must stay effortless: service list with prices, stylist choice and online booking in a few taps.
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: 4pxA hair salon website design system for modern hair salons, color studios and beauty bars. It should feel like a fashion editorial: calm, elegant and confident, with the portfolio of real work as the hero. The practical side must stay effortless: service list with prices, stylist choice and online booking in a few taps.
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.
eyebrow
default
default
default
default
default
default
default
default
default
Chips
Use with MCP
Don't have the MCP? Install it here