EUAA Design System

Colours

EUAA applications use a limited palette of core colours, and depending on the application context, differently coloured themes.

Core Colours

These are the core colours that are being used in all EUAA applications.

#24234C
var(--euaa-color-highlight-1)

#FCC402
var(--euaa-color-highlight-2)

Theme Colours

The theme colours are reserved for different types of applications. The default theme is used for any application that does not fall into any of the listed sectors.

Default Theme: General EUAA sector

#519DD0
var(--highlight-color)

#C3E4FA
var(--primary-colour)

#F2F8FD
var(--secondary-color)

#F3F5F8
var(--light-bg-color)

#E6F0FB
var(--hover-secondary-color)

Text colour

#212133
var(--primary-txt-color)

Green Theme: Training and professional development

#8FC048
var(--highlight-color)

#5B7D2A
var(--primary-colour)

#EEF2E9
var(--secondary-color)

#F6F8F4
var(--light-bg-color)

#DEE5D4
var(--hover-secondary-color)

Text colour

#3B3B3B
var(--primary-txt-color)

Purple Theme: Practical guides and tools

#8A1F59
var(--highlight-color)

#8A1F59
var(--primary-colour)

#F3E8EE
var(--secondary-color)

#F9F3F6
var(--light-bg-color)

#E8D2DE
var(--hover-secondary-color)

Text colour

#212133
var(--primary-txt-color)

Teal Theme: Governance documents

#00ABBE
var(--highlight-color)

#1A818D
var(--primary-colour)

#E5F7F9
var(--secondary-color)

#F2FBFC
var(--light-bg-color)

#CCEEF2
var(--hover-secondary-color)

Text colour

#303030
var(--primary-txt-color)

Grey Theme: Data and analytical reports

#CBCAC9
var(--highlight-color)

#1071D8
var(--primary-colour)

#F5F5F4
var(--secondary-color)

#FAFAFA
var(--light-bg-color)

#EFEFEF
var(--hover-secondary-color)

Text colour

#2E2E2E
var(--primary-txt-color)

Red Theme: Country of origin information reports

#E7362C
var(--highlight-color)

#DC281E
var(--primary-colour)

#F5F5F4
var(--secondary-color)

#FAFAFA
var(--light-bg-color)

#EFEFEF
var(--hover-secondary-color)

Text colour

#303030
var(--primary-txt-color)

Pink Theme: Country Guidance

#EA506E
var(--highlight-color)

#D23E5B
var(--primary-colour)

#FDEDF0
var(--secondary-color)

#FEF6F8
var(--light-bg-color)

#FBDCE2
var(--hover-secondary-color)

Text colour

#303030
var(--primary-txt-color)

Light Blue Theme: Courts and tribunals

#75CBF3
var(--highlight-color)

#1071D8
var(--primary-colour)

#E3F5FD
var(--secondary-color)

#F1FAFE
var(--light-bg-color)

#D5EFFC
var(--hover-secondary-color)

Text colour

#212133
var(--primary-txt-color)

Lilac Theme: External relations and operations

#DBC2CE
var(--highlight-color)

#1071D8
var(--primary-colour)

#F8F3F5
var(--secondary-color)

#FCF9FA
var(--light-bg-color)

#F4EDF0
var(--hover-secondary-color)

Text colour

#212133
var(--primary-txt-color)

Feedback message colours

Info message

#519DD0
var(--dark-info-color)

#C3E4FA
var(--info-colour)

Alert message

#E9B536
var(--dark-alert-color)

#FCF5C9
var(--alert-color)

Success message

#36B260
var(--dark-success-color)

#D4FFD9
var(--success-color)

Error message

#F0544F
var(--dark-error-color)

#FBD8CE
var(--error-color)

Best practices

Dos

Stick to the colour scheme presented
Colour should be used to focus attention
Colour should create distinction between elements by means of contrast
Apply colour purposefully to convey meaning

Dont's

Never use light coloured text on light backgrounds.