Primary Shades

Primary Colour
PH
var(--primary)
Primary Ultra Light
PH
var(--primary-ultra-light)
Primary Light
PH
var(--primary-light)
Primary Dark
PH
var(--primary-dark)
Primary Ultra Dark
PH
var(--primary-ultra-dark)

MA Custom Fonts

Version: Code Snippet, 3.2.4
Font Families: 2
Font Files: 170
Sample Font Size: px
Sample Text:
Simulated: Show font weights/styles without files as browser would simulate.

IBM Plex Sans

100 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
100 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
200 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
200 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
300 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
300 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
400 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
400 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
500 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
500 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
600 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
600 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
700 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
700 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
800 normalThe quick brown fox jumps over the lazy dog.(simulated)
800 italicThe quick brown fox jumps over the lazy dog.(simulated)
900 normalThe quick brown fox jumps over the lazy dog.(simulated)
900 italicThe quick brown fox jumps over the lazy dog.(simulated)

Poppins

100 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
100 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
200 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
200 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
300 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
300 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
400 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
400 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
500 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
500 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
600 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
600 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
700 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
700 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
800 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
800 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
900 normalThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)
900 italicThe quick brown fox jumps over the lazy dog.(WOFF2, WOFF)

Primary Transparencies & Complimentary Colour

Primary 80%
PH
var(--primary-trans-80)
Primary 60%
PH
var(--primary-trans-60)
Primary 40%
PH
var(--primary-trans-40)
Primary 20%
PH
var(--primary-trans-20)
Primary Comp
PH
var(--primary-comp)

Secondary Shades

Secondary Colour
PH
var(--secondary)
Secondary Ultra Light
PH
var(--secondary-ultra-light)
Secondary Light
PH
var(--secondary-light)
Secondary Dark
PH
var(--secondary-dark)
Secondary Ultra Dark
PH
var(--secondary-ultra-dark)

Secondary Transparencies & Complimentary Colour

Secondary 80%
PH
var(--secondary-trans-80)
Secondary 60%
PH
var(--secondary-trans-60)
Secondary 40%
PH
var(--secondary-trans-40)
Secondary 20%
PH
var(--secondary-trans-20)
Secondary Comp
PH
var(--secondary-trans-comp)

Tertiary Shades

Tertiary Colour
PH
var(--tertiary)
Tertiary Ultra Light
PH
var(--tertiary-ultra-light)
Tertiary Light
PH
var(--tertiary-light)
Tertiary Dark
PH
var(--tertiary-dark)
Tertiary Ultra Dark
PH
var(--tertiary-ultra-dark)

Tertiary Transparencies & Complimentary Colour

Tertiary 80%
PH
var(--tertiary-trans-80)
Tertiary 60%
PH
var(--tertiary-trans-60)
Tertiary 40%
PH
var(--tertiary-trans-40)
Tertiary 20%
PH
var(--tertiary-trans-20)
Tertiary Comp
PH
var(--tertiary-comp)

Accent Shades

Accent Colour
PH
var(--accent)
Accent Ultra Light
PH
var(--accent-ultra-light)
Accent Light
PH
var(--accent-light)
Accent Dark
PH
var(--accent-dark)
Accent Ultra Dark
PH
var(--accent-ultra-dark)

Accent Transparencies & Complimentary Colour

Accent 80%
PH
var(--accent-trans-80)
Accent 60%
PH
var(--accent-trans-60)
Accent 40%
PH
var(--accent-trans-40)
Accent 20%
PH
var(--accent-trans-20)
Accent Comp
PH
var(--accent-trans-comp)

Base Shades

Base Colour
PH
var(--base)
Base Ultra Light
PH
var(--base-ultra-light)
Accent Light
PH
var(--base-light)
Accent Dark
PH
var(--base-dark)
Base Ultra Dark
PH
var(--base-ultra-dark)

Base Transparencies & Complimentary Colour

Base 80%
PH
var(--base-trans-80)
Base 60%
PH
var(--base-trans-60)
Base 40%
PH
var(--base-trans-40)
Base 20%
PH
var(--base-trans-20)
Base Comp
PH
var(--base-comp)
Top