Independent Bookstore Website Design SystemDESIGN.md alpha

This system is for independent bookstores, small publishers and literary cafes that want an online shop with the character of a real shop floor: staff picks with personal notes, author evenings, a reading club and a catalog you can actually browse. It should read like a good literary magazine: warm paper, confident type and one muted terracotta accent. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#A5563C
secondary#3F6A62
tertiary#E3B65E
neutral#8C8578
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayZilla Slab · 56px · Medium

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

headline-lgZilla Slab · 40px · Medium

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

headline-mdZilla Slab · 28px · Medium

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

headline-smZilla Slab · 22px · Medium

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

body-lgInter · 18px · Regular

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

body-mdInter · 16px · Regular

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

body-smInter · 14px · Regular

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

label-lgInter · 16px · Bold

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

label-mdInter · 13px · Bold

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

label-smInter · 12px · SemiBold

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

statZilla Slab · 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
6px
8px
12px
9999px

Spacing

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

This system is for independent bookstores, small publishers and literary cafes that want an online shop with the character of a real shop floor: staff picks with personal notes, author evenings, a reading club and a catalog you can actually browse. It should read like a good literary magazine: warm paper, confident type and one muted terracotta accent. 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.

eyebrow

default

default

default

default

default

default

default

Chips

defaultdefault

nav

default

default

Do's & Don'ts

Do

Let book covers carry the color; keep the interface calm
Use mustard only for staff picks and bestsellers

Don't

Use generic libraries; show the real shop and people
Use pure black text or pure white page backgrounds
Download .md

License MIT
Uploaded yesterday
Version v1
File size 8.2 KB
Downloads 5
Copies 1

Use with MCP

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

Don't have the MCP? Install it here