Install the plugin. Your agent learns the whole design system and applies it for you, whether you are making a slide deck, a document, a web page, or an app. Nothing to look up and no values to remember.
Then this one. It earns you the short name: /moderne-design.
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.
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.
/moderne-design create a PowerPoint
/moderne-design create a conference flyer
/moderne-design create a one-pager
/moderne-design create a landing page
/moderne-design audit this deck
/moderne-design audit our web app
/moderne-design audit route /pricing
/moderne-design migrate the marketing site
/moderne-design migrate this prototype
/moderne-design migrate our docs
/moderne-design init
create
Make something new that looks Moderne: a deck, a page, a flyer.
audit
Find where the system is missing, misused, or lost to AI slop.
migrate
Move work that already exists onto the system.
init
Install the short /moderne-design name. Once per machine.
Dark mode turns on with data-theme="dark", and never on its own. This page uses nothing but the design system itself; if it looks wrong, the design system is wrong.
Colorclick any color to copy its name
The system should let you impress, explain, or execute. Marketing is high contrast and visually expressive. Documentation is clarity through subtle color and precise typography. The product is developer-tool minimalism on a controlled, no-noise palette.
Ink, paper and state
Icon · 11
Surface · 35
Text · 22
Action, border and state · 25
Status · 36
Chart and categorical · 34
Componentsthe tokens that only make sense in place
The product UI kit. Every state already has a name, so you never pick a color for one. They only read as correct in place.
Two faces. Geist for everything you write, Geist Mono for code and numbers. Emphasize with weight, not size.
Make it Modernetitles-moddy-header
Page headertitles-page-header
Section headertitles-section-header-default
Body copy, the size a page is set inbody-regular
Small body, for supporting textbody-small-regular
Data and figures, in Geist Monodata-small
Titles · Geist
Aa
Page and section headers, and the one display size above them.
titles-page-header
Body · Geist
Aa
Everything written to be read. Emphasize with weight, never size.
body-regular
Interface labels · Geist
Aa
Labels, captions and table headers, at the smallest size that stays legible.
body-xs-medium
Code and figures · Geist Mono
Aa
Code, identifiers, versions and anything that has to line up in a column.
data-default
Typeface · Geist and Geist MonoNot shipped with the system. This page loads it from Google Fonts.
Sizesshown at actual size
One scale for every gap, corner and hairline. If a value is not on it, it is a guess.
spacing_1
spacing_2
spacing_3
spacing_4
spacing_6
spacing_8
border-radius-x-xs
border-radius-s
border-radius-m
border-radius-l
stroke-width-1
Logowhite on dark, ink on light
The mark ships as two fixed inks: white on dark, ink on light. Neither is the cream the type is set in, and that is deliberate. Reach for the variant, never a recolor.
on dark
on light
symbol only
symbol only
Moderne + product
A product name joins the lockup; it never replaces it. The lockup is artwork and does not change; the name beside it is type, set at the wordmark's cap height and on its baseline. Heavier than the wordmark on both grounds, and stepped back in value on light, so the company name still leads.
Platform Status
Platform Status
Documentation
Documentation
Marketingone asset, labeled
The anatomy of a marketing asset, labeled with the token that draws each part. This is a deck cover; a content slide keeps the mark and the footer and swaps the date, the rule and the lockup for a statement and a picture. Marketing is white, and the spectral gradient is a rule rather than a fill. Two parts resolve from no token at all, and are labeled as such.
August 2026
Name of this presentation
moderne.ai
Datecolor-text-primary
Titlecolor-text-primary
Lockupa file, not a token
The rulegradient-spectral
Footer ruleno token: #232342
Groundno token: #ffffff
Pre-approved graphs
Graphs and diagrams pre-approved for decks and documents. Place the file as supplied rather than redrawing it, and keep its type, colors, spacing and annotations.
Product screenshots, pre-approved with their gradient frames. The frame belongs to these files. The grammar above rules out framing a screenshot you place yourself.
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.
