CartCraft
CartCraft is a design system for general-purpose online retail stores that prioritizes trustworthiness and a seamless shopping experience. The balanced standard density ensures products are easy to compare without overwhelming the page. A green primary conveys reliability and go-ahead confidence at checkout, blue secondary reinforces trust, and orange tertiary highlights promotions. Every component is optimized for clarity, making the path from product discovery to completed order feel effortless.
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.
Corner Radius
Spacing
Base: 8pxCartCraft is a design system for general-purpose online retail stores that prioritizes trustworthiness and a seamless shopping experience. The balanced standard density ensures products are easy to compare without overwhelming the page. A green primary conveys reliability and go-ahead confidence at checkout, blue secondary reinforces trust, and orange tertiary highlights promotions. Every component is optimized for clarity, making the path from product discovery to completed order feel effortless.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Default
Item
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here