Tempo - by Castos

Colors

Shades

Our colour palette consists of the following shades:

  • gray
  • purple (primary)
  • indigo
  • red (secondary)
  • blue
  • cyan
  • green
  • yellow

Tones

All colors are pinned on the primary tone of 600 with 6 lighter shades (50, 100, 200, 300, 400, 500) and 3 darker shades (700, 800, 900)

Primary Color(s)

The primary shade and tone we use is: purple-600

The secondary shade and tone we use is: red-600

Color Grid

50100200300400500600700800900
gray
AAA
AAA
AAA
AAA
AA
AA
AAA
AAA
AAA
AAA
purplePrimary
AAA
AAA
AAA
AA
AA+
AA+
AA
AAA
AAA
AAA
indigo
AAA
AAA
AA
AA
AA
AA
AAA
AAA
AAA
AAA
redSecondary
AAA
AAA
AA
AA+
AA+
AA+
AA
AA
AAA
AAA
blue
AAA
AAA
AAA
AA
AA+
AA+
AA
AA
AAA
AAA
cyan
AAA
AAA
AAA
AAA
AAA
AA
AA+
AA
AAA
AAA
green
AAA
AAA
AAA
AAA
AA
AA
AA+
AA
AAA
AAA
yellow
AAA
AAA
AAA
AAA
AA
AA
AA
AA+
AA
AAA
emeraldSystem status
AAA
AAA
AAA
AA
AA
AA+
AA+
AA
AAA
AAA

Gradients

to topto rightto bottomto leftto top rightto bottom rightto bottom leftto top left
gray
purple
indigo
red
blue
cyan
green
yellow

Color Values

white: '#FFF',
gray: {
  50: '#F8FAFC',
  100: '#F1F5F9',
  200: '#E2E8F0',
  300: '#CBD5E1',
  400: '#94A3B8',
  500: '#64748B',
  600: '#475569',
  700: '#334155',
  800: '#1E293B',
  900: '#0F172A',
},
purple: {
  50: '#F6F3FF',
  100: '#EFE9FE',
  200: '#E1D6FE',
  300: '#CEB5FD',
  400: '#B98BFA',
  500: '#975CF6',
  600: '#853AED',
  700: '#6C25D0',
  800: '#5A1FAD',
  900: '#4A1B89',
},
indigo: {
  50: '#F7E9FF',
  100: '#EDCEFF',
  200: '#D8A3F8',
  300: '#C17CE9',
  400: '#9E52CB',
  500: '#893DB6',
  600: '#7E159C',
  700: '#70088A',
  800: '#69007A',
  900: '#51045E',
},
red: {
  50: '#FBE5ED',
  100: '#FAD6E2',
  200: '#FCB1C7',
  300: '#F684A6',
  400: '#FF4F91',
  500: '#EC2D76',
  600: '#E11966',
  700: '#C11051',
  800: '#A00D4D',
  900: '#7F0A3D',
},
blue: {
  50: '#EFF7FF',
  100: '#DBECFE',
  200: '#BFDFFE',
  300: '#93CAFD',
  400: '#60B0FA',
  500: '#3B89F6',
  600: '#256AEB',
  700: '#1C51CF',
  800: '#1C43A5',
  900: '#1B3E7E',
},
cyan: {
  50: '#F0FFFD',
  100: '#D7FEFC',
  200: '#B0FCF9',
  300: '#71F9F5',
  400: '#2AEFE8',
  500: '#06D4DF',
  600: '#09B5C8',
  700: '#0E8190',
  800: '#135B68',
  900: '#11444B',
},
yellow: {
  50: '#FFFCEB',
  100: '#FEF8D7',
  200: '#FDEFA0',
  300: '#FCE669',
  400: '#FBCE2D',
  500: '#F6BB19',
  600: '#E9A106',
  700: '#AF6A09',
  800: '#874E0D',
  900: '#64370C',
},
green: {
  50: '#EBFFEA',
  100: '#C9FEC5',
  200: '#97F390',
  300: '#6AE961',
  400: '#03E139',
  500: '#03D126',
  600: '#04AC21',
  700: '#05801A',
  800: '#065614',
  900: '#063E10',
},
emerald: {
  50: '#ECFDF5',
  100: '#D1FAE5',
  200: '#A7F3D0',
  300: '#6EE7B7',
  400: '#34D399',
  500: '#10B981',
  600: '#059669',
  700: '#047857',
  800: '#065F46',
  900: '#064E3B',
},