Matchbox
Updated Dec 21, 2021

Color

FOUNDATIONS

Colors is used to visually describe how things function in a UI.

Matchbox uses colors to visually describe how things function in a UI. By giving meaning to colors, we create consistent visual patterns that help make interactions more predictable.

Core

Primary Actions, Color Blue 700
RGB
HEX
Primary color for interactive elements and call to actions such as buttons and links. Used to indicate creation, progression or importance.
Primary Action Alternative, Color Blue 800
RGB
HEX
Alternative to the primary blue for use in high contrast situations.
Success, Color Green 700
RGB
HEX
Represents a positive or congratulatory tone.
Success Alternative, Color Green 800
RGB
HEX
Alternative to the primary green for use in high contrast situations.
Destructive, Color Red 700
RGB
HEX
Represents a negative or destructive tone.
Warning, Color Yellow 400
RGB
HEX
Represents a warning or cautionary tone.
Promotional, Color Purple 700
RGB
HEX
Represents promotional content or tone.

Common UI

Application Background, Color White
RGB
HEX
Container Borders, Color Gray 300
RGB
HEX
Body Text, Color Gray 900
RGB
HEX

Palettes

Gray

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Blue

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Teal

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Green

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Yellow

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Red

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Magenta

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Purple

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop:

Brand

A
FAIL
A
FAIL
A
PASS
A
PASS
Hexadecimal:
RGB:
JS:
CSS:
Scss:
System Prop: