WELCOME
Telescope Design System > Foundations > Colors
Colors
The color palette in the Telescope Design System is meticulously curated to ensure visual harmony across all dashboard elements. It includes primary, secondary, and accent colors that reflect the brand’s identity while also enhancing readability and user engagement.
Primary Colors
These are the main colors that make up the majority of the colors used in the design system.
Brand/Primary
The brand color is primary color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
Aa
Primary
#6877FF
Aa
100
#D9DDFF
Aa
200
#B3BBFF
Aa
300
#8E99FF
Aa
400
#4356FF
Aa
500
#1E34FF
Aa
600
#0019F8
Aa
700
#0015D3
Aa
800
#0011AE
Aa
900
#000E89
Brand/Secondary
Along with primary color, it's helpful to have a selection of secondary colors to use in components.
Aa
Primary
#FF774C
Aa
100
#FFE4DB
Aa
200
#FFC9B7
Aa
300
#FFAD94
Aa
400
#FF9270
Aa
500
#FF5A26
Aa
600
#FF3D00
Aa
700
#D83400
Aa
800
#B22B00
Aa
900
#8C2200
Success
Success colors communicate a positive action, positive trend, or a successful confirmation.
Aa
Primary
#9ED79F
Aa
100
#CFEBCF
Aa
200
#60BE62
Aa
300
#48B04A
Warning
Warning colors can communicate that an action is potentially destructive or on-hold.
Aa
Primary
#FFC966
Aa
100
#FFE4B3
Aa
200
#FFAC13
Aa
300
#BF7C00
Error
Error colors are used across error states and in destructive and negative actions.
Aa
Primary
#EF5350
Aa
100
#FAC6C5
Aa
200
#F48C8A
Aa
300
#48B04A
Secondary Colors
Along with primary colors, it's helpful to have a selection of secondary colors to use in components.
Base Colors (Variables)
Base colors are used in key areas like backgrounds, headings, paragraphs, button texts, etc. Base colors are variable colors depending on users' preference between light mode and dark mode.
Base/Primary
Aa
Light
#F5F5F5
Aa
Dark
#111111
Base/Secondary
Aa
Light
#FAFAFA
Aa
Dark
#181818
Base/Tertiary
Aa
Light
#FFFFFF
Aa
Dark
#333333
Grays
Gray is a neutral color and is the foundation of the color system.
Aa
100
#E5E5E5
Aa
200
#D1D1D1
Aa
300
#BCBCBC
Aa
400
#A8A8A8
Aa
500
#939393
Aa
600
#FF3D00
Aa
700
#6A6A6A
Aa
800
#565656
Aa
900
#414141
Chart Colors
Graphic colors are used in graphic cards that are shaped with dynamic data. They are used in graphs such as bar, line, pie, ring, radar, polar, bubble and scatter.
1/Primary
#98C8FB
1/100
#CBE3FD
1/200
#3D97F7
1/300
#0868CE
2/Primary
#C1B4FA
2/100
#E0D9FD
2/200
#7355F4
2/300
#330ED6
3/Primary
#F4A6B0
3/100
#FAD3D8
3/200
#E95064
3/300
#C2182E
4/Primary
#F4E08C
4/100
#FAEFC5
4/200
#ECCA3A
4/300
#BB9A12
5/Primary
#B5E3A7
5/100
#DAF1D3
5/200
#7ACD61
5/300
#4C9F33
6/Primary
#F5BFD6
6/100
#FADFEB
6/200
#E7669D
6/300
#C81F67
7/Primary
#FAC893
7/100
#FCE3C9
7/200
#F69B3A
7/300
#CA6C09
8/Primary
#DEC2B7
8/100
#EFE1DB
8/200
#C08B76
8/300
#BB9A12