Colour Colour name Hex codeSCSS variable Notes
System-black #1A1A1A $ontario-colour-black Default colour for most text (such as body, headings, subheadings)
System-white #FFFFFF $ontario-colour-white Text on primary buttons, dark backgrounds
Alert #CD0000 $ontario-colour-alert Alert-level icons, left-hand vertical bar of alert box or error box
Alert light #FCEFF0 $ontario-colour-alert-light Background of alert box
Success #118847 $ontario-colour-success Success-level icons, left-hand vertical bar of success box
Success light #E5f0E9 $ontario-colour-success-light Background of success box
Warning #FFD440 $ontario-colour-warning Warning-level icons, left-hand vertical bar of warning box
Warning light #FEF6DC $ontario-colour-warning-light Background of warning box
Information #1080A6 $ontario-colour-information Information-level icons, left-hand vertical bar of information box
Information light #E2F0F4 $ontario-colour-information-light Background of information box
Link #0066cc $ontario-colour-link Buttons and unvisited links
Link - hover #00478F $ontario-colour-link--hover Button and link hover state
Link - active #002142 $ontario-colour-link--active Button and link active state
Link - visited #551A8B $ontario-colour-link--visited Link visited state (but not buttons – they remain blue)
Secondary - hover #E0F0FF $ontario-colour-secondary--hover Secondary button hover state
Secondary - active #C2E0FF $ontario-colour-secondary--active Secondary button active state
Tertiary - hover #E8E8E8 $ontario-colour-tertiary--hover Tertiary button hover state
Tertiary - active #D1D1D1 $ontario-colour-tertiary--active Tertiary button active state
Focus ring #009ADB $ontario-colour-focus Focus state outline for inputs, links and buttons