luxuryv1.0.0·light

Couture

Couture — Fashion House Luxury

luxuryfashioncreamserifeditorial

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

couture · rendered from tokens

Color

brand.primary

oklch(0.2 0.012 350)

brand.secondary

oklch(0.6 0.08 20)

brand.onBrand

oklch(0.98 0.006 80)

text.primary

oklch(0.18 0.008 350)

text.muted

oklch(0.44 0.012 350)

text.link

oklch(0.6 0.08 20)

surface.base

oklch(0.975 0.006 80)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.955 0.01 80)

border.default

oklch(0.88 0.008 70)

state.success

oklch(0.5 0.13 150)

state.danger

oklch(0.52 0.19 25)

state.warning

oklch(0.64 0.13 70)

state.info

oklch(0.5 0.11 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 Couture into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Couture is the front row of fashion week: cream paper, ink-black type, and a towering Didone serif. A whisper of blush warms the links. Everything is spaced like a runway — slow, deliberate, expensive.

Layout & Grid

Enormous display headlines, vast margins, and edge-to-edge editorial imagery. Near-square corners and slow 300ms transitions keep it composed and refined.

Components

Buttons

Sharp, near-square buttons in ink color.brand.primary with cream onBrand text, or a fine hairline outline. The blush appears only at links.

Lookbook

Full-bleed imagery on color.surface.raised with serif captions and a faint shadow.md on hover; type does the styling.

Accessibility

High fashion, high contrast: primary and muted text pass WCAG AA on every surface. Hairline icons always carry labels and focus rings 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: couture

4name: Couture

5title: Couture — Fashion House Luxury

6version: 1.0.0

7category: luxury

8tags: [luxury, fashion, cream, serif, editorial]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.2 0.012 350)", type: color }

17 secondary: { value: "oklch(0.6 0.08 20)", type: color }

18 onBrand: { value: "oklch(0.98 0.006 80)", type: color }

19 text:

20 primary: { value: "oklch(0.18 0.008 350)", type: color }

21 muted: { value: "oklch(0.44 0.012 350)", type: color }

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

23 surface:

24 base: { value: "oklch(0.975 0.006 80)", type: color }

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

26 sunken: { value: "oklch(0.955 0.01 80)", type: color }

27 border:

28 default: { value: "oklch(0.88 0.008 70)", type: color }

29 state:

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

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

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

33 info: { value: "oklch(0.5 0.11 250)", type: color }

34 typography:

35 family:

36 serif: { value: "Canela, Didot, 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.8125rem", type: dimension }

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

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

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

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

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

46 weight:

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

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

49 leading:

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

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

52 spacing:

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

54 radius:

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

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

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

58 shadow:

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

60 md: { value: "0 12px 36px oklch(0.18 0.01 350 / 0.1)", type: shadow }

61 motion:

62 duration:

63 base: { value: "300ms", 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: "0.75px hairline, couture-fine", type: descriptor }

70 zIndex:

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

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

73---

75# Couture Design System

77## Brand & Voice

78Couture is the front row of fashion week: cream paper, ink-black type, and a

79towering Didone serif. A whisper of blush warms the links. Everything is spaced

80like a runway — slow, deliberate, expensive.

82## Layout & Grid

83Enormous display headlines, vast margins, and edge-to-edge editorial imagery.

84Near-square corners and slow 300ms transitions keep it composed and refined.

86## Components

87### Buttons

88Sharp, near-square buttons in ink `color.brand.primary` with cream `onBrand`

89text, or a fine hairline outline. The blush appears only at links.

91### Lookbook

92Full-bleed imagery on `color.surface.raised` with serif captions and a faint

93`shadow.md` on hover; type does the styling.

95## Accessibility

96High fashion, high contrast: primary and muted text pass WCAG AA on every

97surface. Hairline icons always carry labels and focus rings stay visible.

Related systems

View →

Button

Noir

98AAA

Noir — Black & Gold Luxury

luxuryluxurydark

View →

Button

Onyx

98AAA

Onyx — Black & Silver Luxury

luxuryluxurydark

View →

Button

Velvet

98AAA

Velvet — Deep Plum Premium

luxuryluxurydark