Skip to content

Color

Guidelines

We use color to signal structure, highlight or emphasize important information or elements, and to display different states.

See our color guidelines to understand how we use colors.

Palette

Token	Value	Example
`blue000`	#fafcfe
`blue100`	#f5f8fd
`blue200`	#e8f1fc
`blue300`	#d2e3f9
`blue400`	#bbd4f7
`blue500`	#9cc1f3
`blue600`	#6da4ed
`blue700`	#4588e3
`blue800`	#286ecc
`blue900`	#27589b
`green000`	#fbfefc
`green100`	#f4f9f6
`green200`	#ecf9f0
`green300`	#d9f2e1
`green400`	#c6ecd2
`green500`	#ace3bd
`green600`	#85d69e
`green700`	#6abe84
`green800`	#2c8354
`green900`	#255937
`pink000`	#fffafb
`pink100`	#fff5f6
`pink200`	#ffebed
`pink300`	#ffdee2
`pink400`	#ffc8d0
`pink500`	#f39ca8
`pink600`	#dc818e
`pink700`	#cb727f
`pink800`	#b2535f
`pink900`	#7b3840
`purple000`	#fbfbfe
`purple100`	#f8f7fd
`purple200`	#edebf9
`purple300`	#dcd7f4
`purple400`	#b3a9e7
`purple500`	#a69ae3
`purple600`	#8474d8
`purple700`	#7363c5
`purple800`	#5442b3
`purple900`	#43387a
`red000`	#fffafa
`red100`	#fff5f5
`red200`	#fee6e6
`red300`	#fecdcd
`red400`	#fdb5b5
`red500`	#fc9090
`red600`	#fb6060
`red700`	#e91c1c
`red800`	#d61f1f
`red900`	#a51d1d
`shade000`	#ffffff
`shade100`	#fafafa
`shade200`	#f5f5f5
`shade300`	#ececec
`shade400`	#cccccc
`shade500`	#b3b3b3
`shade600`	#737373
`shade700`	#333333
`shade800`	#222222
`shade900`	#000000
`yellow000`	#fffefa
`yellow100`	#fffdf5
`yellow200`	#fcf9e4
`yellow300`	#fef6cd
`yellow400`	#fbefaf
`yellow500`	#fcea88
`yellow600`	#fbe360
`yellow700`	#dfc538
`yellow800`	#dbbd1a
`yellow900`	#b39a0f

Usage in code

import {tokens} from '@pleo-io/telescope'

const element = styled.div`
    color: ${tokens.shade900};
`

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

On this page

Palette
Usage in code