colors

$brand-colors variable

The brand is defined by a simple red color, and a range of blue-grays.

$brand-colors: (
  'red': rgb(207, 10, 44),
  'dark': 'gray' ('shade': 60%),
  'gray': rgb(92, 102, 111),
  'light': 'gray' ('tint': 85%),
);
red
#cf0a2c
rgba(207, 10, 44, 1)
hsla(350deg, 91%, 43%, 1)
dark
#25292c
rgba(37, 41, 44, 1)
hsla(206deg, 9%, 16%, 1)
gray
#5c666f
rgba(92, 102, 111, 1)
hsla(208deg, 9%, 40%, 1)
light
#e7e8e9
rgba(231, 232, 233, 1)
hsla(210deg, 4%, 91%, 1)

$accent-colors variable

Go/yield/stop accent colors for UI elements.

$accent-colors: (
  'go': #008000,
  'yield': #dd9b0b,
  'stop': 'red',
);
go
#008000
rgba(0, 128, 0, 1)
hsla(120deg, 100%, 25%, 1)
yield
#dd9b0b
rgba(221, 155, 11, 1)
hsla(41deg, 91%, 45%, 1)
stop
#cf0a2c
rgba(207, 10, 44, 1)
hsla(350deg, 91%, 43%, 1)

$theme-colors variable

The base theme element colors for our application.

$theme-colors: (
  'background': #fff,
  'border': 'gray' ('tint': 60%),
  'text': 'dark',
  'text-light': 'text' ('tint': 30%),
  'callout': 'light',
  'action': 'red',
  'focus': 'action' ('shade': 15%),
  'pending': rgb(253, 246, 226),
);
background
#fff
rgba(255, 255, 255, 1)
hsla(0deg, 0%, 100%, 1)
border
#bec2c5
rgba(190, 194, 197, 1)
hsla(206deg, 6%, 76%, 1)
text
#25292c
rgba(37, 41, 44, 1)
hsla(206deg, 9%, 16%, 1)
text-light
#66696b
rgba(102, 105, 107, 1)
hsla(204deg, 2%, 41%, 1)
callout
#e7e8e9
rgba(231, 232, 233, 1)
hsla(210deg, 4%, 91%, 1)
action
#cf0a2c
rgba(207, 10, 44, 1)
hsla(350deg, 91%, 43%, 1)
focus
#b00925
rgba(176, 9, 37, 1)
hsla(350deg, 90%, 36%, 1)
pending
#fdf6e2
rgba(253, 246, 226, 1)
hsla(44deg, 87%, 94%, 1)

$component-colors variable

Specific component-variations on the color palette.

$component-colors: (
  'primary': 'red',
  'gradient': 'light' ('tint': 5%),

  'input-border': 'gray',
  'photo-credit': 'light' ('rgba': 0.65),

  'warning': 'yield',
  'warning-light': #eec771,
  'go-light': 'go' ('tint': 75%),
  'stop-light': 'stop' ('tint': 75%),
  'go-dark': 'go' ('shade': 60%),
  'stop-dark': 'stop' ('shade': 60%),

  'overlay-dark': 'dark' ('rgba': 0.9),
  'overlay-light': 'background' ('rgba': 0.9),
  'transparent': 'background' ('rgba': 0),
  'shadow': 'dark' ('rgba': 0.6),
  'shadow-light': 'dark' ('rgba': 0.2),
  'low-battery': 'stop' ('lighten': 25%),

  'contrast-dark': 'text',
  'contrast-light': 'background',

  'current-location': #153e93,
  'current-location-dark': 'current-location' ('shade': 60%),

  'unread': 'go' ( 'rgba': 0.09),
);
primary
#cf0a2c
rgba(207, 10, 44, 1)
hsla(350deg, 91%, 43%, 1)
gradient
#e8e9ea
rgba(232, 233, 234, 1)
hsla(210deg, 5%, 91%, 1)
input-border
#5c666f
rgba(92, 102, 111, 1)
hsla(208deg, 9%, 40%, 1)
photo-credit
rgba(231, 232, 233, 0.65)
hsla(210deg, 4%, 91%, 0.65)
warning
#dd9b0b
rgba(221, 155, 11, 1)
hsla(41deg, 91%, 45%, 1)
warning-light
#eec771
rgba(238, 199, 113, 1)
hsla(41deg, 79%, 69%, 1)
go-light
#bfdfbf
rgba(191, 223, 191, 1)
hsla(120deg, 33%, 81%, 1)
stop-light
#f3c2ca
rgba(243, 194, 202, 1)
hsla(350deg, 67%, 86%, 1)
go-dark
#003300
rgba(0, 51, 0, 1)
hsla(120deg, 100%, 10%, 1)
stop-dark
#530412
rgba(83, 4, 18, 1)
hsla(349deg, 91%, 17%, 1)
overlay-dark
rgba(37, 41, 44, 0.9)
hsla(206deg, 9%, 16%, 0.9)
overlay-light
rgba(255, 255, 255, 0.9)
hsla(0deg, 0%, 100%, 0.9)
transparent
rgba(255, 255, 255, 0)
hsla(0deg, 0%, 100%, 0)
shadow
rgba(37, 41, 44, 0.6)
hsla(206deg, 9%, 16%, 0.6)
shadow-light
rgba(37, 41, 44, 0.2)
hsla(206deg, 9%, 16%, 0.2)
low-battery
#f7617b
rgba(247, 97, 123, 1)
hsla(350deg, 91%, 68%, 1)
contrast-dark
#25292c
rgba(37, 41, 44, 1)
hsla(206deg, 9%, 16%, 1)
contrast-light
#fff
rgba(255, 255, 255, 1)
hsla(0deg, 0%, 100%, 1)
current-location
#153e93
rgba(21, 62, 147, 1)
hsla(220deg, 75%, 33%, 1)
current-location-dark
#08193b
rgba(8, 25, 59, 1)
hsla(220deg, 76%, 13%, 1)
unread
rgba(0, 128, 0, 0.09)
hsla(120deg, 100%, 25%, 0.09)

$third-party-colors variable

$third-party-colors: (
  'dropbox': #397abe,
  'strava': #fc4c02,
  'trainingpeaks': #005695,
  'todaysplan': #e72f83,
);
dropbox
#397abe
rgba(57, 122, 190, 1)
hsla(211deg, 54%, 48%, 1)
strava
#fc4c02
rgba(252, 76, 2, 1)
hsla(18deg, 98%, 50%, 1)
trainingpeaks
#005695
rgba(0, 86, 149, 1)
hsla(205deg, 100%, 29%, 1)
todaysplan
#e72f83
rgba(231, 47, 131, 1)
hsla(333deg, 79%, 55%, 1)