Get Started

Basis AI

Foundations

Accessibility

Animation

Components

Patterns

Content Design

Search docs…

Get Started

Basis AI

Foundations

Components

Patterns

Content Design

Ready

Colors

Our color palette has been thoughtfully selected for usability, accessibility, and the ability to be optimized across different components.

Code

Styles

.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-color-default-inverse

--neutral-0

.icon-color-default-inverse-subtle

--neutral-600

.icon-color-default-inverse-disabled

--neutral-700

.border-color-default

--neutral-300

.border-color-disabled

--neutral-400

.border-color-default-inverse

--neutral-900

.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

Best Practices

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. ³

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. ³

Don't

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.