Colors

Ds-kit contains a set of seven colors and a set of neutrals to create the visual impact associated with the datastory brand.

UI primary colors

#511ee9
Primary

#2a1e42
Text

#7f7496
Secondary text

#FFFFFF
White

UI secondary colors

#35c983
Success

#e32942
danger

#ffbd07
Warning

#c5bfd2
Disabled

Color palettes

#fdfff0

100

#fcfff0

200

#e7f2bf

300

#d0e691

400

#b8d966

500

#9fcb3f

600

#7ba62b

700

#59801b

800

#3a590e

900

#1f3308

lime

#f0fff5

100

#e3fced

200

#b1f0cc

300

#84e3b0

400

#5ad698

500

#35c983

600

#22a36b

700

#147d53

800

#0a573a

900

#053022

green

#dcf5f1

100

#95e8dd

200

#69dbd0

300

#42cfc5

400

#1fc2bc

500

#00b6b6

600

#008a8f

700

#006269

800

#003c42

900

#00181c

teal

#e6faff

100

#a3eaff

200

#7adcff

300

#52cbff

400

#29b8ff

500

#009cf7

600

#007dd1

700

#0061ab

800

#004785

900

#002f5e

cyan

#e6f6ff

100

#a3daff

200

#7ac6ff

300

#52aeff

400

#2994ff

500

#0077ff

600

#005ed9

700

#0047b3

800

#00338c

900

#002266

blue

#f5edff

100

#dbc4ff

200

#be9cff

300

#9f73ff

400

#7847f5

500

#511ee9

600

#3610c2

700

#20059c

800

#120075

900

#09004f

blurble

#f5dcef

100

#e89bd9

200

#db70c9

300

#cf48bd

400

#c225b2

500

#b605ab

600

#8f008a

700

#690069

800

#400042

900

#1a001c

purple

#ffe6ee

100

#ffa8c8

200

#fc7eb1

300

#f05196

400

#e32980

500

#d6046e

600

#b0005e

700

#8a004e

800

#63003c

900

#3d0027

pink

#fff0f0

100

#ffd1d1

200

#ffa8ab

300

#fc7e87

400

#f05161

500

#e32942

600

#bd1934

700

#960c28

800

#70031d

900

#4a0115

red

#fff7eb

100

#ffe6c2

200

#ffd199

300

#ffba70

400

#ffa047

500

#ff841e

600

#d9630f

700

#b34704

800

#8c3100

900

#662000

orange

#fffce6

100

#fff4ab

200

#ffea82

300

#ffde59

400

#ffcf30

500

#ffbd07

600

#d99800

700

#b37700

800

#8c5900

900

#663d00

yellow

#f6f5f8

100

#dddae5

200

#c5bfd2

300

#ada6be

400

#968daa

500

#7f7496

600

#685d81

700

#53476c

800

#3e3257

900

#2a1e42

grey

Backgrounds

The lightest colors in the color palettes (color25) can be used as background colors. In cases where colored backgrounds are used, the text color should be the main text color (grey900) to meet accesibility standards.

Colors and the `<Lozenge />` component

Similarly to backgrounds, Lozenges use the lightest shade of the respective color (color25). In this case however, the text color should correspond to color700 in the same color palette. For example, a blue lozenge would use blue25 for background and blue700 for text in order to meet accessibility standards. This doesn't apply to colored icons on light colored backgrounds, as they can usually be lighter than color700.

LozengeLozengeLozengeLozenge

The Datastory Blurble

The Datastory Blurble (blue400) is our main brand color. The Datastory Blurble is used to indicate states. It is currently used for buttons, check marks, toggles, tabs and highlighted text fields.

Working with colors in Sketch

If you are using one of the Datastory templates, you will notice that you can access all Datastory colors in the Document colors section.

If you are working with a new sketch file and don't have the colors installed, follow these steps to add all Datastory colors in any sketch file withdatastory-colors.sketchpalette. To get started follow these steps:

Download the sketch-palettes plugin.
Install the plugin by double clicking the file highlighted in the image below:

In a new sketch file navigate to Plugins -> Sketch Palettes -> Load Palette and select [datastory-colors.sketchpalette] on Dropbox under /Templates.

You can add the datastory-colors sketch palette to any sketch file in this way.

Go to datastory.org