Get Started

Foundations

Components

Patterns

Voice and Tone

In Progress

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

In Progress

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

In Progress

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

Animation

--anim-ease-in-out

ease-in-out

--anim-ease-in-out

ease-in-out

--anim-ease-in-out

ease-in-out

--anim-ease-out

ease-out

--anim-ease-out

ease-out

--anim-ease-out

ease-out

--anim-ease-in

ease-in

--anim-ease-in

ease-in

--anim-ease-in

ease-in

--anim-duration-lg

500ms

--anim-duration-lg

500ms

--anim-duration-lg

500ms

--anim-duration-md

300ms

--anim-duration-md

300ms

--anim-duration-md

300ms

--anim-duration-sm

100ms

--anim-duration-sm

100ms

--anim-duration-sm

100ms

Border

b-radius-none

border-radius: 0px

b-radius-none

border-radius: 0px

b-radius-none

border-radius: 0px

b-radius-noneRight

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

b-radius-noneRight

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

b-radius-noneRight

border-top-right-radius: 0px; border- bottom-right-radius: 0px;

b-radius-noneLeft

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

b-radius-noneLeft

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

b-radius-noneLeft

border-top-left-radius: 0px; border-bottom-left-radius: 0px;

b-radius-sm

border-radius: 4px

b-radius-sm

border-radius: 4px

b-radius-sm

border-radius: 4px

b-radius-md

border-radius: 8px

b-radius-md

border-radius: 8px

b-radius-md

border-radius: 8px

b-radius-lg

border-radius: 12px

b-radius-lg

border-radius: 12px

b-radius-lg

border-radius: 12px

b-radius-xl

border-radius: 20px

b-radius-xl

border-radius: 20px

b-radius-xl

border-radius: 20px

b-radius-circle

border-radius: 50%

b-radius-circle

border-radius: 50%

b-radius-circle

border-radius: 50%

border-{color}

border-width: 1px

border-{color}

border-width: 1px

border-{color}

border-width: 1px

border-t-{color}

border-top-width: 1px

border-t-{color}

border-top-width: 1px

border-t-{color}

border-top-width: 1px

border-b-{color}

border-bottom-width: 1px

border-b-{color}

border-bottom-width: 1px

border-b-{color}

border-bottom-width: 1px

border-l-{color}

border-left-width: 1px

border-l-{color}

border-left-width: 1px

border-l-{color}

border-left-width: 1px

border-r-{color}

border-right-width: 1px

border-r-{color}

border-right-width: 1px

border-r-{color}

border-right-width: 1px

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

border-y-{color}

border-top-width: 1px; border-bottom-width: 1px

border-x-{color}

border-left-width: 1px; border-right-width: 1px

border-x-{color}

border-left-width: 1px; border-right-width: 1px

border-x-{color}

border-left-width: 1px; border-right-width: 1px

Color

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

--jade-green

#28A960

--jade-green

#28A960

--jade-green

#28A960

--sea-green

#2E924F

--sea-green

#2E924F

--sea-green

#2E924F

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

--silver-grey

#C0C0C0

--silver-grey

#C0C0C0

--silver-grey

#C0C0C0

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

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

Icon

--icon--xxxsmall

8px

--icon--xxxsmall

8px

--icon--xxxsmall

8px

--icon--xxsmall

10px

--icon--xxsmall

10px

--icon--xxsmall

10px

--icon--xsmall

12px

--icon--xsmall

12px

--icon--xsmall

12px

--icon--small

16px

--icon--small

16px

--icon--small

16px

--icon--medium

24px

--icon--medium

24px

--icon--medium

24px

--icon--large

32px

--icon--large

32px

--icon--large

32px

Shadow

--shadow-4

box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);

--shadow-4

box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);

--shadow-4

box-shadow: 0px 4px 8px 4px rgba(10, 13, 16, 0.12);

--shadow-3

box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);

--shadow-3

box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);

--shadow-3

box-shadow: 0px 3px 6px 3px rgba(10, 13, 16, 0.11);

--shadow-2

box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);

--shadow-2

box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);

--shadow-2

box-shadow: 0px 2px 4px 2px rgba(10, 13, 16, 0.1);

--shadow-1

box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);

--shadow-1

box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);

--shadow-1

box-shadow: 0px 1px 2px 1px rgba(10, 13, 16, 0.09);

--shadow-0

box-shadow: none;

--shadow-0

box-shadow: none;

--shadow-0

box-shadow: none;

Spacing

--core-10

40px

--core-10

40px

--core-10

40px

--core-9

36px

--core-9

36px

--core-9

36px

--core-8

32px

--core-8

32px

--core-8

32px

--core-7

28px

--core-7

28px

--core-7

28px

--core-6

24px

--core-6

24px

--core-6

24px

--core-5

20px

--core-5

20px

--core-5

20px

--core-4

16px

--core-4

16px

--core-4

16px

--core-3

12px

--core-3

12px

--core-3

12px

--core-2

8px

--core-2

8px

--core-2

8px

--core-1

4px

--core-1

4px

--core-1

4px

Typography

source-sans-pro-sc

font-family: Source Sans Pro Small Caps

source-sans-pro-sc

font-family: Source Sans Pro Small Caps

source-sans-pro-sc

font-family: Source Sans Pro Small Caps

source-sans-pro

font-family: Source Sans Pro

source-sans-pro

font-family: Source Sans Pro

source-sans-pro

font-family: Source Sans Pro

type-size-24

24px

type-size-24

24px

type-size-24

24px

type-size-12

12px

type-size-12

12px

type-size-12

12px

type-size-14

14px

type-size-14

14px

type-size-14

14px

type-size-16

16px

type-size-16

16px

type-size-16

16px

type-size-20

20px

type-size-20

20px

type-size-20

20px

type-size-26

26px

type-size-26

26px

type-size-26

26px

type-size-32

32px

type-size-32

32px

type-size-32

32px

type-size-60

60px

type-size-60

60px

type-size-60

60px

line-height-16

16px

line-height-16

16px

line-height-16

16px

line-height-20

20px

line-height-20

20px

line-height-20

20px

line-height-24

24px

line-height-24

24px

line-height-24

24px

line-height-32

32px

line-height-32

32px

line-height-32

32px

line-height-36

36px

line-height-36

36px

line-height-36

36px

line-height-72

72px

line-height-72

72px

line-height-72

72px

font-weight-300

300 (light)

font-weight-300

300 (light)

font-weight-300

300 (light)

font-weight-400

400 (regular)

font-weight-400

400 (regular)

font-weight-400

400 (regular)

font-weight-600

600 (semibold)

font-weight-600

600 (semibold)

font-weight-600

600 (semibold)

font-weight-700

700 (bold)

font-weight-700

700 (bold)

font-weight-700

700 (bold)

Additional Reading

Design tokens for dummies https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71
What are design tokens? https://www.uxpin.com/studio/blog/what-are-design-tokens/

Spacing

Typography

Spacing

Typography

Spacing

Typography

Need more guidance?

Suggest an addition or an edit.

Submit an update

Need more guidance?

Suggest an addition or an edit.

Submit an update

Need more guidance?

Suggest an addition or an edit.

Submit an update

Overview

Tokens

Overview

Tokens

Overview

Tokens

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

Tokens

Design tokens are named variables that store and standardize visual design values like colors, spacing and fonts across a Basis Design System.

Animation

Animation

Animation

Border

Border

Border

Color

Color

Color

Icon

Icon

Icon

Shadow

Shadow

Shadow

Spacing

Spacing

Spacing

Typography

Typography

Typography

More

More

More

Additional Reading

Need more guidance?

Need more guidance?

Need more guidance?