ecommercev1.0.0·light

Carto

Carto — Marketplace Commerce

ecommercemarketplacebluedealstrust

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

carto · rendered from tokens

Color

brand.primary

oklch(0.55 0.16 250)

brand.secondary

oklch(0.62 0.16 40)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.25 0.018 250)

text.muted

oklch(0.47 0.022 250)

text.link

oklch(0.55 0.16 250)

surface.base

oklch(0.99 0.003 250)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.962 0.006 250)

border.default

oklch(0.9 0.008 250)

state.success

oklch(0.57 0.14 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.72 0.15 75)

state.info

oklch(0.6 0.13 245)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Carto into your workflow.

Save the file for your tool — your agent then generates UI in Carto, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/carto.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Carto is a busy marketplace that stays trustworthy. A dependable blue carries navigation and checkout while a warm amber flags deals and savings. Efficient, familiar, and conversion-minded.

Layout & Grid

Dense product grids with strong price hierarchy, ratings, and sticky filters. The amber color.brand.secondary is rationed so the primary CTA always wins.

Components

Buttons

Blue color.brand.primary "Buy now" buttons at radius.md; "Add to cart" is a bordered secondary. Savings badges use amber with text.

Product Cards

Image-forward cards on color.surface.raised with rating, price, and a clear discount label that never relies on color alone.

Accessibility

Primary and muted text pass WCAG AA on every surface. Prices and discounts are announced, tap targets are large, and the focus ring is high-contrast.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: carto

4name: Carto

5title: Carto — Marketplace Commerce

6version: 1.0.0

7category: ecommerce

8tags: [ecommerce, marketplace, blue, deals, trust]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.16 250)", type: color }

17 secondary: { value: "oklch(0.62 0.16 40)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.25 0.018 250)", type: color }

21 muted: { value: "oklch(0.47 0.022 250)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.99 0.003 250)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

26 sunken: { value: "oklch(0.962 0.006 250)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.008 250)", type: color }

29 state:

30 success: { value: "oklch(0.57 0.14 150)", type: color }

31 danger: { value: "oklch(0.56 0.2 25)", type: color }

32 warning: { value: "oklch(0.72 0.15 75)", type: color }

33 info: { value: "oklch(0.6 0.13 245)", type: color }

34 typography:

35 family:

36 sans: { value: "Inter, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.2rem", type: dimension }

42 xl: { value: "1.55rem", type: dimension }

43 "2xl": { value: "2.05rem", type: dimension }

44 "3xl": { value: "2.8rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 700, type: fontWeight }

48 leading:

49 tight: { value: 1.15, type: number }

50 normal: { value: 1.55, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.375rem", type: dimension }

55 md: { value: "0.625rem", type: dimension }

56 lg: { value: "1rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.25 0.02 250 / 0.07)", type: shadow }

60 md: { value: "0 6px 18px oklch(0.25 0.02 250 / 0.1)", type: shadow }

61 motion:

62 duration:

63 base: { value: "170ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.25, 0, 0.15, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.5px stroke, rounded, commercial", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Carto Design System

77## Brand & Voice

78Carto is a busy marketplace that stays trustworthy. A dependable blue carries

79navigation and checkout while a warm amber flags deals and savings. Efficient,

80familiar, and conversion-minded.

82## Layout & Grid

83Dense product grids with strong price hierarchy, ratings, and sticky filters.

84The amber `color.brand.secondary` is rationed so the primary CTA always wins.

86## Components

87### Buttons

88Blue `color.brand.primary` "Buy now" buttons at `radius.md`; "Add to cart" is a

89bordered secondary. Savings badges use amber with text.

91### Product Cards

92Image-forward cards on `color.surface.raised` with rating, price, and a clear

93discount label that never relies on color alone.

95## Accessibility

96Primary and muted text pass WCAG AA on every surface. Prices and discounts are

97announced, tap targets are large, and the focus ring is high-contrast.

Related systems

View →

Button

Bazaar

98AA

Bazaar — Warm Conversion Commerce

ecommerceecommercewarm

View →

Button

Boutique

98AA

Boutique — Elegant Retail

ecommerceecommerceelegant

View →

Button

Drift

98AA

Drift — Coastal Lifestyle Store

ecommerceecommercecoastal