UI Color Palette

A comprehensive set of colors built to support theming, data visualization, and complex UI components.

UI Color Palette Intro

The UI color palette for the Goldman Sachs Design System is defined by four overarching goals:

UI Color Usage

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

Colors Used Example 1
UI Color Palette Example 1
Colors Used Example 2
UI Color Palette Example 2