The Moderne
visual language
Welcome to the design kit. Everything you need for your next project lives here, whether it's a prototype, a Canva layout, or HTML. If something's missing, post in the design channel and we'll add it.
Moderne Design Kit skill New update here
Drop the bundle into your coding agent
Morpheus Design Kit
Morpheus theme design library — tokens + components, light & dark · mirrored in Figma
Brand guidelines New update here
Logo usage — variants, clear space, sizing, downloads
Strand spectrum · bright / deep pairs
Bar asset · 600×12
Download PNG
Backgrounds & greys/blacks
Font colors
→
Accessibility · green = action
Digital Green (#30F284) is the action color on dark surfaces, but on white it falls to about 1.5:1 contrast — far below the WCAG 2.1 AA minimum of 4.5:1 — so it cannot carry text or links on light backgrounds. On light surfaces we shift to a deeper companion green (#1D5937, ~8:1 on white) that preserves the green-means-action cue while staying legible. Green is always paired with an underline or icon, so color is never the sole indicator, satisfying WCAG 1.4.1 (Use of Color).
Typography
Poppins · Geist · Geist MonoHeadline · Poppins
Aa
Body · Geist
Aa
UP TO TWO SENTENCES
Long-form body · Geist
Aa
Poppins carries the display moments; everything set in paragraphs runs in Geist. Its quieter rhythm carries docs, articles, and long-form copy without the display personality getting in the way.
Technical · Geist Mono
Aa
LABELS · 01 → 24 · CVE-IDS
Logo
White on dark · Midnight on light
Moderne + product
