developer toolsv1.0.0·lightdark

DesignMD

DesignMD — The system that themes itself

cleanmodernindigodark-modedogfood

100

54 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

designmd · rendered from tokens

Color

brand.primary

oklch(0.55 0.20 275)

brand.secondary

oklch(0.68 0.15 200)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.24 0.03 275)

text.muted

oklch(0.46 0.03 275)

text.link

oklch(0.55 0.20 275)

surface.base

oklch(0.99 0.004 275)

surface.raised

oklch(0.975 0.006 275)

surface.sunken

oklch(0.955 0.008 275)

border.default

oklch(0.91 0.01 275)

state.success

oklch(0.52 0.15 150)

state.danger

oklch(0.52 0.20 25)

state.warning

oklch(0.55 0.13 75)

state.info

oklch(0.52 0.13 245)

Typography

4xlThe quick brown fox

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Precise, calm, and quietly confident. DesignMD is a tool for builders, so the voice is direct and jargon-light — it explains, it never hypes. The interface recedes so the content (the design systems themselves) is the hero.

Layout & Grid

A 12-column grid with a 1120px max content width and generous whitespace. Catalog and previews lead; chrome is minimal. Sticky action bars keep export controls within reach without crowding the canvas.

Components

Buttons

Primary actions use color.brand.primary with color.brand.onBrand text, radius.md, and weight.medium. Secondary actions are bordered and quiet.

Cards

Entry cards sit on surface.raised with a 1px border.default, radius.lg, and shadow.sm, lifting to shadow.md on hover.

Motion

Tactile and purposeful. Staggered card reveals, smooth preview/raw toggles, and editor value nudges — all at or below motion.duration.base with the standard easing. Everything is disabled under prefers-reduced-motion.

Accessibility

WCAG 2.2 AA is the floor. Body text clears 4.5:1 on every surface, focus rings are always visible, and the editor is fully keyboard-navigable.

Do & Don't

Theme the entire app from these tokens — never hardcode a hex value.
Keep motion functional; if it doesn't aid comprehension, remove it.
Don't introduce a color that isn't derivable from the token set.
Don't let chrome compete with the catalog for attention.

Tokens

Color (14)

Tokens

breakpoint

iconography

imagery

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md126 lines

1---

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

3id: designmd

4name: DesignMD

5title: DesignMD — The system that themes itself

6version: 1.0.0

7category: developer-tools

8tags: [clean, modern, indigo, dark-mode, dogfood]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-19

12colorMode: [light, dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.20 275)", type: color }

17 secondary: { value: "oklch(0.68 0.15 200)", type: color }

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

19 text:

20 primary: { value: "oklch(0.24 0.03 275)", type: color }

21 muted: { value: "oklch(0.46 0.03 275)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.004 275)", type: color }

25 raised: { value: "oklch(0.975 0.006 275)", type: color }

26 sunken: { value: "oklch(0.955 0.008 275)", type: color }

27 border:

28 default: { value: "oklch(0.91 0.01 275)", type: color }

29 state:

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

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

32 warning: { value: "oklch(0.55 0.13 75)", type: color }

33 info: { value: "oklch(0.52 0.13 245)", type: color }

34 typography:

35 family:

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

37 mono: { value: "JetBrains Mono, ui-monospace, monospace", type: fontFamily }

38 scale:

39 xs: { value: "0.75rem", type: dimension }

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

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

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

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

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

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

46 "4xl": { value: "4rem", type: dimension }

47 weight:

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

49 medium: { value: 500, type: fontWeight }

50 semibold: { value: 600, type: fontWeight }

51 bold: { value: 700, type: fontWeight }

52 leading:

53 tight: { value: 1.15, type: number }

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

55 tracking:

56 tight: { value: "-0.02em", type: dimension }

57 spacing:

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

59 radius:

60 sm: { value: "0.375rem", type: dimension }

61 md: { value: "0.625rem", type: dimension }

62 lg: { value: "1rem", type: dimension }

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

64 shadow:

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

66 md: { value: "0 6px 20px oklch(0 0 0 / 0.08)", type: shadow }

67 lg: { value: "0 16px 40px oklch(0 0 0 / 0.12)", type: shadow }

68 motion:

69 duration:

70 fast: { value: "150ms", type: duration }

71 base: { value: "240ms", type: duration }

72 slow: { value: "400ms", type: duration }

73 easing:

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

75 emphasized: { value: "cubic-bezier(0.2, 0, 0, 1)", type: cubicBezier }

76 breakpoint:

77 sm: { value: "640px", type: dimension }

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

79 lg: { value: "1024px", type: dimension }

80 xl: { value: "1280px", type: dimension }

81 zIndex:

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

83 sticky: { value: 1100, type: number }

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

85 toast: { value: 1500, type: number }

86 iconography:

87 style: { value: "outline, 1.75px stroke, rounded joins", type: descriptor }

88 imagery:

89 style: { value: "token-derived gradients, abstract grids, no stock photography", type: descriptor }

90---

92# DesignMD Design System

94## Brand & Voice

95Precise, calm, and quietly confident. DesignMD is a tool for builders, so the

96voice is direct and jargon-light — it explains, it never hypes. The interface

97recedes so the content (the design systems themselves) is the hero.

99## Layout & Grid

100A 12-column grid with a 1120px max content width and generous whitespace.

101Catalog and previews lead; chrome is minimal. Sticky action bars keep export

102controls within reach without crowding the canvas.

103

104## Components

105### Buttons

106Primary actions use `color.brand.primary` with `color.brand.onBrand` text,

107`radius.md`, and `weight.medium`. Secondary actions are bordered and quiet.

108

109### Cards

110Entry cards sit on `surface.raised` with a 1px `border.default`, `radius.lg`,

111and `shadow.sm`, lifting to `shadow.md` on hover.

112

113## Motion

114Tactile and purposeful. Staggered card reveals, smooth preview/raw toggles, and

115editor value nudges — all at or below `motion.duration.base` with the standard

116easing. Everything is disabled under `prefers-reduced-motion`.

117

118## Accessibility

119WCAG 2.2 AA is the floor. Body text clears 4.5:1 on every surface, focus rings

120are always visible, and the editor is fully keyboard-navigable.

121

122## Do & Don't

123- Theme the entire app from these tokens — never hardcode a hex value.

124- Keep motion functional; if it doesn't aid comprehension, remove it.

125- Don't introduce a color that isn't derivable from the token set.

126- Don't let chrome compete with the catalog for attention.

Related systems

View →

Button

Circuit

98AA

Circuit — Electric Dark Dev Tools

developer toolsdeveloper-toolsdark

View →

Button

Compile

98AA

Compile — Light Developer Tools

developer toolsdeveloper-toolslight

View →

Button

Terminal

98AA

Terminal — Dense Developer Tools

developer toolsdeveloper-toolsdark