Ready
Colors
Our color palette has been thoughtfully selected for usability, accessibility, and the ability to be optimized across different components.
Styles
.
type-color-heading
--
neutral-1200
.
type-color-default
--
neutral-900
.
type-color-subtle
--
neutral-700
.
type-color-disabled
--
neutral-500
.
type-color-heading-inverse
--
neutral-0
.
type-color-default-inverse
--
neutral-400
.
type-color-subtle-inverse
--
neutral-600
.
type-color-disabled-inverse
--
neutral-700
.
border-color-default
--
neutral-300
.
border-color-disabled
--
neutral-400
.
border-color-default-inverse
--
neutral-900
.
bg-color-default
--
neutral-0
.
bg-color-backdrop
--
neutral-50
.
bg-color-hover
--
neutral-100
.
bg-color-disabled
--
neutral-200
.
bg-color-overlay
.
icon-color-default
--
neutral-600
.
icon-color-subtle
--
neutral-400
.
icon-color-disabled
--
neutral-200
.
icon-default-inverse
--
neutral-0
.
icon-default-inverse-subtle
--
neutral-600
.
icon-default-inverse-disabled
--
neutral-700
Best Practices
1
.
Background
Use .bg-color-default as the background color for most pages. White backgrounds help the page content stand out and provides a minimal aesthetic for the UI. ³
2
.
Backdrop
For card layouts, .bg-color-backdrop should be used to help the cards stand out and create a sense of separation between them without over powering the UI. ³
Do
Use .bg-color-backdrop with card-based layouts
Don't
Use custom background colors
3
.
Text Color
Use the text colors to establish content hierarchy.¹ Use lighter color text for less important information and darker color text for more important information.
Do
Use the text color classes to establish hierarchy
Don't
Use the same color for text across the hierarchy
4
.
Border Color
Dark borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²
Do
Use .border-color-default to help define content areas
Don't
Don't use custom border colors
Tokens
Name
Value
--
neutral-1200
1B1B1B
--
neutral-1100
222222
--
neutral-1000
2E2E2E
--
neutral-900
3D3D3D
--
neutral-800
5B5B5B
--
neutral-700
737373
--
neutral-600
969696
--
neutral-500
ABABAB
--
neutral-400
C0C0C0
--
neutral-300
D5D5D5
--
neutral-200
E0E0E0
--
neutral-100
EAEAEA
--
neutral-50
F2F2F2
--
neutral-0
FFFFFF
--
gold-800
A28A2E
--
gold-700
CEB03D
--
gold-600
FAD64C
--
gold-500
FBDE70
--
gold-400
FCE694
--
gold-300
FDEFB7
--
gold-200
FEF3C9
--
gold-100
FEF7DB
--
gold-50
FFFBED
--
blue-800
4392
--
blue-700
005AC3
--
blue-600
006AE5
--
blue-500
3F8EEA
--
blue-400
6FAAEF
--
blue-300
9FC6F4
--
blue-200
B7D5F7
--
blue-100
CDE3FC
--
blue-50
EFF4FE
--
red-800
941800
--
red-700
C52000
--
red-600
F62800
--
red-500
F85333
--
red-400
FA7E66
--
red-300
FBA999
--
red-200
FCBFB3
--
red-100
FDD4CC
--
red-50
FEEFEC
--
orange-800
873800
--
orange-700
AD4E00
--
orange-600
D46808
--
orange-500
FA8C16
--
orange-400
FFA940
--
orange-300
FFC069
--
orange-200
FFD591
--
orange-100
FFE7BA
--
orange-50
FFF7E6
--
green-800
18653A
--
green-700
20874D
--
green-600
28A960
--
green-500
52BA7F
--
green-400
7CCB9E
--
green-300
A7DCBE
--
green-200
BCE5CD
--
green-100
D1EDDD
--
green-50
E6F6EC
More
Additional Reading
7 typography tips for interface design https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4
UI Design in Practice Series: Containers, Boxes and Borders https://designerup.co/blog/ui-design-tips-boxes-and-borders/
Principles of color in UI Design https://uxplanet.org/principles-of-color-in-ui-design-43708d8512d8
Understanding Icons in UI Design https://uxcel.com/blog/understanding-the-icons-in-ui-design