Color System

Color System

The ability to intuitively customize colors to suit your deisgn system is an important aspect of Uniform. Uniform provides a wide spectrum of colors, each with 11 tints and shades to choose from. Tints and Shades in Uniform follow the 50, 100, 200 ... system commonly seen in other color systems.

Basic Usage

To apply colors, use <property-shorthand>-<color>.

<div class="bg-pink color-white">
  pink background with white text
</div>
<div class="color-blue">
  blue text
</div>
<div class="border-1 border-orange">
  1 pixel orange border
</div>

Base Colors

The following base colors are available to be be applied to color related properties such as border, color, and background-color. Colors are generated using the Colorbox color generater developed by Lyft's design team. A importable json configuration can be found under the file colorbox.json inside the uniform directory.

Color Opacity

All colors are initially configured in hexadecimal format e.g. #ffffff. However, during the build process, Uniform will convert each color to their rgba equivalent values. By doing so, you can take advantage of the opacity property by manipulating the alpha channel of each color. For more information, check out Opacities.