@fifteen/design-system-vue/dist/styles/settings/colors.styl

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

/**
 * Colors
 */
$colors := {
  neutral: {
    dark-5:  #000000,
    dark-4:  #2A3039,
    dark-3:  #546171,
    dark-2:  #8091A5,
    dark-1:  #A9B9C0,
    base:    #B4C3CA,
    light-1: #C3CFD6,
    light-2: #D3DCE0,
    light-3: #E5EBED,
    light-4: #F8F9FA,
    light-5: #FFFFFF,
  },
  primary: {
    dark-2:  #7A005F,
    dark-1:  #B7006B,
    base:    #FF0062,
    light-1: #FF6682,
    light-2: #FFCCCC,
  },
  secondary: {
    dark-2:  #000A18,
    dark-1:  #001524,
    base:    #012433,
    light-1: #4FAEC1,
    light-2: #C4F3F4,
  },
  success: {
    dark-2:  #195E6A,
    dark-1:  #429F9C,
    base:    #83DEC9,
    light-1: #B8F5DB,
    light-2: #E8FDF0,
  },
  info: {
    dark-2:  #32006E,
    dark-1:  #6200A6,
    base:    #A900E7,
    light-1: #E463F7,
    light-2: #FDCBFD,
  },
  warning: {
    dark-2:  #7A431C,
    dark-1:  #B7804A,
    base:    #FFD293,
    light-1: #FFE9BE,
    light-2: #FFF9E9,
  },
  danger: {
    dark-2:  #710F1F,
    dark-1:  #AA292A,
    base:    #ED6A53,
    light-1: #F9B598,
    light-2: #FEECDD,
  },
}