Digital Green
#30F284Action on dark
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.
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
Marketing kit New
Campaigns, launches, social, events, and product storytelling
Core identity · Primary palette
Brand colors
Digital Green is the action color on dark surfaces. On light surfaces it shifts to Deep Green for accessible contrast. Ink, Stone, and Night provide the stable grounds that make the green signal unmistakable.
Palette update
The Strand Spectrum is being retired.
The six-color ramp is no longer a primary identity device, required sequence, or default decoration. The five colors below are the Moderne brand spine. Former spectrum hues now act as supporting complementary colors: use them selectively for gradient fields, illustration, data visualization, and moments where category or sequence needs distinction.
Deep Green
#1D5937Action on light
Ink
#232342Type on light
Stone
#F2F0EAPaper ground
Night
#100C0ADark ground
Supporting complementary colors
These colors expand expression without competing with Digital Green. Use one or two at a time, preserve a clear hierarchy, and keep primary UI surfaces neutral.
Magenta
#E6399B#7A1E52Violet
#9D5BE8#3F1340Blue
#3E7BF6#16306BTeal
#25D0C0#0E4A45Lime
#C7E84B#4F5A12Primary colors establish identity
Use Digital Green or Deep Green for action, Ink or Night for type and dark grounds, and Stone for editorial space. These should carry the first read.
Complementary colors add meaning
Use complementary hues for atmosphere, categorization, and narrative emphasis. They support the brand; they do not replace its green, Ink, Stone, and Night foundation.
Backgrounds & greys/blacks Collapse
Font colors Collapse
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).
Visual language · Gradient fields
Depth, focus, and atmosphere.
A repeatable visual grammar built from primary brand anchors and a supporting complementary palette—not a fixed color ramp.
Fields bring the Moderne brand to life across product, marketing, and communications. Digital Green, Ink, Stone, and Night establish identity; complementary colors add atmosphere and meaning.
Color roles in a field
The primary palette anchors the brand. Complementary colors expand expression without becoming a second identity system.
01 — Primary brand anchors
Digital Green
#30F284Deep Green
#1D5937Ink
#232342Stone
#F2F0EANight
#100C0A02 — Supporting complementary colors
Magenta
#E6399BViolet
#9D5BE8Blue
#3E7BF6Teal
#25D0C0Lime
#C7E84B03 — Atmospheric accents
Composition-only colors for gradient fields, illustration, and campaign atmosphere. They are not persistent brand or interface colors.
- Coral
#FF6B5BWarm counterpoint · launches - Yellow
#FFD84DLight and optimism · small blooms - Sky
#7EDBFFCool atmosphere · transitions - Pale cyan
#D7F7F7Quiet glow · mist and depth
Use no more than one atmospheric accent as a small counterpoint in a field. Never use these colors for CTAs, navigation state, body text, or persistent product UI.
Gradient fields
Each family is a starting palette, not a fixed token. Shift placement, scale, and intensity for the context.
Cool
Teal + Blue + Violet
Technical · Product frames
.mod-gradient--coolWarm
Blue + Magenta · Coral accent
Energetic · Editorial
.mod-gradient--warmGenome
Multi-color complementary field
Expressive · Code Genome
.mod-gradient--genomeFresh
Lime + Teal + Blue
Optimistic · Agent stories
.mod-gradient--freshMist
Violet + Blue + Stone
Quiet · UI backgrounds
.mod-gradient--mistUse the gradientsCopy CSS, JSON, or markup Collapse
Copy, paste, customize
One tiny CSS library.
Copy the full preset library, download it as a file, or grab the structured JSON tokens for design tools and generators.
The family buttons above copy only the selected preset. The library includes all color tokens, five fields, and the chromatic-frame pattern.
<link rel="stylesheet" href="gradient-presets.css">
<div class="mod-gradient mod-gradient--cool">
<!-- Add content here, or use as a frame -->
</div>
<div class="mod-chromatic-frame">
<img src="product-ui.png" alt="Product screen">
</div>Intensity
Use the lowest chroma level that communicates the idea. Atmosphere is the default Moderne treatment.
01 — Mist
5–15% chroma
UI surfaces, modals, docs
02 — Atmosphere
15–40% chroma
Product imagery, frames
03 — Expression
40–70% chroma
Campaigns, social, events
04 — Full expression
70–100% chroma
Rare, meaning-led moments
Field anatomy
Unequal scale, position, and opacity create natural movement. One quiet edge keeps the composition usable.
Base · 50–70%Secondary bloom · 10–30%Primary bloom · 20–40%Counterpoint · 0–15%
Base
The quiet underlying field: Stone, Night, Blue, or Teal.
Primary bloom
The strongest chromatic region and visual focus.
Secondary bloom
Adds depth, dimension, and directional movement.
Counterpoint
A small contrasting accent—permission for coral, red, or yellow.
Proven relationshipsSeven approved fields · Download JPGs Collapse
Use these approved source fields directly. Do not rebuild them from simplified swatches or equal color stops.
Chromatic frame
Bring brand expression to neutral product UI without tinting or compromising the screenshot itself.
- Use 24–48px of frame padding, proportional to the asset.
- Make the outer radius larger than the screenshot radius.
- Keep product UI neutral—never tint the screenshot.
- Prefer two or three major blooms, placed asymmetrically.
- Let one edge carry more chroma while another stays quiet.
- Use Stone as the surrounding editorial canvas where possible.
Examples in practice
Choose the surround based on the content. Do not add a second gradient around artwork that already carries one.
Gradient already in the image · Use a plain background
Place modals, hero artwork, and other internally chromatic imagery on Stone or another neutral surface.
Neutral UI, code, or screenshots · Use a gradient frame
Add a controlled chromatic surround to neutral product imagery, code examples, and thumbnails.
Welcome to Moderne modal
Use a quiet teal-and-blue artwork as a contained visual header, then keep onboarding copy and actions on a completely neutral surface.
Plain surround · Internal gradientPlaceholder
Placeholder
Reserved for an additional approved example.
Example pending
Product update modal
Use the smallest field that clarifies hierarchy; controls and supporting UI should stay on neutral surfaces.
Plain surround · Internal gradientApproved screenshot and thumbnail assets
These files demonstrate gradient framing around neutral product UI, code, and thumbnail content. Download and use the supplied PNGs directly.
Spatial rules
The difference between a palette strip and a Moderne field is composition.
Avoid · Equal distribution
Equal scale and spacing feels like a color reference, not a field.
Prefer · Unequal blooms
Vary scale, position, opacity, and blur. Preserve a useful quiet area.
Construction do’s and don’tsGradient composition checks Collapse
Use these comparisons to evaluate a field before it ships. The goal is a recognizable system with room for expression.
Don’t
Do
Build a clear hierarchy
Let one field dominate, one support, and one act as a small counterpoint. Avoid equal-width rainbow strips.
Don’t
Do
Place blooms asymmetrically
Offset color fields and vary their scale. Avoid stacking every bloom on the center point.
Don’t
Do
Preserve a quiet edge
Keep at least one area low-chroma for copy, UI, or visual rest. Don’t activate every corner.
Don’t
Do
Use proportional blur
Use soft or atmospheric blooms at 30–90% of the asset width. Avoid crisp circles and visible hard stops.
Don’t
Do
Keep atmospheric accents subordinate
Coral, yellow, sky, and pale cyan may shape a composition, but they are not primary brand colors or persistent UI accents.
Don’t
Do
Frame product UI—don’t tint it
Keep screenshots neutral and let the gradient show around their edges. Preserve product fidelity.
Don’t
Readable
product copy
product copy
Do
Readable
product copy
product copy
Compose around the message
Place copy in a quiet field with reliable contrast. Don’t position text over the strongest bloom.
Don’t
Do
Retire the spectrum bar
Do not use the former six-color sequence as an identity device. Compose two or three colors around a clear purpose and hierarchy.
Before export · 01
Can you identify the dominant field in under a second?
Before export · 02
Is at least one edge quiet enough to support content?
Before export · 03
Are there only two or three major blooms?
Before export · 04
Do complementary colors support a primary brand anchor?
Before export · 05
Is product UI neutral, legible, and untinted?
Before export · 06
Does the intensity match the context and message?
Data visualization · Approved assets
Approved Graphs
Reusable graph and diagram compositions drawn from approved Moderne work.
Download the original PNGs for presentations, documents, and working files. Preserve the typography, color hierarchy, spacing, and annotations shown here.
Typography
GeistHeadline · Geist
Aa
Body · Geist
Aa
Up to two sentences
Long-form body · Geist
Aa
Geist carries every typographic role across the system. Use size, weight, and spacing to distinguish display moments from docs, articles, and long-form copy.
Interface labels · Geist
Aa
Labels · 01 → 24 · CVE IDs
Logo
White on dark · Midnight on light
Moderne + product
