SS&C Design System

Colors

Color system built out of main brand colors and adjusted for variety of interfaces.

CSS Tokens SASS Tokens Style Dictionary Component Types

Primary

Colors that are used most frequently across all pages and components.

SS&C Blue

#0077c8

Cobalt

#0b4d99

Navy

#131e58

Secondary

Colors that are used most frequently across all pages and components.

Teal

#1099ac

Dark Teal

#076775

Dark Gray

#344157

Accent

Colors that are used most frequently across all pages and components.

Yellow

#f5ab0a

Gray

#858ea0

Gradients

Colors that are used most frequently across all pages and components.

Null

SS&C gradient dark top

linear-gradient(0deg, rgba(0, 119, 200) 0%, rgba(19, 30, 88) 100%)

SS&C gradient top light

linear-gradient(180deg, rgba(0, 119, 200) 0%, rgba(19, 30, 88) 100%)

light ss&c blues

linear-gradient(104.25deg, rgba(178, 214, 238) 0%, rgba(0, 119, 200) 100%), rgba(29, 29, 29, .05)

SS&C gradient 3

linear-gradient(29.98deg, rgba(178, 214, 238) 0%, rgba(102, 173, 222) 82.01%)

Light gradient

linear-gradient(90deg, rgba(255, 255, 255) 32%, rgba(178, 214, 238) 100%)

Gradient 2

linear-gradient(180deg, rgba(38, 66, 132) 0%, rgba(0, 119, 200) 100%)

Primitive

Colors that are used most frequently across all pages and components.

Null

Light gradient

linear-gradient(90deg, rgba(255, 255, 255) 32%, rgba(178, 214, 238) 100%)

Gradient 2

linear-gradient(180deg, rgba(38, 66, 132) 0%, rgba(0, 119, 200) 100%)

Ssc Blue

SS&C Blue 100

#e5f1f9

SS&C Blue 200

#cce4f4

SS&C Blue 300

#99c9e9

SS&C Blue 400

#66adde

SS&C Blue 500

#3392d3

SS&C Blue 600

#0077c8

SS&C Blue 700

#005f9e

SS&C Blue 800

#00497a

SS&C Blue 900

#003152

Cobalt

Cobalt 100

#e7edf5

Cobalt 200

#cedbeb

Cobalt 300

#9db8d6

Cobalt 400

#6d94c2

Cobalt 500

#3c71ad

Cobalt 600

#0b4d99

Cobalt 700

#093e7c

Cobalt 800

#07305f

Cobalt 900

#052243

Teal

Teal 100

#e7f5f7

Teal 200

#cfebee

Teal 300

#9fd6de

Teal 400

#70c2cd

Teal 500

#40adbd

Teal 600

#1099ac

Teal 700

#0d7d8c

Teal 800

#0a5c67

Teal 900

#073f46

Dark Teal

Dark Teal 100

#e6f0f1

Dark Teal 200

#cde1e3

Dark Teal 300

#9cc2c8

Dark Teal 400

#6aa4ac

Dark Teal 500

#398691

Dark Teal 600

#076775

Dark Teal 700

#065460

Dark Teal 800

#05434d

Dark Teal 900

#03333a

Navy

Navy 100

#e7e8ee

Navy 200

#d0d2de

Navy 300

#a1a5bc

Navy 400

#71789b

Navy 500

#424b79

Navy 600

#131e58

Navy 700

#101a4c

Navy 800

#0e163f

Navy 900

#0a102e

Dark Gray

Dark Gray 100

#ebecee

Dark Gray 200

#d6d9dd

Dark Gray 300

#aeb3bc

Dark Gray 400

#858d9a

Dark Gray 500

#5d6779

Dark Gray 600

#344157

Dark Gray 700

#263040

Dark Gray 800

#1b212d

Dark Gray 900

#0d1116

Gray

Gray 100

#f3f4f5

Gray 200

#e7e8ec

Gray 300

#ced2d9

Gray 400

#b6bbc6

Gray 500

#9da5b3

Gray 600

#858ea0

Gray 700

#60697b

Gray 800

#414753

Gray 900

#1f2228

Yellow

Yellow 100

#fef7e6

Yellow 200

#fdeece

Yellow 300

#fbdd9d

Yellow 400

#f9cd6c

Yellow 500

#f7bc3b

Yellow 600

#f5ab0a

Yellow 700

#ba8208

Yellow 800

#7b5505

Yellow 900

#402c03

Text

Colors that are used most frequently across all pages and components.

Hard

#0d1116

Base

#1b212d

Soft

#344157

Muted

#5d6779