FOUNDATION
UI Color Palette
A comprehensive set of colors built to support theming, data visualization, and complex UI components.
The UI color palette for the Goldman Sachs Design System is defined by four overarching goals:
The GS Design System uses an edited set of colors from the color system to achieve consistency and convey hierarchy in often extremely complex applications. It is designed to be a complementary set of colors that work in concert with the primary brand color palette, which is geared towards marketing, editorial and print needs.
Note that the GS Design System uses many more colors than the ones shown on these primary palettes, but the most extensively used colors are documented here. For a comprehensive list of how all colors are used within the system refer to the color tokens.
Action blue, or Blue 60, is the most striking color used for UI Design in the Goldman Sachs Design System. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases.
Blue 060
186ADE
24, 106, 222
Primary Calls to Action, Important Information
The gray color palette is used in a myriad of ways to build user interfaces, structure layouts and convey hierarchy. Having several options allows for complex layerinig of backgrounds, panels, cards, etc.
White
FFFFFF
255, 255, 255
Primary Surface, Reversed Text & Icons
Gray 10
F2F5F7
242, 245, 247
Secondary Surface
Gray 20
DCE3E8
220, 227, 232
Tertiary Surface, Minimal Borders
Gray 30
C1CCD6
193, 204, 214
Subtle Borders
Gray 40
9FB1BD
159, 177, 189
Tertiary Text, Moderate Borders, Secondary Icons
Gray 60
5B7282
91, 114, 130
Bold Borders
Gray 70
3E5463
62, 84, 99
Secondary Text, Primary Icons
Gray 80
2A3F4D
42, 63, 77
Subtle Borders
Gray 90
1C2B36
28, 43, 54
Primary Text, High Contrast Borders
These colors are restricted to instances that require functional color coding, such as error or success, positive or negative.
Green 60
077D55
7, 125, 85
Positive values, success, available
Yellow 30
F5C518
245, 197, 24
Warning, mild alert
Red 60
D91F11
217, 31, 17
Negative value, error, critical alerts
Orange 50
E86427
232, 100, 39
Warning, mild alert, accessible negative value
The data visualization color tokens include enough distinct colors for numerous datasets to be represented, and allows users with color blindness to discern differences between data points.
Blue 70
0D4EA6
13, 78, 166
dataviz-default-sequence-01
Orange 50
E86427
232, 100, 39
dataviz-default-sequence-02
dataviz-default-sequence-03
279C9C
39, 156, 156
dataviz-default-sequence-03
Yellow 40
D9A514
217, 165, 20
dataviz-default-sequence-02
Purple 50
AC71F0
172, 113, 240
dataviz-default-sequence-05
Ultramarine 90
23254D
35, 37, 77
dataviz-default-sequence-06
Lime 50
52A31D
82, 163, 29
dataviz-default-sequence-07
Pink 60
CC1D92
204, 29, 146
dataviz-default-sequence-08
Aqua 40
48B8F0
72, 184, 240
dataviz-default-sequence-09
Green 60
077D55
7, 125, 85
dataviz-default-sequence-10
Contents