@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 |