Lime Commerce

Lime Commerce is a merchant-focused design system inspired by the world's leading e-commerce platform builder. It combines trustworthy green tones with clean, professional layouts designed to help entrepreneurs manage their online stores with confidence. The aesthetic is polished yet approachable — balancing the complexity of commerce management (inventory, orders, analytics) with an interface that never feels overwhelming. Every element is designed to guide action and build merchant confidence.

Primary#008060
Secondary#5C6AC4
Neutral#6D7175
Background#F6F6F7
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

labels/table headersInter · 12px · Medium

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

small bodyInter · 13px · Regular

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

body defaultInter · 14px · Regular

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

card titlesInter · 16px · SemiBold

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

page titlesInter · 20px · SemiBold

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

dashboard headlinesInter · 28px · Regular

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

Spacing

Base: 4px

Lime Commerce is a merchant-focused design system inspired by the world's leading e-commerce platform builder. It combines trustworthy green tones with clean, professional layouts designed to help entrepreneurs manage their online stores with confidence. The aesthetic is polished yet approachable — balancing the complexity of commerce management (inventory, orders, analytics) with an interface that never feels overwhelming. Every element is designed to guide action and build merchant confidence.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

statusremovable

Elevation & Depth

card
popover

Do's & Don'ts

Do

use cards as the primary content container — every section of a page should live inside a card
use the green (#008060) only for primary actions and success states — not for decoration
use the blue focus ring (#005BD3) for keyboard navigation, not green, for accessibility
use status badges with semantic background colors (green/yellow/red tints) for order and inventory states
keep form layouts single-column within cards for simplicity — merchants are not power users by default

Don't

use more than one primary (green) button per card — guide merchants to the single most important action
use custom colors for status badges — stick to the semantic success/warning/error palette
add shadows to elements inside cards — only cards themselves cast shadows
exceed 998px content width — wide layouts make admin forms harder to scan
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.3 KB
Downloads 37
Copies 3
clean dashboard ecommerce professional

Use with MCP

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

Don't have the MCP? Install it here