Design tokens
01 · Cover
Juniper Square Design System · v0.3
Token reference · May 2026

Design tokens

Every color, type, and spacing variable that powers the marketing system — across both the Web & Print and Digital / Slides tracks.

2 tracks · 1 palette
02 · Two tracks
How the tokens are organized

Two tracks, one palette

Color primitives and the spacing scale are shared. Typography and units diverge by surface — never mix Moderat with Lora, or Figtree with Charter, in one artifact.

mode: webPrint

Web · Print · Social

Primary
Moderat
Secondary
Charter BT Pro
Units
Pixels (px)
Aa
Aa
mode: digitalSlidesDoc

Digital · Slides · Docs

Primary
Figtree
Secondary
Lora
Units
Points (pt)
Aa
Aa
03 · Brand color
colorsPrimitive · brand 01 — Brand

Brand color

brandJuniperGreen
#00AA6C
Primary brand — logo & key accents
brandPine
#118462
Interactive accent — buttons & links
brandMoss
#004646
Deep accent — dark surfaces
04 · Core neutrals
colorsPrimitive · core neutrals 02 — Neutrals

Core neutrals

{{ c.name }}
{{ c.hex }}
{{ c.role }}
05 · Secondary families
colorsPrimitive · secondary 03 — Secondary

Secondary families

{{ fam.family }}
{{ t.step }}
{{ t.hex }}
06 · Semantic roles
colorsSemantic · 31 roles 04 — Semantic

Semantic roles

{{ grp.group }}
{{ it.name }}
{{ it.hex }}
iconPrimary is the one track divergence — #727678 (web & print) flips to #FFFFFF (digital / slides).
07 · Type — Web & Print
typography · webPrint · Moderat + Charter 05 — Type

Type scale — Web & Print

display
Charter · 56 / 64 · 300
Markets evolve. Be ready.
headingLg
Charter · 40 / 50 · 300
The operations partner to private markets
headingMd
Moderat · 26 / 30 · 500
Connected technology, data, and services
bodyXl
Moderat · 22 / 30 · 300
Solving complex operational challenges for 2,000+ GPs worldwide.
bodyMd
Moderat · 16 / 20 · 400
The workhorse body style for paragraphs, tables, and interface copy across the web.
eyebrow
Moderat · 14 · 500 · +1.12
Pioneering · Trustworthy · Enduring
quoteLg
Charter · 30 / 38 · 300
“Juniper Square builds BMWs.”
statNumber
Charter · 56 / 64 · 300
$1T+
08 · Type — Digital / Slides
typography · digitalSlidesDoc · Figtree + Lora 06 — Type

Type scale — Digital / Slides

display
Lora · 28 pt · 300
Markets evolve. Be ready.
headingLg
Lora · 22 pt · 300
The operations partner to private markets
headingMd
Figtree · 20 pt · 500
Connected technology, data, and services
bodyXl
Figtree · 14 pt · 300
Solving complex operational challenges for 2,000+ GPs worldwide.
bodyMd
Figtree · 11 pt · 400
The workhorse body style for slide copy, captions, and document paragraphs.
eyebrow
Figtree · 7 pt · 500
Pioneering · Trustworthy · Enduring
quoteLg
Lora · 14 pt · 300
“Juniper Square builds BMWs.”
statNumber
Lora · 24 pt · 300
$1T+
09 · Type spec
typography · full specification 07 — Type spec

Every type token

Style token
Web / Print — px
Digital / Slides — pt
{{ r.key }}
{{ r.web }}
{{ r.dig }}
10 · Spacing scale
spacing · 4-based scale · 29 steps 08 — Spacing

Spacing scale

Shared across both tracks · multiples of 4 · the 120 step is new in v0.3.

{{ s.label }}
{{ s.px }}
Brand guidelines
Product UI for marketing guidelines