luxuryv1.0.0·dark

Onyx

Onyx — Black & Silver Luxury

luxurydarksilverminimalpremium

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

onyx · rendered from tokens

Color

brand.primary

oklch(0.82 0.012 250)

brand.secondary

oklch(0.6 0.02 250)

brand.onBrand

oklch(0.16 0.006 250)

text.primary

oklch(0.96 0.004 250)

text.muted

oklch(0.72 0.01 250)

text.link

oklch(0.82 0.012 250)

surface.base

oklch(0.14 0.004 250)

surface.raised

oklch(0.185 0.006 250)

surface.sunken

oklch(0.1 0.003 250)

border.default

oklch(0.3 0.008 250)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Onyx is luxury reduced to black and silver. No color, no noise — just deep matte surfaces, brushed-metal accents, and impeccable spacing. Understated, expensive, and utterly composed.

Layout & Grid

Wide margins, slow transitions, and a near-monochrome dark palette. Silver marks the single most important element; everything else is shades of black.

Components

Buttons

Minimal radius.sm buttons — brushed silver color.brand.primary with dark onBrand text, or a fine silver hairline outline.

Cards

Deep matte cards on color.surface.raised separated by faint borders and a soft shadow.md; silver appears only where it counts.

Accessibility

Monochrome luxury with real contrast: light and muted text pass WCAG AA on the black surfaces. State color is the only chroma and always paired with a label.

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.md96 lines

1---

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

3id: onyx

4name: Onyx

5title: Onyx — Black & Silver Luxury

6version: 1.0.0

7category: luxury

8tags: [luxury, dark, silver, minimal, premium]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.82 0.012 250)", type: color }

17 secondary: { value: "oklch(0.6 0.02 250)", type: color }

18 onBrand: { value: "oklch(0.16 0.006 250)", type: color }

19 text:

20 primary: { value: "oklch(0.96 0.004 250)", type: color }

21 muted: { value: "oklch(0.72 0.01 250)", type: color }

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

23 surface:

24 base: { value: "oklch(0.14 0.004 250)", type: color }

25 raised: { value: "oklch(0.185 0.006 250)", type: color }

26 sunken: { value: "oklch(0.1 0.003 250)", type: color }

27 border:

28 default: { value: "oklch(0.3 0.008 250)", 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 sans: { value: "Neue Montreal, 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.3rem", type: dimension }

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

57 shadow:

58 sm: { value: "0 1px 2px oklch(0 0 0 / 0.5)", type: shadow }

59 md: { value: "0 16px 44px oklch(0 0 0 / 0.6)", type: shadow }

60 motion:

61 duration:

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

63 easing:

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

65 breakpoint:

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

67 iconography:

68 style: { value: "1px stroke, fine silver, minimal", type: descriptor }

69 zIndex:

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

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

72---

74# Onyx Design System

76## Brand & Voice

77Onyx is luxury reduced to black and silver. No color, no noise — just deep

78matte surfaces, brushed-metal accents, and impeccable spacing. Understated,

79expensive, and utterly composed.

81## Layout & Grid

82Wide margins, slow transitions, and a near-monochrome dark palette. Silver marks

83the single most important element; everything else is shades of black.

85## Components

86### Buttons

87Minimal `radius.sm` buttons — brushed silver `color.brand.primary` with dark

88`onBrand` text, or a fine silver hairline outline.

90### Cards

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

92`shadow.md`; silver appears only where it counts.

94## Accessibility

95Monochrome luxury with real contrast: light and muted text pass WCAG AA on the

96black surfaces. State color is the only chroma and always paired with a label.

Related systems

View →

Button

Noir

98AAA

Noir — Black & Gold Luxury

luxuryluxurydark

View →

Button

Velvet

98AAA

Velvet — Deep Plum Premium

luxuryluxurydark

View →

Button

Couture

98AAA

Couture — Fashion House Luxury

luxuryluxuryfashion