01
Primary Colors
Green 950 PMS 627
Green 700 PMS 7729
Green 400 PMS 7723
Green 200 PMS 7478
02
Secondary Colors
Neutrals for text, borders, and surfacesInk PMS Black C
Stone 600 PMS 405
Stone 400 PMS 414
Stone 200 PMS Cool Grey 1
03
Alternative Applications
Web & media accents, accessibility, seasonal themesIndigo PMS 2755
Blue PMS 2738
Lime PMS 375
Teal PMS 3255
04
Gradient & Color Tints
#10312B100 → 20%
#005745100 → 20%
#4CA585100 → 20%
#95E1BF100 → 20%
Use the gradient and tints as backgrounds or overlays only — always at reduced opacity
behind content, never for text.
05
Typography
Sansation (primary / display) · Montserrat (secondary / text)Large Headline
Sansation Regular All caps · 48–64px · line-height 1.05
Small Headline
Montserrat Bold Sentence case · 24–32px · line-height 1.2
Sub-Headline
Montserrat Bold All caps · 14–16px · tracking +0.25em
Body copy is set in Montserrat Ultra Light. Precision-built products developed layer by
layer through expertise and engineering vision.
Montserrat Ultra Light (200) Sentence case · 15–17px · line-height 1.6
Caption / Label
Montserrat Ultra Light (200) All caps · 12–14px · tracking +0.2em
06
Light & Dark Mode
Additive Process
Ideas, layer by layer
Engineering-grade part quality and tolerances. Launch faster with functional
prototypes.
Start a project
Materials
LIGHTbg #FFFFFF text #2D2A26heading #10312Baccent #005745
Additive Process
Ideas, layer by layer
Engineering-grade part quality and tolerances. Launch faster with functional
prototypes.
Start a project
Materials
DARKbg #10312B text #D9D8D6heading #FFFFFFaccent #95E1BF
07
CSS Variables
:root {
/* Primary — malachite greens */
--ml-green-950: #10312B; /* PMS 627 */
--ml-green-700: #005745; /* PMS 7729 */
--ml-green-400: #4CA585; /* PMS 7723 */
--ml-green-200: #95E1BF; /* PMS 7478 */
/* Secondary — neutrals */
--ml-ink: #2D2A26; /* PMS Black C */
--ml-stone-600: #686058; /* PMS 405 */
--ml-stone-400: #A9A89F; /* PMS 414 */
--ml-stone-200: #D9D8D6; /* PMS Cool Grey 1 */
/* Alternative applications */
--ml-indigo: #211261; /* PMS 2755 */
--ml-blue: #000B8C; /* PMS 2738 */
--ml-lime: #93D500; /* PMS 375 */
--ml-teal: #19D3C5; /* PMS 3255 */
/* Brand gradient */
--ml-gradient: linear-gradient(135deg, #10312B 0%, #005745 35%, #4CA585 70%, #95E1BF 100%);
/* Typography */
--ml-font-display: 'Sansation', 'Trebuchet MS', sans-serif;
--ml-font-text: 'Montserrat', 'Avenir Next', sans-serif;
}
/* Light mode (default) */
:root {
--bg: #FFFFFF;
--text: var(--ml-ink);
--heading: var(--ml-green-950);
--accent: var(--ml-green-700);
--border: var(--ml-stone-200);
}
/* Dark mode */
[data-theme="dark"] {
--bg: var(--ml-green-950);
--text: var(--ml-stone-200);
--heading: #FFFFFF;
--accent: var(--ml-green-200);
--border: color-mix(in oklab, var(--ml-green-700) 60%, transparent);
}