The Moderne
visual language

Everything here runs on one set of foundations, used in three places: the platform, the brand, and the base system under both. If you only do one thing, install the plugin. Your agent picks up the whole system from there and applies it.

Get the plugin

The fastest path: your agent learns the whole system and applies it for you.

Claude Code

/plugin marketplace add moderneinc/design-system

Paste into Claude Code to add the marketplace.

/plugin install moderne-design@moderne-design

Paste into Claude Code to install the plugin.

/moderne-design:moderne-design init

Last, this one. It earns you the short name: /moderne-design.

Claude Desktop

moderneinc/design-system

Settings › Plugins › Add › Add marketplace › Add from a repository, then paste this. The repo is private, so it needs your GitHub access. In return the plugin keeps itself current.

No GitHub access?

moderne-design.zip

Download

Add the zip as a skill instead. It reads the published values straight from this site, but nothing updates it. Download it again when the system moves on.

Install the tokens

Bring the values into code directly — as a package, or straight off this site.

npmnpm i @moderneinc/design-system-tokens

CDN<link rel="stylesheet" href="…/css/latest/moderne.css">

Fileslink straight to these, nothing to install

Everything above is served from these URLs, with no build step and no package to install. The latest paths move on each release; the versioned ones never change, because a published version is what that release shipped.