Colour Tokens

Colours palettes set with custom properties, used globally by our project.

Primary Colours

A primary colour palette used across the web UI and all branding touchpoints.

CSS Vars Editable In Value Comments
var(--color-primary) settings/color.scss #00377C
The primary brand colour.
var(--color-primary-50) #4C7CB8
A lighter primary hue.
var(--color-primary-100) #12B5B
A darker primary hue.

UI Colours

A set of grey/slate hues which provide subtle levels of contrast for components throughout Listers.co.uk. UI colours should be light enough for text to have a good degree of contrast when used as a background.

These colours will adjust when using dark mode.

CSS Vars Editable In Value Comments
var(--color-ui-50) settings/color.scss #F9FAFB
A set of grey monotone hues for UI.
var(--color-ui-100) #F5F7FA
var(--color-ui-200) #F1F5F9
var(--color-ui-300) #EEF2F6
var(--color-ui-400) #EAEFF5
var(--color-ui-500) #E4EAF2
var(--color-ui-600) #E1E7EF
var(--color-ui-700) #DDE4EE
var(--color-ui-800) #D8DEE9

Feedback Colours

A colour palette which defines user feedback colours. Used for alert messages, form feedback, highlight accents and more.

CSS Vars Editable In Value Comments
var(--color-positive) settings/color.scss #0F853A
Positive feedback colours, used to convey positive outcomes such as a successfully completed forms.
var(--color-positive-surface) #DEFDE8
var(--color-positive-text) #0F6B31
var(--color-positive-border) #0F6B31
var(--color-positive-border-muted) #BDFAD1
var(--color-negative) #B82323
Negative feedback colours, used to convey destructive outcomes such as errors or failures.
var(--color-negative-surface) #FEE1E1
var(--color-negative-text) #A82E2E
var(--color-negative-border) #981B1B
var(--color-negative-border-muted) #FDBABA
var(--color-warning) #DD7622
Warning feedback colours, used to convey warning in anticipation of a significant change by informing but not alarming.
var(--color-warning-surface) #FFEDD6
var(--color-warning-text) #B94609
var(--color-warning-border) #B84F0A
var(--color-warning-border-muted) #F3CAAF
var(--color-info) #0A58D6
Informative feedback colours, used to highlight or accent information which may need more importance or visual hierarchy.
var(--color-info-surface) #D1E3FF
var(--color-info-text) #1147BB
var(--color-info-border) #2463EB
var(--color-info-border-muted) #C7DAFA

Full Colour Palette

A generous palette of great looking, balanced colours. Use appropriately when necessary, and ensure accessibility guidelines are met to meet contrast requirements when using them to create components.

var(--color-grey-50) settings/color.scss #FAFAFA
Grey colour palette.
var(--color-grey-100) #F4F4F5
var(--color-grey-200) #E4E4E7
var(--color-grey-300) #D4D4D8
var(--color-grey-400) #A3A3AA
var(--color-grey-500) #71717A
var(--color-grey-600) #52525B
var(--color-grey-700) #3F3F46
var(--color-grey-800) #27272A
var(--color-grey-900) #18181B
var(--color-slate-50) #F9FAFB
Slate colour palette.
var(--color-slate-100) #F3F4F6
var(--color-slate-200) #EEEFF3
var(--color-slate-300) #E5E7EB
var(--color-slate-400) #D1D5DB
var(--color-slate-500) #9CA3AF
var(--color-slate-600) #64748B
var(--color-slate-700) #334255
var(--color-slate-800) #1B293D
var(--color-slate-900) #10172B
var(--color-blue-50) #EFF6FF
Blue colour palette.
var(--color-blue-100) #DBEAFE
var(--color-blue-200) #BFDBFE
var(--color-blue-300) #93C5FD
var(--color-blue-400) #5FA5FA
var(--color-blue-500) #3B82F6
var(--color-blue-600) #2563EB
var(--color-blue-700) #1D4ED8
var(--color-blue-800) #1E40AF
var(--color-blue-900) #1E3A8A
var(--color-indigo-50) #EEF2FF
Indigo colour palette.
var(--color-indigo-100) #E0E8FF
var(--color-indigo-200) #C7D2FE
var(--color-indigo-300) #A5B4FC
var(--color-indigo-400) #818FF8
var(--color-indigo-500) #6366F1
var(--color-indigo-600) #4F46E5
var(--color-indigo-700) #4338CA
var(--color-indigo-800) #3730A3
var(--color-indigo-900) #312E81
var(--color-purple-50) #F6F3FF
Purple colour palette.
var(--color-purple-100) #EDE8FE
var(--color-purple-200) #DED6FE
var(--color-purple-300) #C3B6FD
var(--color-purple-400) #A78BFA
var(--color-purple-500) #8B5BF6
var(--color-purple-600) #7D3AED
var(--color-purple-700) #6D28D9
var(--color-purple-800) #5A22B4
var(--color-purple-900) #4C1D95
var(--color-pink-50) #FDF2F8
Pink colour palette.
var(--color-pink-100) #FBE7F3
var(--color-pink-200) #FBCFE8
var(--color-pink-300) #F8A9D4
var(--color-pink-400) #F471B5
var(--color-pink-500) #EB4999
var(--color-pink-600) #DA2977
var(--color-pink-700) #BD185D
var(--color-pink-800) #9D174D
var(--color-pink-900) #831843
var(--color-red-50) #FEF2F2
Red colour palette.
var(--color-red-100) #FEE2E2
var(--color-red-200) #FECACA
var(--color-red-300) #FCA5A5
var(--color-red-400) #F77171
var(--color-red-500) #EF4444
var(--color-red-600) #E02424
var(--color-red-700) #B91C1C
var(--color-red-800) #991B1B
var(--color-red-900) #7F1D1D
var(--color-orange-50) #FFF7ED
Orange colour palette.
var(--color-orange-100) #FFEDD5
var(--color-orange-200) #FED6AA
var(--color-orange-300) #FEBA74
var(--color-orange-400) #FC923C
var(--color-orange-500) #F97315
var(--color-orange-600) #EA580B
var(--color-orange-700) #C2400B
var(--color-orange-800) #993313
var(--color-orange-900) #7C2D12
var(--color-yellow-50) #FEFCE8
Yellow colour palette.
var(--color-yellow-100) #FEF9C3
var(--color-yellow-200) #FEF089
var(--color-yellow-300) #FDE047
var(--color-yellow-400) #FBCC14
var(--color-yellow-500) #EBB304
var(--color-yellow-600) #CA8A03
var(--color-yellow-700) #A06207
var(--color-yellow-800) #844D0F
var(--color-yellow-900) #713E12
var(--color-green-50) #EFFEF4
Green colour palette.
var(--color-green-100) #DCFCE6
var(--color-green-200) #BBF6D0
var(--color-green-300) #87EEAB
var(--color-green-400) #49DE80
var(--color-green-500) #21C15C
var(--color-green-600) #17A34A
var(--color-green-700) #17803D
var(--color-green-800) #176434
var(--color-green-900) #15532D
var(--color-teal-50) #F0FDFA
Teal colour palette.
var(--color-teal-100) #CCFBF1
var(--color-teal-200) #99F6E4
var(--color-teal-300) #5EEAD4
var(--color-teal-400) #2DD4BF
var(--color-teal-500) #14B8A6
var(--color-teal-600) #0D9488
var(--color-teal-700) #0F766E
var(--color-teal-800) #115E59
var(--color-teal-900) #134E4A

Useful notes and reading:

Related Links: