luxuryv1.0.0·dark

Noir

Noir — Black & Gold Luxury

luxurydarkgoldserifpremium

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

noir · rendered from tokens

Color

brand.primary

oklch(0.78 0.13 85)

brand.secondary

oklch(0.62 0.06 70)

brand.onBrand

oklch(0.15 0.01 70)

text.primary

oklch(0.95 0.005 80)

text.muted

oklch(0.72 0.012 80)

text.link

oklch(0.78 0.13 85)

surface.base

oklch(0.15 0.005 70)

surface.raised

oklch(0.195 0.007 70)

surface.sunken

oklch(0.11 0.004 70)

border.default

oklch(0.3 0.01 70)

state.success

oklch(0.72 0.14 150)

state.danger

oklch(0.66 0.2 25)

state.warning

oklch(0.8 0.14 85)

state.info

oklch(0.72 0.12 230)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Noir is after-hours luxury: near-black surfaces, a single gilded gold, and a high-contrast serif. Every element is spaced like it's expensive. The mood is discreet, confident, and timeless.

Layout & Grid

Wide margins, slow transitions, and restrained gold accents. Display type is serif and large; supporting copy stays quiet in muted text.

Components

Buttons

Minimal near-square buttons — gold color.brand.primary with dark onBrand text, or a fine gold hairline outline. Hover fades gracefully over 280ms.

Cards

Deep cards on color.surface.raised separated by faint borders and a soft shadow.md; gold marks only the most important detail.

Accessibility

Opulent yet legible: light and muted text pass WCAG AA on the dark surfaces. The gold is reserved for emphasis, links are clearly marked, and focus stays 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: noir

4name: Noir

5title: Noir — Black & Gold Luxury

6version: 1.0.0

7category: luxury

8tags: [luxury, dark, gold, serif, premium]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.78 0.13 85)", type: color }

17 secondary: { value: "oklch(0.62 0.06 70)", type: color }

18 onBrand: { value: "oklch(0.15 0.01 70)", type: color }

19 text:

20 primary: { value: "oklch(0.95 0.005 80)", type: color }

21 muted: { value: "oklch(0.72 0.012 80)", type: color }

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

23 surface:

24 base: { value: "oklch(0.15 0.005 70)", type: color }

25 raised: { value: "oklch(0.195 0.007 70)", type: color }

26 sunken: { value: "oklch(0.11 0.004 70)", type: color }

27 border:

28 default: { value: "oklch(0.3 0.01 70)", type: color }

29 state:

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

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

32 warning: { value: "oklch(0.8 0.14 85)", type: color }

33 info: { value: "oklch(0.72 0.12 230)", 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.35rem", type: dimension }

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

44 "2xl": { value: "2.6rem", 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 0 0 / 0.5)", type: shadow }

60 md: { value: "0 14px 40px oklch(0 0 0 / 0.6)", type: shadow }

61 motion:

62 duration:

63 base: { value: "280ms", 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, fine and gilded", type: descriptor }

70 zIndex:

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

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

73---

75# Noir Design System

77## Brand & Voice

78Noir is after-hours luxury: near-black surfaces, a single gilded gold, and a

79high-contrast serif. Every element is spaced like it's expensive. The mood is

80discreet, confident, and timeless.

82## Layout & Grid

83Wide margins, slow transitions, and restrained gold accents. Display type is

84`serif` and large; supporting copy stays quiet in muted text.

86## Components

87### Buttons

88Minimal near-square buttons — gold `color.brand.primary` with dark `onBrand`

89text, or a fine gold hairline outline. Hover fades gracefully over 280ms.

91### Cards

92Deep cards on `color.surface.raised` separated by faint borders and a soft

93`shadow.md`; gold marks only the most important detail.

95## Accessibility

96Opulent yet legible: light and muted text pass WCAG AA on the dark surfaces. The

97gold is reserved for emphasis, links are clearly marked, and focus stays visible.

Related systems

View →

Button

Onyx

98AAA

Onyx — Black & Silver Luxury

luxuryluxurydark

View →

Button

Couture

98AAA

Couture — Fashion House Luxury

luxuryluxuryfashion

View →

Button

Velvet

98AAA

Velvet — Deep Plum Premium

luxuryluxurydark