MindDrop homepageMindDrop Homepage
ThemesBeta
GitHub

Getting Started

Setup

Colors

The ScalesUnderstanding the scale

The Scales

An overview of MindDrop's color scales.

Colors

MindDrop uses six UI color scales and ten content color scales. All colors are designed designed for white foreground text at step 9. Each color has a light and dark variant.

UI colors

UI colors are applied to UI elements.

Brand

1
2
3
4
5
6
7
8
9
10
11
12
brand
brandA
brandDark
brandDarkA

Neutral

1
2
3
4
5
6
7
8
9
10
11
12
neutral
neutralA
neutralDark
neutralDarkA

Success

1
2
3
4
5
6
7
8
9
10
11
12
success
successA
successDark
successDarkA

Warning

1
2
3
4
5
6
7
8
9
10
11
12
warning
warningA
warningDark
warningDarkA

Danger

1
2
3
4
5
6
7
8
9
10
11
12
danger
dangerA
dangerDark
dangerDarkA

Info

1
2
3
4
5
6
7
8
9
10
11
12
info
infoA
infoDark
infoDarkA

Content colors

Content colors are applied to content, such as tags or highlighted drops.

Violet

1
2
3
4
5
6
7
8
9
10
11
12
violet
violetA
violetDark
violetDarkA

Blue

1
2
3
4
5
6
7
8
9
10
11
12
blue
blueA
blueDark
blueDarkA

Cyan

1
2
3
4
5
6
7
8
9
10
11
12
cyan
cyanA
cyanDark
cyanDarkA

Green

1
2
3
4
5
6
7
8
9
10
11
12
grass
grassA
grassDark
grassDarkA

Red

1
2
3
4
5
6
7
8
9
10
11
12
red
redA
redDark
redDarkA

Pink

1
2
3
4
5
6
7
8
9
10
11
12
pink
pinkA
pinkDark
pinkDarkA

Orange

1
2
3
4
5
6
7
8
9
10
11
12
orange
orangeA
orangeDark
orangeDarkA

Yellow

1
2
3
4
5
6
7
8
9
10
11
12
yellow
yellowA
yellowDark
yellowDarkA

Brown

1
2
3
4
5
6
7
8
9
10
11
12
brown
brownA
brownDark
brownDarkA

Gray

1
2
3
4
5
6
7
8
9
10
11
12
gray
grayA
grayDark
grayDarkA

Overlays

The black and white scales are designed for overlays. These scales don’t change across themes.



1
2
3
4
5
6
7
8
9
10
11
12
blackA
whiteA
Previous
Setup
Next
Understanding the scale
Edit this page on GitHub.