MarketNest

MarketNest mockup preview
Click to expand

MarketNest is a design system for handmade goods and artisan marketplaces where every product tells a story. The spacious layout gives makers room to showcase their craft through rich imagery and narrative descriptions. Warm terracotta, earthy sand, and forest green evoke natural materials and handcrafted authenticity. A flat, border-driven visual style avoids the corporate polish of mainstream e-commerce, instead embracing the warmth and imperfection that buyers of artisan goods cherish.

Primary#C2410C
Secondary#D4A373
Tertiary#365314
Background#FFFBF5
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayLora · 48px · Bold

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

HeadlineLora · 36px · SemiBold

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

SubheadLora · 26px · SemiBold

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

Body LargeOpen Sans · 18px · Regular

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

BodyOpen Sans · 16px · Regular

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

Body SmallOpen Sans · 14px · Regular

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

CaptionOpen Sans · 12px · Medium

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

OverlineOpen Sans · 11px · Bold

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

CodeSource Code Pro · 14px · Regular

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

Corner Radius

0px
4px
8px
12px
20px
9999px

Spacing

Base: 8px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

MarketNest is a design system for handmade goods and artisan marketplaces where every product tells a story. The spacious layout gives makers room to showcase their craft through rich imagery and narrative descriptions. Warm terracotta, earthy sand, and forest green evoke natural materials and handcrafted authenticity. A flat, border-driven visual style avoids the corporate polish of mainstream e-commerce, instead embracing the warmth and imperfection that buyers of artisan goods cherish.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

FilterStatus SuccessStatus WarningStatus Error

Elevation & Depth

Subtle
Medium
Large
Overlay
Focus Ring

Do's & Don'ts

Do

Feature the maker's story alongside their product; include a seller avatar and short bio on every product card.
Use warm, natural photography with soft lighting; avoid stark white studio backgrounds.
Highlight materials and process (e.g., "hand-thrown stoneware") with the tertiary forest green tags.
Use the serif heading font (Lora) to reinforce the handcrafted, editorial feel of the marketplace.
Show real customer photos in reviews to build community trust.

Don't

Use aggressive urgency tactics (countdown timers, "only 1 left!"); artisan buyers value authenticity over pressure.
Apply drop shadows to product cards; the flat, bordered style is intentional and must remain consistent.
Use the terracotta primary for decorative borders; reserve it for interactive, actionable elements.
Crop product images to squares if the item is tall or wide; use natural aspect ratios.
Hide the seller's location or shipping origin; transparency about provenance is core to the marketplace trust model.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.4 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/marketnest and implement it in my code

Don't have the MCP? Install it here