Flower Shop Website Design SystemDESIGN.md alpha

This system is for local florists, flower delivery services and floristry workshops: bouquets of the day, same-day delivery, weekly flower subscriptions and wedding enquiries. It should feel like walking into a bright flower shop: cheerful and colorful, but never messy. Each section wears one soft flower color as a full card background.

primary#221F33
secondary#8E3F63
tertiary#F5B3A0
neutral#8D8795
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayBaloo 2 · 56px · Medium

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

headline-lgBaloo 2 · 40px · Medium

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

headline-mdBaloo 2 · 28px · Medium

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

headline-smBaloo 2 · 22px · Medium

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

body-lgPlus Jakarta Sans · 18px · Regular

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

body-mdPlus Jakarta Sans · 16px · Regular

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

body-smPlus Jakarta Sans · 14px · Regular

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

label-lgPlus Jakarta Sans · 16px · Bold

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

label-mdPlus Jakarta Sans · 13px · Bold

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

label-smPlus Jakarta Sans · 12px · SemiBold

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

statBaloo 2 · 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
8px
12px
24px
9999px

Spacing

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

This system is for local florists, flower delivery services and floristry workshops: bouquets of the day, same-day delivery, weekly flower subscriptions and wedding enquiries. It should feel like walking into a bright flower shop: cheerful and colorful, but never messy. Each section wears one soft flower color as a full card background.

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

Chips

defaultaccent

stat

default

default

default

default

default

default

default

default

Elevation & Depth

product-card

Do's & Don'ts

Do

Use one flower color per feature card, never gradients between them.
Keep all text on colored cards dark (night plum).

Don't

Don't put more than four colored cards next to each other.
Don't use pure white page backgrounds or neon pinks.
Download .md
Storm Cube Marketing Agency Storm Cube Marketing Agency @stormcube
License MIT
Uploaded yesterday
Version v1
File size 8.0 KB
Downloads 3
Copies 0
ecommerce landing-page light playful warm

Use with MCP

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

Don't have the MCP? Install it here