Skip to main content

Raven Design System

Colours

Primary palette



RDS' primary palette uses Carleton's brand colours, red, black and white refactored for accessible digital experiences.

CU Red

  • HEX: BF112B
  • RGB: 191,17,43
  • HSL: 351, 84%, 41%
  • SASS: $red
  • AA: Passes
  • AAA: Fails

CU Black

  • HEX: 222222
  • RGB: 34,34,34
  • HSL: 0, 0%, 13%
  • SASS: $black
  • AA: Passes
  • AAA: Passes

CU Grey

  • HEX: F3F3F3
  • RGB: 243,243,243
  • HSL: 0, 0%, 95%
  • SASS: $grey
  • AA: Passes
  • AAA: Passes

White

  • HEX: FFFFFF
  • RGB: 255,255,255
  • HSL: 0, 0%, 100%
  • SASS: na ('white')
  • AA: Passes
  • AAA: Passes

Neutral Palette



RDS uses 6 shades of grey to work alongside our primary palette for user interface colour options.

Grey E

  • HEX: 535353
  • RGB: 83,83,83
  • HSL: 0, 0%, 33%
  • SASS: $grey-emperor
  • AA: Passes
  • AAA: Passes

Grey V

  • HEX: 767676
  • RGB: 118,118,118
  • HSL: 0, 0%, 46%
  • SASS: $grey-vader
  • AA: Passes
  • AAA: Fails

Grey A

  • HEX: 939393
  • RGB: 147,147,147
  • HSL: 0, 0%, 58
  • SASS: $grey-anakin
  • AA: Fails
  • AAA: Fails

Grey L

  • HEX: B1B1B1
  • RGB: 191,17,43
  • HSL: 0, 0%, 69%
  • SASS: $grey-luke
  • AA: Passes
  • AAA: Passes

Grey K

  • HEX: DFDFDF
  • RGB: 34,34,34
  • HSL: 0, 0%, 87%
  • SASS: $grey-kenobi
  • AA: Passes
  • AAA: Passes

Grey Y

  • HEX: EAEAEA
  • RGB: 243,243,243
  • HSL: 0, 0%, 92%
  • SASS: $grey-yoda
  • AA: Passes
  • AAA: Passes

Feedback Palette



Feedback colours reinforce a user action and represents a clear message as well as alert statuses, such as information, success, error, warning and link.

The link colour identifies navigational elements.

CU Link

  • HEX: 105F83
  • RGB: 18, 107, 147
  • HSL: 199, 78%, 32%
  • SASS: $link
  • AA: Passes
  • AAA: Passes

CU Link:hover

  • HEX: BF112B
  • Duplicate: see above
  • AA: Passes
  • AAA: Fails

Information feedback

This status colour provides additional description and highlights information, generally, within copy and content.

Info Foreground

  • HEX: 91d5ff
  • RGB: 145, 213, 255
  • HSL: 203, 100%, 78%
  • SASS: na

Info Background

  • HEX: E6F7FF
  • RGB: 145, 213, 255
  • HSL: 203, 100%, 78%
  • SASS: na
  • AA: Passes
  • AAA: Passes

Error Feedback

Reserved for errors, malfunctions, as well as hover and selected states.

Error FG - CU Red

  • HEX: BF112B
  • Duplicate: see above

Error Background

  • HEX: F9E6E9
  • RGB: 249, 230, 233
  • HSL: 351, 61%, 94%
  • SASS: na
  • AA: Passes
  • AAA: Passes

Success Feedback

Can be used to provide a success message after an action has been taken.

Success Foreground

  • HEX: 45BF2E
  • RGB: 69, 191, 46
  • HSL: 210, 61%, 46%
  • SASS: na

Success Background

  • HEX: FAFFF5
  • RGB: 250, 255, 245
  • HSL: 90, 100%, 98%
  • SASS: na
  • AA: Passes
  • AAA: Passes

Warning Feedback

Can be used to provide a success message after an action has been taken.

Warning Foreground

  • HEX: fAAB08
  • RGB: 250, 171, 8
  • HSL: 40, 96%, 51
  • SASS: na

Warning Background

  • HEX: fffaf1
  • RGB: 255, 250, 241
  • HSL: 39, 100%, 97%
  • SASS: na
  • AA: Passes
  • AAA: Passes