Color palettes

Colors Main and semantic palettes

Our color palettes ensure brand consistency and enhance user experience. The main color palette defines our brand's visual identity, while the semantic color palette assigns specific meanings to colors for improved clarity and accessibility.

Brand colors - Marketing

Brand colors, created by Marketing, shown for reference Brand colors reflect the brand's personality, values, and overall aesthetic. These colors are typically used in public facing company websites, print materials, physical products, and broader brand communication. .

Main colors - Marketing

Black
#000000

Black Navy
000f32

Print Navy
001a61

Bright Navy
050288

Bright Blue
0357fc

Light Blue
00adee

Mint Green
7df98c

Beeline Green
5fa300

Eggshell white
f4f4f4

White
ffffff

Accent colors - Marketing

Tang
ffde9b

Gold
ffc004

JU orange
ef6103

Red
fe0300

Hot pink
ec098d

Neon pink
ff1 dea

Neon Purple
ae00ff

Purple
6c1ffe

Core colors Core design system colors are adapted and optimized for our digital platforms, mobile apps, and other interfaces. In our design system, these core colors reinforce brand identity, ensure visual consistency, convey hierarchy, enhance compliance and accessibility, and provide a foundation for scalable design. They create a unified and memorable visual language across all our products and platforms.

Core colors

Primary
Bright Blue
#0357FC
primary.40

Secondary
Blue
#001858
secondary.40

Tertiary
Beeline Green
#4C8300
tertiary.40

Beeline Black
Black
#191C1D
neutral.10

Neutral-Variant
Extended Gray
#4C6073
neutral-variant.40

White
Global White
#FFFFFF
neutral.100

Semantic colors

Error
error.40
#D81313

Warning
warning.40
#E59C05

Success
success.40
#44A5A1

Info
info.40
#6F6CE8

Color definitions - Core colors

Extended palettes Extended tonal palettes provide our designers with a broader spectrum of hues and shades, offering increased flexibility to create visually rich and diverse user interfaces while maintaining a cohesive and harmonious overall aesthetic.

0 bg #000000
text #FFFFFF

21:1 AAA
AAA

100 bg #FFFFFF
text #000000

21:1 AAA
AAA

Common Tonal Values The tonal scales illustrate shades from the darkest to the lightest colors. In all scales, '0' represents black, and '100' represents white, as shown here.

Black and white, as universal tones, are displayed here, separately and not within the specific palettes below.

Primary

primary.40 #0357FC

Contrast Ratio 5.56

Normal Text AA

Large Text AAA

Primary color role High-emphasis fills, texts, and icons against surface.
Used for primary buttons on pages, and key calls to action such as 'Submit,' and 'Save,'

Extended tonal palette

10 #01256A

14.2:1 AAA

20 #02308B

11.6:1 AAA

30 #023EB3

8.9:1 AAA

40 #0357FC

6.4:1 AA

50 #3579FD

5.3:1 AA

P-60 #568EFD

6.6:1 AA

P-70 #8BB2FE

9.8:1 AA

P-80 #B1CBFE

12.8:1 AAA

P-90 #CCDDFF

15.3:1 AAA

P-95 #E6EEFF

18.0:1 AAA

P-99 #F5F9FF

19.8:1 AAA

Secondary

secondary.40 #001858

Contrast Ratio 16.51

Normal Text AAA

Large Text AAA

Secondary color role Secondary colors complement the primary palette, providing additional flexibility. They are used for accents, highlights, and backgrounds to create visual interest and support the primary colors.

Extended tonal palette

S-10 #000B29

19.9:1 AAA

S-20 #000E35

18.8:1 AAA

S-30 #001245

17.9:1 AAA

S-40 #001858

16.5:1 AAA

S-50 #001A61

15.9:1 AAA

S-60 #334881

8.8:1 AA

S-70 #546695

5.6:1 AA

S-80 #8A96B6

7.1:1 AAA

S-90 #B0B8CE

10.5:1 AAA

S-95 #E6E8EF

17.5:1 AAA

S-99 #F0F2F7

18.7:1 AAA

Tertiary

tertiary.40 #4C8300

Contrast Ratio 4.61

Normal Text AA

Large Text AAA

Tertiary color role Standout fill color against surface, for key components like FAB.
Less prominent actions or as supplementary options, often smaller or less visually emphasized compared to primary and secondary actions

Extended tonal palette

T-10 #244000

11.6:1 AAA

T-20 #335300

8.8:1 AAA

T-30 #3E6500

4.8:1 AA

T-40 #4C8300

4.6:1 AA

T-50 #5B9C00

6.2:1 AA

T-60 #86BF2A

9.4:1 AAA

T-70 #A2D64F

12.2:1 AAA

T-80 #BADE81

13.8:1 AAA

T-90 #D3E9B0

16.0:1 AAA

T-95 #EAF4D9

18.4:1 AAA

T-99 #EFF6E6

18.9:1 AAA

Neutral Variant

NV-40 #4C6073

Contrast Ratio 6.5

Normal Text AA

Large Text AAA

Neutral Variant color role Used for backgrounds, dividers, and other elements that provide subtle differentiation without drawing attention away from primary or secondary content.

Extended tonal palette

NV-10 #232C35

14.1:1 AAA

NV-20 #2E3A45

11.6:1 AAA

NV-30 #3B4B59

8.9:1 AAA

NV-40 #4C6073

6.5:1 AA

NV-50 #53697E

5.6:1 AA

NV-60 #758798

5.6:1 AA

NV-70 #8C9BA9

7.3:1 AAA

NV-80 #B0BAC4

10.0:1 AAA

NV-90 #CAD1D7

13.6:1 AAA

NV-95 #E7E9EB

18.3:1 AAA

NV-99 #F7F9FA

19.8:1 AAA

Color definitions - Sematic colors

The importance of semantic colors Semantic colors convey specific meanings and provide visual cues for user interactions. These colors indicate states such as success, warning, error, and information, ensuring a clear and intuitive user experience through consistent use.

Neutral Variant

E-40

Contrast Ratio 5.2:1

Normal Text AA

Large Text AAA

Neutral Variant color role Highlights critical issues or mistakes that need immediate attention, typically in a way that grabs the user's focus and signals urgency.

Extended tonal palette

10 #640A0A

132:1 AAA

20 #820C0C

10.4:1 AAA

30 #A80F0F

7.76:1 AAA

40 #D81313

5.2:1 AA

50 #ED1515

4.7:1 AA

60 #F14444

5.6:1 AA

70 #F36262

6.7:1 AA

80 #F79393

9.5:1 AAA

90 #F9B6B6

12.3:1 AAA

95 #FDE8E8

17.8:1 AAA

99 #FEF6F6

19.7:1 AAA

Warning

W-40 #E59C05

Contrast Ratio 10.5:1

Normal Text AAA

Large Text AAA

Warning color role Indicates potential issues or actions that require user attention without being critical, typically shown in a way that stands out but doesn't alarm.

Extended tonal palette

10 #523E02

7.4:1 AAA

20 #8C6A02

5.0:1 AA

30 #B58803

6.4:1 AA

40 #E8AF04

10.5:1 AAA

50 #FFC004

12.7:1 AAA

60 #FFCD36

14.0:1 AAA

70 #FFD557

14.9:1 AAA

80 #FFE28C

16.5:1 AAA

90 #FFEBB1

17.7:1 AAA

95 #FFF9E6

19.9:1 AAA

99 #FFFCF5

20.4:1 AAA

Success

SU-40 #44A5A1

Contrast Ratio 13.0:1

Normal Text AAA

Large Text AAA

Success color role Used to indicate successful completion of actions or operations, providing positive feedback to the user in a reassuring and affirmative manner.

Extended tonal palette

10 #2A542F

8.7:1 AAA

20 #3B7542

5.5:1 AAA

30 #55A85E

7.1:1 AAA

40 #72E37F

13.0:1 AAA

50 #7DF98C

15.8:1 AAA

16.5:1 AAA

70 #A8FBB2

17.1:1 AAA

80 #B4FABD

17.3:1 AAA

90 #C3FCCA

18.0:1 AAA

95 #DCFDE0

19.1:1 AAA

99 #F2FEF4

20.2:1 AAA

Info

I-40 #6F6CE8

Contrast Ratio 6.8:1

Normal Text AAA

Large Text AAA

Info color role Provides additional context or details to users, often used for non-critical messages or informational content that supports user actions or decisions.

Extended tonal palette

10 #004964

9.8:1 AAA

20 #005F83

7.0:1 AAA

30 #007BA9

4.7:1 AA

40 #009DD9

6.8:1 AA

50 #00ADEE

8.2:1 AAA

60 #33BDF1

9.6:1 AAA

70 #54C8F4

10.9:1 AAA

80 #8AD9F7

13.4:1 AAA

90 #B0E6FA

15.5:1 AAA

95 #DAF4FD

19.0:1 AAA

99 #F2FCFF

20.1:1 AAA

Accent color definitions

The importance of accent colors Additional accent colors add visual interest to prevent monotony, guide interactions by identifying clickable areas and maintain brand consistency across digital platforms.

They are useful in adding a range of colors for use in data visualisations while maintaining brand compliance and consistency across all or products.

Purple

purple-40 #621CE7

Contrast Ratio 7.3:1

Normal Text AAA

Large Text AAA

purple color role An auxiliary bright color to highlight critical elements or draw attention to specific actions, features, or notifications, providing a vibrant and eye-catching contrast within the interface sparingly.

Extended tonal palette

10 #33326B

15.2:1 AAA

20 #43418C

12.7:1 AAA

30 #5754B5

10.0:1 AAA

40 #621CE7

7.3:1 AAA

50 #7A77FF

6.4:1 AA

60 #9592FF

4.6:1 AA

70 #A6A4FF

5.8:1 AA

80 #C2C0FF

9.0:1 AAA

90 #D6D5FF

12.1:1 AAA

95 #F2F1FF

17.8:1 AAA

99 #F4F3FF

19.9:1 AAA

Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com

CORE DESIGN SYSTEM

Foundations