Overview

During design and development, colors should be referenced by name. Using named colors has a few important benefits:

  • More meaningful than hex values in mockups and code
  • Encourages consistency and accessibility across the application
  • Support for alternate themes

Some examples of named colors in the Kolibri Design System include:

tokens.text
palette.grey.v_900
tokens.error
palette.red.v_800
tokens.primary
brand.primary.v_400
brand.primary.v_900
#4b2e4d
brand.secondary.v_200
#8dc5b6
palette.grey.v_400
#bdbdbd

Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including:

  • Branding, aesthetics, and color harmony
  • Sufficient contrast between foreground and background colors
  • Accommodation of color blind users
  • Maintainability and consistency of the application and code
  • Amenability to theming by using tokens correctly

Tokens

Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application.

Color tokens are by themselves abstract and defined by a purpose, not a color value. A theme makes them concrete by mapping them to specific brand colors and palette colors .

When using tokens, it's very important to use them because of their purposes, not because of their color values. Multiple tokens will commonly share a single color value.

Brand shortcuts

tokens.primary
brand.primary.v_400

Default primary brand color. Commonly used for interactive elements

tokens.primaryDark
brand.primary.v_700

Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements

UI Colors

tokens.surface
palette.white

Default background color

tokens.text
palette.grey.v_900

Normal text color. (Typically used on top of the $themeTokens.surface color)

tokens.annotation
palette.grey.v_700

Text color with lower visual weight. (Typically used on top of the $themeTokens.surface color)

tokens.textDisabled
palette.grey.v_300

Text color with lowest visual weight. (Typically used on top of the $themeTokens.surface color)

tokens.textInverted
palette.white

Text color for creating sufficient contrast when used on dark backgrounds (such as $themeTokens.primary)

tokens.loading
brand.secondary.v_200

Color for loaders, spinners, and other progress indicators

tokens.focusOutline
brand.secondary.v_200

Used to indicate keyboard focus

tokens.fineLine
#dedede

Used for divider lines and rules

tokens.error
palette.red.v_800

Indicates an application or validation error

tokens.success
palette.green.v_700

Indicates the successful completion of an action in the application

Learner activity

tokens.progress
palette.lightblue.v_500

Indicates "in-progress" learner activity

tokens.mastered
palette.amber.v_500

Indicates learner mastery or completion

tokens.correct
palette.green.v_600

Indicates a correct response by a learner

tokens.incorrect
palette.red.v_800

Indicates an incorrect response by a learner

User-related labels

tokens.coachContent
palette.lightblue.v_800

Used for coloring coach content icons

tokens.superAdmin
palette.amber.v_600

Used for coloring super admin permission key icons

Content-related labels

tokens.exercise
palette.cyan.v_600
tokens.video
palette.indigo.v_700
tokens.audio
palette.pink.v_400
tokens.document
palette.deeporange.v_600
tokens.html5
palette.yellow.v_800
tokens.topic
palette.grey.v_800

Scales

A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow Google's Material convention and segment colors into ten brightness levels, named v_50, v_100, v_20, … v_800, v_900:

palette.blue.v_50
#e3f2fd
palette.blue.v_100
#bbdefb
palette.blue.v_200
#90caf9

palette.blue.v_800
#1565c0
palette.blue.v_900
#0d47a1

Due to the inconsistent way that humans perceive color and light, computing these scales is both art and science. It should not be done by simply sliding a "brightness" setting. We used materialpalettes.com to generate the scales for our primary and secondary brand colors. The same should be done for new themes.

Brand colors

Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.

The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:

brand.primary.v_50
#f0e7ed
brand.primary.v_100
#dbc3d4
brand.primary.v_200
#c59db9
brand.primary.v_300
#ac799d
brand.primary.v_400
#996189
brand.primary.v_500
#874e77
brand.primary.v_600
#7c4870
brand.primary.v_700
#6e4167
brand.primary.v_800
#5f3b5c
brand.primary.v_900
#4b2e4d
brand.secondary.v_50
#e3f0ed
brand.secondary.v_100
#badbd2
brand.secondary.v_200
#8dc5b6
brand.secondary.v_300
#62af9a
brand.secondary.v_400
#479e86
brand.secondary.v_500
#368d74
brand.secondary.v_600
#328168
brand.secondary.v_700
#2c715a
brand.secondary.v_800
#26614d
brand.secondary.v_900
#1b4634

Palette

A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the 2014 Material Design color palette, which has many colors to choose from.

In our design system, colors from the palette have names like pink, grey, and amber.

With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors.

Grey values

A scale of standard greys

palette.white
#ffffff
palette.black
#000000
palette.grey.v_50
#fafafa
palette.grey.v_100
#f5f5f5
palette.grey.v_200
#eeeeee
palette.grey.v_300
#e0e0e0
palette.grey.v_400
#bdbdbd
palette.grey.v_500
#9e9e9e
palette.grey.v_600
#757575
palette.grey.v_700
#616161
palette.grey.v_800
#424242
palette.grey.v_900
#212121

Full palette

The complete set of colors available in the palette

palette.red.v_50
#ffebee
palette.red.v_100
#ffcdd2
palette.red.v_200
#ef9a9a
palette.red.v_300
#e57373
palette.red.v_400
#ef5350
palette.red.v_500
#f44336
palette.red.v_600
#e53935
palette.red.v_700
#d32f2f
palette.red.v_800
#c62828
palette.red.v_900
#b71c1c
palette.red.v_a100
#ff8a80
palette.red.v_a200
#ff5252
palette.red.v_a400
#ff1744
palette.red.v_a700
#d50000
palette.pink.v_50
#fce4ec
palette.pink.v_100
#f8bbd0
palette.pink.v_200
#f48fb1
palette.pink.v_300
#f06292
palette.pink.v_400
#ec407a
palette.pink.v_500
#e91e63
palette.pink.v_600
#d81b60
palette.pink.v_700
#c2185b
palette.pink.v_800
#ad1457
palette.pink.v_900
#880e4f
palette.pink.v_a100
#ff80ab
palette.pink.v_a200
#ff4081
palette.pink.v_a400
#f50057
palette.pink.v_a700
#c51162
palette.purple.v_50
#f3e5f5
palette.purple.v_100
#e1bee7
palette.purple.v_200
#ce93d8
palette.purple.v_300
#ba68c8
palette.purple.v_400
#ab47bc
palette.purple.v_500
#9c27b0
palette.purple.v_600
#8e24aa
palette.purple.v_700
#7b1fa2
palette.purple.v_800
#6a1b9a
palette.purple.v_900
#4a148c
palette.purple.v_a100
#ea80fc
palette.purple.v_a200
#e040fb
palette.purple.v_a400
#d500f9
palette.purple.v_a700
#aa00ff
palette.deeppurple.v_50
#ede7f6
palette.deeppurple.v_100
#d1c4e9
palette.deeppurple.v_200
#b39ddb
palette.deeppurple.v_300
#9575cd
palette.deeppurple.v_400
#7e57c2
palette.deeppurple.v_500
#673ab7
palette.deeppurple.v_600
#5e35b1
palette.deeppurple.v_700
#512da8
palette.deeppurple.v_800
#4527a0
palette.deeppurple.v_900
#311b92
palette.deeppurple.v_a100
#b388ff
palette.deeppurple.v_a200
#7c4dff
palette.deeppurple.v_a400
#651fff
palette.deeppurple.v_a700
#6200ea
palette.indigo.v_50
#e8eaf6
palette.indigo.v_100
#c5cae9
palette.indigo.v_200
#9fa8da
palette.indigo.v_300
#7986cb
palette.indigo.v_400
#5c6bc0
palette.indigo.v_500
#3f51b5
palette.indigo.v_600
#3949ab
palette.indigo.v_700
#303f9f
palette.indigo.v_800
#283593
palette.indigo.v_900
#1a237e
palette.indigo.v_a100
#8c9eff
palette.indigo.v_a200
#536dfe
palette.indigo.v_a400
#3d5afe
palette.indigo.v_a700
#304ffe
palette.blue.v_50
#e3f2fd
palette.blue.v_100
#bbdefb
palette.blue.v_200
#90caf9
palette.blue.v_300
#64b5f6
palette.blue.v_400
#42a5f5
palette.blue.v_500
#2196f3
palette.blue.v_600
#1e88e5
palette.blue.v_700
#1976d2
palette.blue.v_800
#1565c0
palette.blue.v_900
#0d47a1
palette.blue.v_a100
#82b1ff
palette.blue.v_a200
#448aff
palette.blue.v_a400
#2979ff
palette.blue.v_a700
#2962ff
palette.lightblue.v_50
#e1f5fe
palette.lightblue.v_100
#b3e5fc
palette.lightblue.v_200
#81d4fa
palette.lightblue.v_300
#4fc3f7
palette.lightblue.v_400
#29b6f6
palette.lightblue.v_500
#03a9f4
palette.lightblue.v_600
#039be5
palette.lightblue.v_700
#0288d1
palette.lightblue.v_800
#0277bd
palette.lightblue.v_900
#01579b
palette.lightblue.v_a100
#80d8ff
palette.lightblue.v_a200
#40c4ff
palette.lightblue.v_a400
#00b0ff
palette.lightblue.v_a700
#0091ea
palette.cyan.v_50
#e0f7fa
palette.cyan.v_100
#b2ebf2
palette.cyan.v_200
#80deea
palette.cyan.v_300
#4dd0e1
palette.cyan.v_400
#26c6da
palette.cyan.v_500
#00bcd4
palette.cyan.v_600
#00acc1
palette.cyan.v_700
#0097a7
palette.cyan.v_800
#00838f
palette.cyan.v_900
#006064
palette.cyan.v_a100
#84ffff
palette.cyan.v_a200
#18ffff
palette.cyan.v_a400
#00e5ff
palette.cyan.v_a700
#00b8d4
palette.teal.v_50
#e0f2f1
palette.teal.v_100
#b2dfdb
palette.teal.v_200
#80cbc4
palette.teal.v_300
#4db6ac
palette.teal.v_400
#26a69a
palette.teal.v_500
#009688
palette.teal.v_600
#00897b
palette.teal.v_700
#00796b
palette.teal.v_800
#00695c
palette.teal.v_900
#004d40
palette.teal.v_a100
#a7ffeb
palette.teal.v_a200
#64ffda
palette.teal.v_a400
#1de9b6
palette.teal.v_a700
#00bfa5
palette.green.v_50
#e8f5e9
palette.green.v_100
#c8e6c9
palette.green.v_200
#a5d6a7
palette.green.v_300
#81c784
palette.green.v_400
#66bb6a
palette.green.v_500
#4caf50
palette.green.v_600
#43a047
palette.green.v_700
#388e3c
palette.green.v_800
#2e7d32
palette.green.v_900
#1b5e20
palette.green.v_a100
#b9f6ca
palette.green.v_a200
#69f0ae
palette.green.v_a400
#00e676
palette.green.v_a700
#00c853
palette.lightgreen.v_50
#f1f8e9
palette.lightgreen.v_100
#dcedc8
palette.lightgreen.v_200
#c5e1a5
palette.lightgreen.v_300
#aed581
palette.lightgreen.v_400
#9ccc65
palette.lightgreen.v_500
#8bc34a
palette.lightgreen.v_600
#7cb342
palette.lightgreen.v_700
#689f38
palette.lightgreen.v_800
#558b2f
palette.lightgreen.v_900
#33691e
palette.lightgreen.v_a100
#ccff90
palette.lightgreen.v_a200
#b2ff59
palette.lightgreen.v_a400
#76ff03
palette.lightgreen.v_a700
#64dd17
palette.lime.v_50
#f9fbe7
palette.lime.v_100
#f0f4c3
palette.lime.v_200
#e6ee9c
palette.lime.v_300
#dce775
palette.lime.v_400
#d4e157
palette.lime.v_500
#cddc39
palette.lime.v_600
#c0ca33
palette.lime.v_700
#afb42b
palette.lime.v_800
#9e9d24
palette.lime.v_900
#827717
palette.lime.v_a100
#f4ff81
palette.lime.v_a200
#eeff41
palette.lime.v_a400
#c6ff00
palette.lime.v_a700
#aeea00
palette.yellow.v_50
#fffde7
palette.yellow.v_100
#fff9c4
palette.yellow.v_200
#fff59d
palette.yellow.v_300
#fff176
palette.yellow.v_400
#ffee58
palette.yellow.v_500
#ffeb3b
palette.yellow.v_600
#fdd835
palette.yellow.v_700
#fbc02d
palette.yellow.v_800
#f9a825
palette.yellow.v_900
#f57f17
palette.yellow.v_a100
#ffff8d
palette.yellow.v_a200
#ffff00
palette.yellow.v_a400
#ffea00
palette.yellow.v_a700
#ffd600
palette.amber.v_50
#fff8e1
palette.amber.v_100
#ffecb3
palette.amber.v_200
#ffe082
palette.amber.v_300
#ffd54f
palette.amber.v_400
#ffca28
palette.amber.v_500
#ffc107
palette.amber.v_600
#ffb300
palette.amber.v_700
#ffa000
palette.amber.v_800
#ff8f00
palette.amber.v_900
#ff6f00
palette.amber.v_a100
#ffe57f
palette.amber.v_a200
#ffd740
palette.amber.v_a400
#ffc400
palette.amber.v_a700
#ffab00
palette.orange.v_50
#fff3e0
palette.orange.v_100
#ffe0b2
palette.orange.v_200
#ffcc80
palette.orange.v_300
#ffb74d
palette.orange.v_400
#ffa726
palette.orange.v_500
#ff9800
palette.orange.v_600
#fb8c00
palette.orange.v_700
#f57c00
palette.orange.v_800
#ef6c00
palette.orange.v_900
#e65100
palette.orange.v_a100
#ffd180
palette.orange.v_a200
#ffab40
palette.orange.v_a400
#ff9100
palette.orange.v_a700
#ff6d00
palette.deeporange.v_50
#fbe9e7
palette.deeporange.v_100
#ffccbc
palette.deeporange.v_200
#ffab91
palette.deeporange.v_300
#ff8a65
palette.deeporange.v_400
#ff7043
palette.deeporange.v_500
#ff5722
palette.deeporange.v_600
#f4511e
palette.deeporange.v_700
#e64a19
palette.deeporange.v_800
#d84315
palette.deeporange.v_900
#bf360c
palette.deeporange.v_a100
#ff9e80
palette.deeporange.v_a200
#ff6e40
palette.deeporange.v_a400
#ff3d00
palette.deeporange.v_a700
#dd2c00
palette.brown.v_50
#efebe9
palette.brown.v_100
#d7ccc8
palette.brown.v_200
#bcaaa4
palette.brown.v_300
#a1887f
palette.brown.v_400
#8d6e63
palette.brown.v_500
#795548
palette.brown.v_600
#6d4c41
palette.brown.v_700
#5d4037
palette.brown.v_800
#4e342e
palette.brown.v_900
#3e2723
palette.bluegrey.v_50
#eceff1
palette.bluegrey.v_100
#cfd8dc
palette.bluegrey.v_200
#b0bec5
palette.bluegrey.v_300
#90a4ae
palette.bluegrey.v_400
#78909c
palette.bluegrey.v_500
#607d8b
palette.bluegrey.v_600
#546e7a
palette.bluegrey.v_700
#455a64
palette.bluegrey.v_800
#37474f
palette.bluegrey.v_900
#263238

Themes

The Kolibri Design System comes with a default theme built in, which defines every brightness value of the primary and secondary brand colors. Additionally, the Kolibri application has a default mapping which assigns concrete values to all tokens. For example, by default we set $themeTokens.error to be equal to $themePalette.red.v_700

When setting new brand colors:

  1. Generate new scales from base colors using materialpalettes.com
  2. Redefine the values for $themeTokens.primary and $themeTokens.primaryDark to ensure that color contrast with $themeTokens.textInverted is sufficient.