Basis design system

Search docs…

Basis design system

Search docs…

Get Started

Foundations

Tokens

Components

Patterns

In Progress

Colors

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

View in Storybook

View in Figma

In Progress

Colors

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

View in Storybook

View in Figma

In Progress

Colors

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

View in Storybook

View in Figma

Tokens

Name

Value

Name

Value

Name

Value

--pure-white

#FFFFFF

--pure-white

#FFFFFF

--pure-white

#FFFFFF

--alabaster-grey

#F7F7F7

--alabaster-grey

#F7F7F7

--alabaster-grey

#F7F7F7

--pearl-grey

#F0F0F0

--pearl-grey

#F0F0F0

--pearl-grey

#F0F0F0

--silver-grey

#C0C0C0

--silver-grey

#C0C0C0

--silver-grey

#C0C0C0

--fog-grey

#E9E9E9

--fog-grey

#E9E9E9

--fog-grey

#E9E9E9

--cloud-grey

#D3D3D3

--cloud-grey

#D3D3D3

--cloud-grey

#D3D3D3

--concrete-grey

#ACACAC

--concrete-grey

#ACACAC

--concrete-grey

#ACACAC

--steel-grey

#969696

--steel-grey

#969696

--steel-grey

#969696

--graphite-grey

#838383

--graphite-grey

#838383

--graphite-grey

#838383

--smoke-grey

#6A6B6D

--smoke-grey

#6A6B6D

--smoke-grey

#6A6B6D

--anchor-grey

#54575A

--anchor-grey

#54575A

--anchor-grey

#54575A

--slate-grey

#3A3D40

--slate-grey

#3A3D40

--slate-grey

#3A3D40

--charcoal-grey

#0A0D10

--charcoal-grey

#0A0D10

--charcoal-grey

#0A0D10

--pale-pink

#FFF3F3

--pale-pink

#FFF3F3

--pale-pink

#FFF3F3

--peachy-pink

#FFB6B6

--peachy-pink

#FFB6B6

--peachy-pink

#FFB6B6

--salmon-pink

#FF8686

--salmon-pink

#FF8686

--salmon-pink

#FF8686

--coral-red

#FF4949

--coral-red

#FF4949

--coral-red

#FF4949

--punch-red

#F60101

--punch-red

#F60101

--punch-red

#F60101

--chili-red

#DC0303

--chili-red

#DC0303

--chili-red

#DC0303

--ruby-red

#B10303

--ruby-red

#B10303

--ruby-red

#B10303

--pale-orange

#FEF4E6

--pale-orange

#FEF4E6

--pale-orange

#FEF4E6

--carrot-orange

#FB8A00

--carrot-orange

#FB8A00

--carrot-orange

#FB8A00

--tangerine-orange

#E9721A

--tangerine-orange

#E9721A

--tangerine-orange

#E9721A

--amber-orange

#C25400

--amber-orange

#C25400

--amber-orange

#C25400

--pale-green

#ECF6EF

--pale-green

#ECF6EF

--pale-green

#ECF6EF

--mint-green

#A7E6C3

--mint-green

#A7E6C3

--mint-green

#A7E6C3

--spring-green

#6DD69B

--spring-green

#6DD69B

--spring-green

#6DD69B

--shamrock-green

#2FC570

--shamrock-green

#2FC570

--shamrock-green

#2FC570

--sea-green

#2E924F

--sea-green

#2E924F

--sea-green

#2E924F

--jade-green

#28A960

--jade-green

#28A960

--jade-green

#28A960

--hunter-green

#298347

--hunter-green

#298347

--hunter-green

#298347

--forest-green

#13632D

--forest-green

#13632D

--forest-green

#13632D

--pale-yellow

#FFF9E6

--pale-yellow

#FFF9E6

--pale-yellow

#FFF9E6

--mellow-yellow

#FFEAC1

--mellow-yellow

#FFEAC1

--mellow-yellow

#FFEAC1

--honey-yellow

#FFD787

--honey-yellow

#FFD787

--honey-yellow

#FFD787

--marigold-yellow

#FEB92F

--marigold-yellow

#FEB92F

--marigold-yellow

#FEB92F

--pale-blue

#EFF9FD

--pale-blue

#EFF9FD

--pale-blue

#EFF9FD

--powder-blue

#E6F5FA

--powder-blue

#E6F5FA

--powder-blue

#E6F5FA

--sapphire-blue

#2273D2

--sapphire-blue

#2273D2

--sapphire-blue

#2273D2

--cobalt-blue

#1F67BC

--cobalt-blue

#1F67BC

--cobalt-blue

#1F67BC

--navy-blue

#1158AC

--navy-blue

#1158AC

--navy-blue

#1158AC

Overview

Tokens