greyp

#061015
bg-dark-1

#101a1f
bg-dark-2
bg-greyp-900

#192429
bg-dark-3

#232e33
bg-dark-4
bg-greyp-800

#2d383d
bg-dark-5

#374248
bg-dark-6
bg-greyp-700

#464f54
bg-grey-1

#5d686e
bg-grey-2
bg-greyp-600

#738087
bg-grey-3

#8a989f
bg-grey-4
bg-greyp-500

#a1afb6
bg-grey-5

#b9c5ca
bg-grey-6
bg-greyp-400

#ced5d9
bg-light-1
bg-greyp-900

#d0dde4
bg-light-2
bg-greyp-900

#d5e5ed
bg-light-3
bg-greyp-900

#dbecf4
bg-light-4
bg-greyp-900

#e3f2fa
bg-light-5
bg-greyp-900

#ecf7fd
bg-light-6
bg-greyp-900

What?

greyp is a tool for generating greyscale color palettes. It takes away a lot of frustration early in my design process and allows me to complete a design without fretting for hours about color combinations.

Even when you’re ready to refine an idea in higher fidelity, resist the temptation to introduce color right away. By designing in grayscale, you’re forced to use spacing, contrast, and size to do all of the heavy lifting.
Adam Wathan & Steve Schoger, Refactoring UI

How?

Class names

greyp comes with class-names for background-, text- and border-color.

<div class="bg-dark-1">
<p class="text-dark-1">
<input class="border-dark-1">

Class naming conventions

greyp has two naming conventions available, depending on personal preference.

1 - 6 - 18 colors in total.

Uses same logic as <h1> - <h6>, based on visibility:

h1 is more visible than h6
bg-dark-1 is more visible than bg-dark-6
text-grey-1 is more visible than text-grey-6
border-light-1 is more visible than border-light-6

100 - 900 - 9 colors in total.

Uses same logic as font-weight and borrowed from Material Design and Tailwind

bg-greyp-100 is lighter than bg-greyp-900
text-greyp-100 is lighter than text-greyp-900
border-greyp-100 is lighter than border-greyp-900

Variables

To generate custom color palettes, modify the SCSS-variables below. The following presets produce warm greys instead of cool greys.


$dark: #020202;           // Basis for dark colors.
$light: #cdcdcd;          // Basis for light colors.
$add-light: 4%;           // Higher values equal lighter colors
$add-saturation: 10%;     // Add general saturation
$add-red: 2;              // Add red to colors
$add-green: 0;            // Add green to colors
$add-blue: 0;             // Add blue to colors

greyp.

grey palette for design prototyping.

What?

How?

Class names

Class naming conventions

Variables