Design System
A comprehensive guide to the MarketPlace visual identity, including our color palette, typography, and design principles.
Our core color palette combines warm, earthy tones with rich greens to create an inviting and trustworthy marketplace experience.
Cinnamon Wood
#A56D50
brand.500
Primary brand color
Reddish Brown
#8A4B3F
brand.600
Dark accent, hover states
Desert Sand
#D8B19E
cream.400
Warm neutral accent
Platinum
#E6EDEF
cream.300
Main background
Evergreen
#05250B
sage.900
Text, dark accents
Each primary color extends into a full scale from 50 to 900, providing flexibility for various UI states and contexts.
Brand (Cinnamon Wood)
50
#faf6f4
100
#f3ebe6
200
#e5d3c8
300
#d1b5a3
400
#b98b74
500
#a56d50
600
#8a4b3f
700
#6f3a31
800
#542c25
900
#3a1e1a
Sage (Evergreen)
50
#f0f4f1
100
#dce6df
200
#b5cabb
300
#8eae97
400
#679273
500
#47724f
600
#325738
700
#1f3c23
800
#0f2814
900
#05250b
Cream (Neutrals)
50
#fdfbf9
100
#f9f4f0
200
#f0e6de
300
#e6edef
400
#d8b19e
500
#c9a08b
600
#b88c75
700
#a07760
800
#86624d
900
#6b4e3d
Our typography pairs the elegant serif Playfair Display for headings with the clean, modern Montserrat for body text.
HEADINGS
Playfair Display
BODY TEXT
Montserrat
Extra Large (xl)
The quick brown fox jumps over the lazy dog.
Large (lg)
The quick brown fox jumps over the lazy dog.
Medium (md)
The quick brown fox jumps over the lazy dog.
Small (sm)
The quick brown fox jumps over the lazy dog.
Extra Small (xs)
The quick brown fox jumps over the lazy dog.
PLAYFAIR DISPLAY WEIGHTS
MONTSERRAT WEIGHTS
Thin 100
Extralight 200
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Extrabold 800
Black 900
See how our colors work together in common UI patterns.
BUTTONS
CARDS
Card Title
Card description text goes here.
$29.99
BADGES & TAGS
Our color combinations are designed to meet WCAG accessibility standards for text readability and visual contrast.
White on Evergreen
High contrast combination for dark backgrounds. Excellent for headers and important text.
Evergreen on Platinum
Primary text combination for light backgrounds. Clean and highly readable.
White on Cinnamon Wood
Brand color with white text for buttons and CTAs. Warm and inviting.
Cinnamon Wood on White
Accent text and links on light backgrounds. Draws attention without overwhelming.