Skeletonic CSS comes with a basic set of custom properties, sometimes referred to as CSS variables or cascading variables.

Color Variables

Skeletonic CSS v.1.0.5 pr ovides a set of color palettes and variables as a way to store information that we want to reuse throughout our stylesheet. These are designed to be harmonious, ensure accessible content, and help create contrast between UI elements.

Color Styles available

The Skeletonic CSS v.1.0.5 color variables palette has a smooth range of shadows ranging from brightest to darkest

You will need to import skeletonic-colors.css to display the colors.

Primary palette
Primary paletteWeight class
Most far away50
Far far away100
Far away200
Middle far300
Middle close500
Very close700
Very very close800
Accent palette
Accent paletteWeight class
Most farA100
Basic colors
$black = #000000;
$white = #ffffff;
$transparent = rgba(0, 0, 0, 0);
$full-black  = rgba(0, 0, 0, 1);
$dark-black  = rgba(0, 0, 0, 0.87);
$lightblack = rgba(0, 0, 0, 0.54);
$min-black   = rgba(0, 0, 0, 0.26);
$faint-black = rgba(0, 0, 0, 0.12);
$full-white  = rgba(255, 255, 255, 1);
$dark-white  = rgba(255, 255, 255, 0.87);
$lightwhite = rgba(255, 255, 255, 0.54);

Material Design colors

The background colors are based on Google’s Material Design Color palette.

Range of non accent & accent colors

Text colors

  • Red
  • Pink
  • Purple
  • Deep Purple
  • Indigo
  • Blue
  • Light Blue
  • Cyan
  • Teal
  • Green
  • Light Green
  • Lime
  • Yellow
  • Amber
  • Orange
  • Deep Orange
  • Brown
  • Grey
  • Blue Grey

Tachyons Color Palette

You will need to import skeletonic-colors.css to display the colors. The background colors are based on the Tachyons - CSS Color palette.

A Palette of Particles.


The Anatomy of Skeletonic CSS - A lightweight, intuitive, accessible and ultra-responsive CSS Framework