minimalv1.0.0·light

Mono

Mono — Pure Grayscale Minimal

minimalgrayscalemonochromerestrainedswiss

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

mono · rendered from tokens

Color

brand.primary

oklch(0.35 0 0)

brand.secondary

oklch(0.5 0 0)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.18 0 0)

text.muted

oklch(0.44 0 0)

text.link

oklch(0.35 0 0)

surface.base

oklch(0.985 0 0)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.96 0 0)

border.default

oklch(0.87 0 0)

state.success

oklch(0.52 0.13 150)

state.danger

oklch(0.54 0.2 25)

state.warning

oklch(0.66 0.13 70)

state.info

oklch(0.55 0.12 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 Mono into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Mono is the discipline of greyscale. No hue at all in the core palette — just a precise ramp from near-black to white. Color appears only to signal state. The result is timeless, calm, and absolutely focused.

Layout & Grid

A strict modular grid, Helvetica throughout, and exact spacing. Hierarchy is pure weight and size; greys do the structuring with hairline borders.

Components

Buttons

Charcoal color.brand.primary buttons at radius.sm with white text, or a grey outline. No color, just contrast.

Lists & Tables

Hairline-divided rows with tabular figures. State colors are the only chroma, always paired with a label.

Accessibility

Pure-contrast greyscale means primary and muted text pass WCAG AA on every surface. State color is never the sole signal, and focus outlines stay crisp.

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

4name: Mono

5title: Mono — Pure Grayscale Minimal

6version: 1.0.0

7category: minimal

8tags: [minimal, grayscale, monochrome, restrained, swiss]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.35 0 0)", type: color }

17 secondary: { value: "oklch(0.5 0 0)", type: color }

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

19 text:

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

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

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

23 surface:

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

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

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

27 border:

28 default: { value: "oklch(0.87 0 0)", type: color }

29 state:

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

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

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

33 info: { value: "oklch(0.55 0.12 250)", type: color }

34 typography:

35 family:

36 sans: { value: "Helvetica Neue, Helvetica, Arial, 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.5rem", type: dimension }

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

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

45 weight:

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

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

48 leading:

49 tight: { value: 1.15, 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.375rem", type: dimension }

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

57 shadow:

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

59 md: { value: "0 5px 14px oklch(0.18 0 0 / 0.08)", type: shadow }

60 motion:

61 duration:

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

63 easing:

64 standard: { value: "cubic-bezier(0.4, 0, 0.2, 1)", type: cubicBezier }

65 breakpoint:

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

67 iconography:

68 style: { value: "1.5px stroke, neutral grayscale", type: descriptor }

69 zIndex:

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

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

72---

74# Mono Design System

76## Brand & Voice

77Mono is the discipline of greyscale. No hue at all in the core palette — just a

78precise ramp from near-black to white. Color appears only to signal state. The

79result is timeless, calm, and absolutely focused.

81## Layout & Grid

82A strict modular grid, Helvetica throughout, and exact spacing. Hierarchy is

83pure weight and size; greys do the structuring with hairline borders.

85## Components

86### Buttons

87Charcoal `color.brand.primary` buttons at `radius.sm` with white text, or a grey

88outline. No color, just contrast.

90### Lists & Tables

91Hairline-divided rows with tabular figures. State colors are the only chroma,

92always paired with a label.

94## Accessibility

95Pure-contrast greyscale means primary and muted text pass WCAG AA on every

96surface. State color is never the sole signal, and focus outlines stay crisp.

Related systems

View →

Button

Gridline

98AAA

Gridline — Swiss International

minimalminimalswiss

View →

Button

Gallery

98AAA

Gallery — Quiet Monochrome Portfolio

portfolioportfoliomonochrome

View →

Button

Linen

98AA

Linen — Warm Minimal

minimalminimalwarm