ecommercev1.0.0·light

Bazaar

Bazaar — Warm Conversion Commerce

ecommercewarmcoralconversionretail

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

bazaar · rendered from tokens

Color

brand.primary

oklch(0.62 0.19 35)

brand.secondary

oklch(0.72 0.14 70)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.26 0.03 40)

text.muted

oklch(0.48 0.03 40)

text.link

oklch(0.62 0.19 35)

surface.base

oklch(0.99 0.005 60)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.01 60)

border.default

oklch(0.9 0.012 60)

state.success

oklch(0.58 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 250)

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 Bazaar into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/bazaar.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

Bazaar turns browsing into buying with warmth, not pressure. A coral primary makes "Add to cart" impossible to miss; rounded shapes and a bouncy easing make the whole store feel hospitable and a little playful.

Layout & Grid

Product grids with large imagery, clear price hierarchy, and sticky add-to-cart on mobile. Promotions use color.secondary sparingly so the primary CTA wins.

Components

Buttons

Big, rounded color.brand.primary buttons with confident labels and a lift on hover via shadow.md.

Product Cards

Image-forward cards on color.surface.raised; badges use state colors with text so a "Sale" never reads as color alone.

Accessibility

Primary and muted text both pass WCAG AA on warm surfaces. Tap targets are large, the focus ring is high-contrast, and price/discount changes are announced.

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: bazaar

4name: Bazaar

5title: Bazaar — Warm Conversion Commerce

6version: 1.0.0

7category: ecommerce

8tags: [ecommerce, warm, coral, conversion, retail]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.62 0.19 35)", type: color }

17 secondary: { value: "oklch(0.72 0.14 70)", type: color }

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

19 text:

20 primary: { value: "oklch(0.26 0.03 40)", type: color }

21 muted: { value: "oklch(0.48 0.03 40)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.005 60)", type: color }

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

26 sunken: { value: "oklch(0.965 0.01 60)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.012 60)", type: color }

29 state:

30 success: { value: "oklch(0.58 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 250)", type: color }

34 typography:

35 family:

36 sans: { value: "Plus Jakarta Sans, 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.25rem", type: dimension }

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

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

58 shadow:

59 sm: { value: "0 1px 3px oklch(0.26 0.03 40 / 0.08)", type: shadow }

60 md: { value: "0 8px 24px oklch(0.26 0.03 40 / 0.12)", type: shadow }

61 motion:

62 duration:

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

64 easing:

65 standard: { value: "cubic-bezier(0.34, 1.2, 0.64, 1)", type: cubicBezier }

66 breakpoint:

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

68 iconography:

69 style: { value: "2px stroke, rounded, friendly", type: descriptor }

70 zIndex:

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

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

73---

75# Bazaar Design System

77## Brand & Voice

78Bazaar turns browsing into buying with warmth, not pressure. A coral primary

79makes "Add to cart" impossible to miss; rounded shapes and a bouncy easing make

80the whole store feel hospitable and a little playful.

82## Layout & Grid

83Product grids with large imagery, clear price hierarchy, and sticky add-to-cart

84on mobile. Promotions use `color.secondary` sparingly so the primary CTA wins.

86## Components

87### Buttons

88Big, rounded `color.brand.primary` buttons with confident labels and a lift on

89hover via `shadow.md`.

91### Product Cards

92Image-forward cards on `color.surface.raised`; badges use state colors with text

93so a "Sale" never reads as color alone.

95## Accessibility

96Primary and muted text both pass WCAG AA on warm surfaces. Tap targets are large,

97the focus ring is high-contrast, and price/discount changes are announced.

Related systems

View →

Button

Boutique

98AA

Boutique — Elegant Retail

ecommerceecommerceelegant

View →

Button

Carto

98AA

Carto — Marketplace Commerce

ecommerceecommercemarketplace

View →

Button

Drift

98AA

Drift — Coastal Lifestyle Store

ecommerceecommercecoastal