Tokens

Design tokens are a set of design decisions used to define the visual style of the system. Think of tokens as the theme that can be applied to base components to make them branded. They help maintain consistency across the system by providing a common language for designers and developers to use.

Colour (background)

All colours that can be used as a background colour. For colours that can be used on top of these background colours, see the “contents” colours below.

Name

Panda CSS variable

Value

Base

Purple Haze (20%)

token('colors.background.base.20')

rgba(16, 0, 48, 0.2)

Siphon (90%)

token('colors.background.base.90')

rgba(16, 0, 48, 0.9)

Ice

token('colors.background.base.100')

#F0FFFF

Dusty Sky

token('colors.background.base.200')

#D9DDFF

Purple Haze

token('colors.background.base.300')

#A49FC8

Hemocyanin

token('colors.background.base.500')

#180048

Siphon

token('colors.background.base.900')

#100030

Primary

Soho Lights (10%)

token('colors.background.primary.10')

rgba(240, 80, 248, 0.1)

Akoya

token('colors.background.primary.100')

#FA98FF

Soho Lights

token('colors.background.primary.500')

#F050F8

Bubblegum

token('colors.background.primary.600')

#FF2FFB

Plum

token('colors.background.primary.900')

#600E6B

Secondary

Ink (10%)

token('colors.background.secondary.10')

rgba(88, 64, 255, 0.1)

Blue Tang

token('colors.background.secondary.100')

#6675F6

Ink

token('colors.background.secondary.500')

#5840FF

Blueberry

token('colors.background.secondary.900')

#2D1A83

Tertiary

Aquamarine (10%)

token('colors.background.tertiary.10')

rgba(189, 242, 255, 0.1)

Aquamarine (20%)

token('colors.background.tertiary.20')

rgba(189, 242, 255, 0.2)

Aquamarine

token('colors.background.tertiary.100')

#BDF2FF

Voltage

token('colors.background.tertiary.500')

#60F0F8

Success

Green (10%)

token('colors.background.actions.success.10')

rgba(16, 195, 149, 0.1)

Green (30%)

token('colors.background.actions.success.30')

rgba(16, 195, 149, 0.3)

Mint

token('colors.background.actions.success.100')

#A4FFE8

Green

token('colors.background.actions.success.500')

#10C395

Warning

Orange (10%)

token('colors.background.actions.warning.10')

rgba(236, 130, 67, 0.1)

Orange (30%)

token('colors.background.actions.warning.30')

rgba(236, 130, 67, 0.3)

Oranda

token('colors.background.actions.warning.100')

#FFA26B

Orange

token('colors.background.actions.warning.500')

#EC8243

Error

Red (10%)

token('colors.background.actions.error.10')

rgba(255, 62, 104, 0.1)

Red (30%)

token('colors.background.actions.error.30')

rgba(255, 62, 104, 0.3)

Salmon

token('colors.background.actions.error.100')

#FF809B

Red

token('colors.background.actions.error.500')

#FF3E68

Info

Blue (10%)

token('colors.background.actions.information.10')

rgba(0, 200, 248, 0.1)

Blue (30%)

token('colors.background.actions.information.30')

rgba(0, 200, 248, 0.3)

Squirtle

token('colors.background.actions.information.100')

#71E3FF

Blue

token('colors.background.actions.information.500')

#00C8F8

Colour (contents)

All colours that can be used on top of the background colours above. All background colours have a corresponding content colour.

Name

Panda CSS variable

Value

#F0FFFF

Ice

token('colors.contents.base.900')

#F0FFFF

Primary

Siphon

#100030

Spacing

All spacing values available across the system.

Name

Figma variable

Panda CSS variable

Pixel value

Rem value

none

none

token('spacing.none')

0px

0rem

xxs

spacing xxs

token('spacing.xxs')

4px

0.4rem

xs

spacing xs

token('spacing.xs')

8px

0.8rem

xsSm

spacing xs-sm

token('spacing.xsSm')

12px

1.2rem

sm

spacing sm

token('spacing.sm')

16px

1.6rem

smMd

spacing sm-md

token('spacing.smMd')

20px

2rem

md

spacing md

token('spacing.md')

24px

2.4rem

mdLg

spacing md-lg

token('spacing.mdLg')

28px

2.8rem

lg

spacing lg

token('spacing.lg')

32px

3.2rem

lgXl

spacing lg-xl

token('spacing.lgXl')

36px

3.6rem

xl

spacing xl

token('spacing.xl')

40px

4rem

xxl

spacing xxl

token('spacing.xxl')

48px

4.8rem

xxxl

spacing xxxl

token('spacing.xxxl')

64px

6.4rem

Typography

All Typography styles available across the system.

Name

Figma text style

Panda CSS variable

Font weight

11.11px

Border

Name

Figma variable

Panda CSS variable

Pixel value

Rem value

Border radius

border radius sm

borderRadius.base

12px

1.2rem

Border width

border width

borderWidth.base

2px

0.2rem

Animation

Name

Panda CSS variable

Value

duration

animation.duration.ms.asNumber

200

animation.duration.ms.asString

200ms

animation.duration.sec.asNumber

0.2

animation.duration.sec.asString

0.2s

easing

animation.easing.asString

cubic-bezier(0.4, 0, 0.2, 1)

animation.easing.asArray

[0.4, 0, 0.2, 1]

Breakpoints

Name

Panda CSS variable

Value

xs

breakpoints.xs

400px

sm

breakpoints.sm

640px

md

breakpoints.md

768px

lg

breakpoints.lg

1024px

xl

breakpoints.xl

1280px