Как использовать?
Общая концепция такова — если вам нужно сделать фон, разделитель, графический эффект, то используем для этого level темнее или светлее.
Примечание. Предпочтительнее идти от светлого к темному.
Например, если вы хотите сделать светлый, блочный сайт, то можете поступить так:
фон сайта — светлый, 4-й уровень;
блоки — светлый, 1-й уровень;
разделители внутри белых блоков — 2-й уровень;
фон у белых блоков — второй уровень;
разделители на светлом фоне 2-го уровня — светлый, 3-й уровень.
Визуальный пример: 
Использование в Photoshop и Sketch
В Sketch для каждого цвета создается переменная и используется при раскраске объектов. Благодаря этому, если вы решите изменить цвет — ранее раскрашенные объекты изменят цвет автоматически на новый.
В Photoshop можно добавить в панель Library или Swatches.