Ready

Colors

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

Ready

Colors

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

Ready

Colors

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

Styles

Styles

Styles

.

type-color-pure-white

Use as primary text color on dark surfaces

pure-white

.

type-color-cloud-grey

Use as secondary text color on dark surfaces

cloud-grey

.

type-color-concrete-grey

Use as tertiary text color on dark surfaces.

concrete-grey

.

type-color-smoke-grey

Use as tertiary text color

smoke-grey

.

type-color-slate-grey

Use as secondary text color

slate-grey

.

type-color-charcoal-grey

Use as primary text color

charcoal-grey

.

border-cloud-grey

Use as a strong border color

cloud-grey

.

border-mercury-grey

Use as default border color

mercury-grey

.

border-fog-grey

Use as a subtle border color

fog-grey

.

bg-pure-white

Use a the default page background

pure-white

.

bg-alabaster-grey

Use as a backdrop behind card containers or as a clickable hover state

alabaster-grey

.

bg-peal-grey

Use to indicate that an iteractive element is disabled.

pearl-grey

.

icon-pure-white

Use as the default icon color on dark surfaces

pure-white

.

icon-silver-grey

Use as disbled icon color

silver-grey

.

icon-graphite-grey

Use as the default icon color

graphite-grey

Best Practices

Best Practices

Best Practices

1. Background Color

Use pure-white as the background color for most pages. White backgrounds help the page content stand out and provides a minimal aesthetic for the UI. ³

2. Card Layout Background Color

For card layouts, alabaster-grey should be used to help the cards stand out and create a sense of separation between them without over powering the UI. ³

3. Icon Color

Avoid using non-neutral icon colors as they can distract users from the page content or confuse the meaning of the UI. Our default icon color is graphite-grey. ⁴

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

4. Border Color

Dark borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ² Our default border color is mercury-grey and should be used for most borders.


Tokens

Tokens

Tokens

navy-blue

#1158AC

navy-blue

#1158AC

navy-blue

#1158AC

cobalt-blue

#1F67BC

cobalt-blue

#1F67BC

cobalt-blue

#1F67BC

sapphire-blue

#2273D2

sapphire-blue

#2273D2

sapphire-blue

#2273D2

cornflower-blue

#6EB1FF

cornflower-blue

#6EB1FF

cornflower-blue

#6EB1FF

powder-blue

#E6F5FA

powder-blue

#E6F5FA

powder-blue

#E6F5FA

pale-blue

#EFF9FD

pale-blue

#EFF9FD

pale-blue

#EFF9FD

marigold-yellow

#FEB92F

marigold-yellow

#FEB92F

marigold-yellow

#FEB92F

honey-yellow

#FFD787

honey-yellow

#FFD787

honey-yellow

#FFD787

mellow-yellow

#FFEAC1

mellow-yellow

#FFEAC1

mellow-yellow

#FFEAC1

pale-yellow

#FFF9E6

pale-yellow

#FFF9E6

pale-yellow

#FFF9E6

forest-green

#13632D

forest-green

#13632D

forest-green

#13632D

hunter-green

#298347

hunter-green

#298347

hunter-green

#298347

sea-green

#2E924F

sea-green

#2E924F

sea-green

#2E924F

jade-green

#28A960

jade-green

#28A960

jade-green

#28A960

shamrock-green

#2FC570

shamrock-green

#2FC570

shamrock-green

#2FC570

spring-green

#6DD69B

spring-green

#6DD69B

spring-green

#6DD69B

mint-green

#A7E6C3

mint-green

#A7E6C3

mint-green

#A7E6C3

pale-green

#ECF6EF

pale-green

#ECF6EF

pale-green

#ECF6EF

amber-orange

#C25400

amber-orange

#C25400

amber-orange

#C25400

tangerine-orange

#E9721A

tangerine-orange

#E9721A

tangerine-orange

#E9721A

carrot-orange

#FB8A00

carrot-orange

#FB8A00

carrot-orange

#FB8A00

sandy-orange

#E8BB7B

sandy-orange

#E8BB7B

sandy-orange

#E8BB7B

pale-orange

#FEF4E6

pale-orange

#FEF4E6

pale-orange

#FEF4E6

ruby-red

#B10303

ruby-red

#B10303

ruby-red

#B10303

chili-red

#DC0303

chili-red

#DC0303

chili-red

#DC0303

punch-red

#F60101

punch-red

#F60101

punch-red

#F60101

coral-red

#FF4949

coral-red

#FF4949

coral-red

#FF4949

salmon-pink

#FF8686

salmon-pink

#FF8686

salmon-pink

#FF8686

peachy-pink

#FFB6B6

peachy-pink

#FFB6B6

peachy-pink

#FFB6B6

pale-pink

#FFF3F3

pale-pink

#FFF3F3

pale-pink

#FFF3F3

charcoal-grey

#0A0D10

charcoal-grey

#0A0D10

charcoal-grey

#0A0D10

slate-grey

#3A3D40

slate-grey

#3A3D40

slate-grey

#3A3D40

anchor-grey

#54575A

anchor-grey

#54575A

anchor-grey

#54575A

smoke-grey

#6A6B6D

smoke-grey

#6A6B6D

smoke-grey

#6A6B6D

graphite-grey

#838383

graphite-grey

#838383

graphite-grey

#838383

steel-grey

#969696

steel-grey

#969696

steel-grey

#969696

concrete-grey

#ACACAC

concrete-grey

#ACACAC

concrete-grey

#ACACAC

cloud-grey

#D3D3D3

cloud-grey

#D3D3D3

cloud-grey

#D3D3D3

mercury-grey

#E2E2E2

mercury-grey

#E2E2E2

mercury-grey

#E2E2E2

fog-grey

#E9E9E9

fog-grey

#E9E9E9

fog-grey

#E9E9E9

silver-grey

#C0C0C0

silver-grey

#C0C0C0

silver-grey

#C0C0C0

pearl-grey

#F0F0F0

pearl-grey

#F0F0F0

pearl-grey

#F0F0F0

alabaster-grey

#F7F7F7

alabaster-grey

#F7F7F7

alabaster-grey

#F7F7F7

pure-white

#FFFFFF

pure-white

#FFFFFF

pure-white

#FFFFFF

More

More

More

Additional Reading

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies