ecommercev1.0.0·light

Boutique

Boutique — Elegant Retail

ecommerceelegantroseseriffashion

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

boutique · rendered from tokens

Color

brand.primary

oklch(0.48 0.13 5)

brand.secondary

oklch(0.62 0.07 30)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.23 0.012 350)

text.muted

oklch(0.46 0.018 350)

text.link

oklch(0.48 0.13 5)

surface.base

oklch(0.985 0.004 60)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.96 0.008 40)

border.default

oklch(0.9 0.01 40)

state.success

oklch(0.55 0.13 150)

state.danger

oklch(0.52 0.19 25)

state.warning

oklch(0.68 0.13 70)

state.info

oklch(0.56 0.1 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 Boutique into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Boutique is quiet luxury for small-batch retail. A deep rose and a soft serif display set an editorial, unhurried tone — the kind of store where whitespace signals confidence and the product is the hero.

Layout & Grid

Tall product imagery, wide margins, and slow, graceful transitions. Display copy is set in serif; UI labels stay in sans for legibility.

Components

Buttons

Minimal, near-square radius.md buttons in color.brand.primary or a hairline outline. Hover fades gently over 260ms.

Lookbook Cards

Edge-to-edge imagery on color.surface.raised with captions in muted text and a faint shadow.md on hover.

Accessibility

Despite the delicate aesthetic, primary and muted text pass WCAG AA on every surface. Thin icons always carry a text label, and focus states stay visible.

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

4name: Boutique

5title: Boutique — Elegant Retail

6version: 1.0.0

7category: ecommerce

8tags: [ecommerce, elegant, rose, serif, fashion]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.48 0.13 5)", type: color }

17 secondary: { value: "oklch(0.62 0.07 30)", type: color }

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

19 text:

20 primary: { value: "oklch(0.23 0.012 350)", type: color }

21 muted: { value: "oklch(0.46 0.018 350)", type: color }

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

23 surface:

24 base: { value: "oklch(0.985 0.004 60)", type: color }

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

26 sunken: { value: "oklch(0.96 0.008 40)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.01 40)", type: color }

29 state:

30 success: { value: "oklch(0.55 0.13 150)", type: color }

31 danger: { value: "oklch(0.52 0.19 25)", type: color }

32 warning: { value: "oklch(0.68 0.13 70)", type: color }

33 info: { value: "oklch(0.56 0.1 250)", type: color }

34 typography:

35 family:

36 serif: { value: "Cormorant Garamond, Georgia, serif", type: fontFamily }

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

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

39 scale:

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

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

42 lg: { value: "1.3rem", type: dimension }

43 xl: { value: "1.75rem", type: dimension }

44 "2xl": { value: "2.5rem", type: dimension }

45 "3xl": { value: "3.75rem", type: dimension }

46 weight:

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

48 bold: { value: 600, type: fontWeight }

49 leading:

50 tight: { value: 1.1, type: number }

51 normal: { value: 1.6, type: number }

52 spacing:

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

54 radius:

55 sm: { value: "0.125rem", type: dimension }

56 md: { value: "0.25rem", type: dimension }

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

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.23 0.01 350 / 0.06)", type: shadow }

60 md: { value: "0 10px 30px oklch(0.23 0.01 350 / 0.1)", type: shadow }

61 motion:

62 duration:

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

64 easing:

65 standard: { value: "cubic-bezier(0.22, 1, 0.36, 1)", type: cubicBezier }

66 breakpoint:

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

68 iconography:

69 style: { value: "1px stroke, thin and refined", type: descriptor }

70 zIndex:

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

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

73---

75# Boutique Design System

77## Brand & Voice

78Boutique is quiet luxury for small-batch retail. A deep rose and a soft serif

79display set an editorial, unhurried tone — the kind of store where whitespace

80signals confidence and the product is the hero.

82## Layout & Grid

83Tall product imagery, wide margins, and slow, graceful transitions. Display

84copy is set in `serif`; UI labels stay in `sans` for legibility.

86## Components

87### Buttons

88Minimal, near-square `radius.md` buttons in `color.brand.primary` or a hairline

89outline. Hover fades gently over 260ms.

91### Lookbook Cards

92Edge-to-edge imagery on `color.surface.raised` with captions in muted text and a

93faint `shadow.md` on hover.

95## Accessibility

96Despite the delicate aesthetic, primary and muted text pass WCAG AA on every

97surface. Thin icons always carry a text label, and focus states stay visible.

Related systems

View →

Button

Bazaar

98AA

Bazaar — Warm Conversion Commerce

ecommerceecommercewarm

View →

Button

Carto

98AA

Carto — Marketplace Commerce

ecommerceecommercemarketplace

View →

Button

Drift

98AA

Drift — Coastal Lifestyle Store

ecommerceecommercecoastal