@quesk/colors

@quesk/colors

The colors package is used for having a convenient colors guide for the developers. Almost no other colors should be used in the products of Quesk.

Installation & Usage

Since this is a public package, you can install the package in your project using yarn or npm. Use one of the following two command to install the package:

$ yarn add @quesk/colors

$ npm install --save @quesk/colors

When you want to use the package, it's important to know, that there is no default export in this package. We are only exporting the variables/constants that are shown below this paragraph.

To use the package, please use the following import lines:

import { PRIMARY_TONES } from '@quesk/colors'

Color palettes

PRIMARY_TONES

The primary tones palette features the main color of Quesk, which is the infamous blue and a tinted variant of the color for tinted backgrounds.

Name	Color
default	#2499ff
tinted	#e3f2ff

EXPLORATION_TONES

The exploration tones are here for coloring some categories or other stuff. Those are just colorful and blendable colors in all tones.

Name	Color
blue	PRIMARY_TONES.default
pink	#f34190
green	#34b384
purple	#7c60c7
yellow	#ffac30
brown	#b96a36
brownTinted	#ffecd4

GREY_TONES

Those are some greyscale tones that should be used throughout the applications to make the application feel more lifeful.

Name	Color
darkest	#353748
dark	#505261
mediumDark	#64677c
medium	#717683
mediumLight	#cacbd5
light	#f1f2f5
lightest	#f7f8fa

FONT_TONES

Name	Color
default	GREY_TONES.darkest
dark	#999
light	#ccc
ultraLight	#eee

BACKGROUND_TONES

Name	Color
grey	GREY_TONES.lightest
white	#fff