• UCLA Blue
  $brand--primary
  #2774ae
• Darker Blue
  $brand--primary-darker
  #005587
• Darkest Blue
  $brand--primary-darkest
  #003b5c
• Lighter Blue
  $brand--primary-lighter
  #8bb8e8
• Lightest Blue
  $brand--primary-lightest
  #c3d7ee
• UCLA Gold
  $brand--secondary
  #ffd100
• White
  $white
  #ffffff
• Gray
  $gray
  #e5e5e5
• Black
  $black
  #000000

Grayscale

• $gray-80
  #333333
• $gray-60
  #666666
• $gray-40
  #999999
• $gray-10
  #e5e5e5

Denotive Colors

• Success Green
  $brand--success
  #007339
• Warning Orange
  $brand--warning
  #f57f17
• Error Red
  $brand--danger
  #d60000
• Primary Alert Blue
  $brand--info
  #8bb8e8
• Secondary Alert Gray
  $brand--gray
  #999

Interactive Colors

on light background

• Default State
  $state-color
  #00598c
• Hover State
  $state-color-hover
  #0079bf
• Active State
  $state-color-active
  #003b5c
• Focus State
  $state-color-focus
  #0079bf
• Disabled State
  $state-color-disabled
  #757575
• Visited State
  $state-color-visited
  #5223b0

on dark background

• Default State Dark
  $state-color--invert
  #ffd100
• Hover State
  $state-color-hover--invert
  #ffe500
• Active State
  $state-color-active--invert
  #ffbf0f
• Focus State
  $state-color-focus--invert
  #ffe500
• Disabled State
  $state-color-disabled--invert
  #e5e5e5
• Visited State
  $state-color-visited--invert
  #ffffff

Primary font: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Primary font italic: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Primary font bold: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Monospace font: Menlo, Monaco, Consolas, "Courier New", monospace