Colour

A palette of colours used across Standard Life interfaces to maintain consistency

Overview

Compound used a light default theme. Future versions will include additional themes.

The page sections tokens for clarity.

Base

These are the default colour tokens used on the theme at the base level

Base

#051a3f

Heading

Colours for headings

#121f47

Subheading

Colours for Sub-headings

#3c4253

Body

Body copy

#d9dbdd

Border

Default border

#ffffff

Surface

Default surface

#051a3f

On-Light

Text and fills on a light background

#ffffff

On-Dark

Text and fills on a light background

#26cebf

Focus Outer

Focus outer ring for the default surface

#091024

Focus Inner

Colour for focus inner ring

Type

Modifiers specifically for typography

Type

#121f47

Strong

#656a76

Subtle

Surfaces

Usage of these tokens is explained in the surface guidelines.

Surface

#f1f3f7

Alt 1

#e3eff6

Alt 2

#edf7ef

Alt 3

rgba(9,16,36,0.6)

Overlay

Neutral 1000 60%

Link

Specific tokens for link styles

Link

#116998

Default

#FFBB00 Yellow 700

#0e577d

Hover

#FFCF4D Yellow 500

#8454a4

Visited

#DBCDE4 Purple 200

#4396c2

Active

#FFF7E0 Yellow 100

Actions

Action / Secondary

#116998

Text

rgba(255,255,255,0)

#116998

Border

#116998

Fill

Action / Secondary / Hover

#0e577d

Text

#eff6fa

#0e577d

Border

#0e577d

Fill

Action / Secondary / Active

#0e577d

Text

#c4deec

#0e577d

Border

#0e577d

Fill

Action / Danger

#be1d13

Text

#fdf0ef

#be1d13

Border

#be1d13

Fill

Action / Danger / Active

#9c180f

rgba(255,255,255,0)

Border

#ffffff

Fill

#ffffff

Text

Action / Danger / Hover

#9c180f

Text

#f7c8c5

rgba(255,255,255,0)

Border

#9c180f

Fill

Action / Disabled / Solid

#f1f3f7

Text

#c2c4c8

rgba(255,255,255,0)

Border

#f1f3f7

Fill

Action / Disabled / Outline

#c2c4c8

Text

rgba(255,255,255,0)

#c2c4c8

Border

#c2c4c8

Fill

Action / Primary

#ffffff

Text

#147cb3

rgba(255,255,255,0)

Border

#ffffff

Fill

Action / Primary / Hover

#ffffff

Text

#116998

rgba(255,255,255,0)

Border

#ffffff

Fill

Action / Primary / Active

#ffffff

Text

#0e577d

rgba(255,255,255,0)

Border

#ffffff

Fill

Action / Selected

#0b4462

Text

#a1cbe1

#147cb3

Border

#0e577d

Fill

Action / Selected / Hover

#0b4462

Text

#c4deec

#147cb3

Border

#0e577d

Fill

Action / Selected / Active

#a1cbe1

#147cb3

Border

#0e577d

Fill

#0b4462

Text

Action / Tertiary

#116998

Text

rgba(255,255,255,0)

Border

#116998

Fill

Action / Tertiary / Active

#c4deec

rgba(255,255,255,0)

Border

#116998

Fill

#0e577d

Text

Action / Tertiary / Hover

#0e577d

Text

#e3eff6

rgba(255,255,255,0)

Border

#0e577d

Fill

Miscellaneous

Misc

#5ba3ca

Aside

Misc / Brand

#0a2f73

Primary

#ffbb00

Secondary

#147cb3

Tertiary

#ffffff

Neutral

Status

#f1f3f7

Base

#F1F3F7 Neutral 200

#26cebf

Highlight

#008075 Aqua 900

#ffbb00

Accent

#FFBB00 Yellow 700

#008616

Positive

#be1d13

Negative

Feedback

#116998

Information

#eff6fa

Information Bg

#EFF6FA Blue 000

#008616

Success

#008616 Green 700

#edf7ef

Success Bg

EDF7EF Green 000

#be1d13

Danger

#BE1D13 Red 800

#fdf0ef

Danger Bg

#FDF0EF Red 000

#d97500

Warning

#fff7ed

Warning Bg

#FFFAED YE 00

#008075

Highlight

Highlight for feedback

#edfbfa

Highlight Bg

Icon

#051a3f

Fill

Nav

#051a3f

Text

#ffffff

#e2e6ee

Border

#051a3f

Fill

Nav / Selected

#0e577d

Text

#ffffff

#ffbb00

Border

#0e577d

Fill

Nav / Hover

#0e577d

Text

#e3eff6

#e2e6ee

Border

#0e577d

Fill

Nav / Active

#0e577d

Text

#c4deec

#e2e6ee

Border

#0e577d

Fill

Invert

Invert / Base

#f7f8fa

Heading

Default Heading Styles

#c2cbdc

Subheading

Default subheading styles

#d9dbdd

Body

Default body styles

#73dfd6

Focus Outer

Outer Ring Focus States

#ffffff

Focus Inner

Inner Ring Focus States

#5ba3ca

Border

Base Border Colour

#0a2f73

Surface

#051a3f

On Light

#ffffff

On Dark

Type

Invert / Type

#c2cbdc

Strong

Darker than body text

Collection

Syntax: Web

#c2c4c8

Subtle

Lighter than body text

Collection

Syntax: Web

Surfaces

Invert / Surface

#072150

Alt 1

#051a3f

Alt 2

#04132e

Alt 3

#147cb3

Brand 1

Alternate Brand Colour

#4d2668

Brand 2

Alternate Brand Colour

#008075

Brand 3

Alternate Brand Colour

#993357

Brand 4

Alternate Colour

#0a2f73

Brand 5

Alternate brand colour

Link

Invert / Link

#ffbb00

Default

#FFBB00 Yellow 700

#ffcf4d

Hover

#FFCF4D Yellow 500

#dbcde4

Visited

#DBCDE4 Purple 200

#fff7e0

Active

#FFF7E0 Yellow 100

Actions

Invert / Action / Secondary

#ffffff

Text

rgba(255,255,255,0)

#ffffff

Border

#ffffff

Fill

Invert / Action / Secondary / Active

#ffffff

Text

#051a3f

#ffffff

Border

#ffffff

Fill

Invert / Action / Secondary / Hover

#ffffff

Text

#072150

#ffffff

Border

#ffffff

Fill

Invert / Action / Disabled / Outline

#536d9d

Text

rgba(255,255,255,0)

#536d9d

Border

#536d9d

Fill

Invert / Action / Disabled / Solid

#082862

Text

#536d9d

rgba(255,255,255,0)

Border

#082862

Fill

Invert / Action / Tertiary

#ffffff

Text

rgba(255,255,255,0)

Border

#ffffff

Fill

Invert / Action / Tertiary / Active

#ffffff

Text

#051a3f

rgba(255,255,255,0)

Border

#ffffff

Fill

Invert / Action / Tertiary / Hover

#ffffff

Text

#072150

rgba(255,255,255,0)

Border

#ffffff

Fill

Invert / Action / Selected

#ffffff

Text

#072150

#116998

Border

#ffffff

Fill

Invert / Action / Selected / Hover

#ffffff

Text

#051a3f

#116998

Border

#ffffff

Fill

Invert / Action / Selected / Active

#ffffff

Text

#04132e

#116998

Border

#ffffff

Fill

Invert / Action / Primary

#072150

Text

#ffc526

rgba(255,255,255,0)

Border

#072150

Fill

Invert / Action / Primary / Hover

#072150

Text

#ffbb00

rgba(255,255,255,0)

Border

#072150

Fill

Invert / Action / Primary / Active

#072150

Text

#d99f00

rgba(255,255,255,0)

Border

#072150

Fill

Status

Invert / Status

#f1f3f7

Base

Collection

Syntax: Web

#00a799

Highlight

#008075 Aqua 900

Collection

Syntax: Web

#ffcf4d

Accent

#FFBB00 Yellow 700

Collection

Syntax: Web

#73bc7f

Positive

Collection

Syntax: Web

#ea6f68

Negative

Collection

Syntax: Web

Icon

#ffffff

Fill

Collection

Syntax: Web

Token set

Semantic

Nav

Invert / Nav

#ffffff

Text

Token set

Semantic

#0a2f73

Token set

Semantic

#536d9d

Border

Token set

Semantic

#ffffff

Fill

Token set

Semantic

Invert / Nav / Active

#ffffff

Text

Token set

Semantic

#051a3f

Token set

Semantic

#536d9d

Border

Token set

Semantic

#ffffff

Fill

Token set

Semantic

Invert / Nav / Selected

#ffffff

Text

Token set

Semantic

#072150

Token set

Semantic

#ffcf4d

Border

Token set

Semantic

#ffffff

Fill

Token set

Semantic

Invert / Nav / Hover

#ffffff

Text

Token set

Semantic

#536d9d

Border

Token set

Semantic

#072150

Token set

Semantic

#ffffff

Fill

Token set

Semantic