Canada's National Observer
CNO Developer System
Section 03 — Colour

Colour

A small palette with fixed jobs: black frames, orange calls to action, blue links.

TextBlack on white, as on the site. Muted grey for labels only.
Text
body text (--cno-base-font-color), table cells, headings
R0 G0 B0
21.0:1 ON WHITE--color-text
Text on dark
text and icons on the black sidebar and on filled buttons
R255 G255 B255
1.0:1 ON WHITE--color-text-on-dark
Text muted
labels, captions (--cno-gray-500)
R102 G102 B102
5.7:1 ON WHITE--color-text-muted
Text disabled
disabled text (--cno-gray-700)
R153 G153 B153
2.8:1 ON WHITE--color-text-disabled
Brand and neutralsBlack frames the app, dark blue is the admin action colour, Subscribe orange is the single call to action.
Primary
links in the admin, active states, focus (--cno-blue-dark)
R0 G63 B116
10.7:1 ON WHITE--color-primary
Primary hover
link and button hover (--cno-blue, the site's link colour)
R59 G165 B209
2.8:1 ON WHITE--color-primary-hover
Link
links on the public site (a { color: var(--cno-blue) })
R59 G165 B209
2.8:1 ON WHITE--color-link
Accent
Subscribe orange: the active-item bar and the one call to action (--cno-subscribe-orange)
R254 G59 B31
3.6:1 ON WHITE--color-accent
Brand red
red of the CNO logo mark (--cno-red-300)
R255 G58 B30
3.6:1 ON WHITE--color-brand-red
Ink
sidebar, header and footer-dark surfaces (--cno-black)
R0 G0 B0
21.0:1 ON WHITE--color-ink
Ink soft
hover on black surfaces (--cno-gray-100)
R34 G34 B34
15.9:1 ON WHITE--color-ink-soft
Surface
cards, menus, main area (--cno-white)
R255 G255 B255
1.0:1 ON WHITE--color-surface
Page bg
code boxes, dev box, page tint (--cno-gray-1200)
R249 G249 B249
1.1:1 ON WHITE--color-page-bg
Surface alt
footer background (--cno-gray-1100)
R242 G242 B242
1.1:1 ON WHITE--color-surface-alt
Border
section header rule (--cno-gray-950)
R221 G221 B221
1.4:1 ON WHITE--color-border
Border light
table row dividers (--cno-gray-1000)
R226 G226 B226
1.3:1 ON WHITE--color-border-light
Border strong
input borders (--cno-gray-900)
R204 G204 B204
1.6:1 ON WHITE--color-border-strong
Hover
round icon button hover
--color-hover
Focus visible
keyboard focus fill on rows
--color-focus-visible
Icon muted
icons (--cno-gray-600)
R117 G117 B117
4.6:1 ON WHITE--color-icon-muted
Backdrop
behind a dialog (--cno-modal-background-color)
--color-backdrop
Link underline
underline on admin links
--color-link-underline
Disabled bg
disabled button fill (--cno-gray-1000)
R226 G226 B226
1.3:1 ON WHITE--color-disabled-bg
Disabled text
disabled button text (--cno-gray-700)
R153 G153 B153
2.8:1 ON WHITE--color-disabled-text
StatusColour is meaning: green is success, red is error, amber is a warning.
Success
success (--cno-green)
R13 G181 B0
2.8:1 ON WHITE--color-success
Success bg
success fill (--cno-green-light)
R212 G244 B212
1.2:1 ON WHITE--color-success-bg
Success text
success text (--cno-green-dark)
R5 G79 B0
9.9:1 ON WHITE--color-success-text
Danger
error (--cno-red)
R255 G12 B0
4.0:1 ON WHITE--color-danger
Danger bg
error fill (--cno-red-light)
R255 G206 B204
1.4:1 ON WHITE--color-danger-bg
Danger text
error text (--cno-red-dark)
R153 G7 B0
8.8:1 ON WHITE--color-danger-text
Warning
warning (--cno-yellow-dark)
R255 G173 B2
1.9:1 ON WHITE--color-warning
Warning bg
highlight fill (--cno-gold)
R253 G202 B64
1.5:1 ON WHITE--color-warning-bg
Rules
  • Always use the token (var(--color-text)), never the hex
  • Orange (--color-accent) is for the single call to action and the active-item bar, not decoration
  • Light blue (--color-link) is for links on the public site; dark blue (--color-primary) is the admin action and hover colour
  • Body text is black on white (contrast 21.0:1). Muted grey is for labels only