This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts.
This guide contains real working examples, code snippets, documentation, and style guidelines.
Start by adding the following files to your page:
<link rel="stylesheet" href="assets/toolkit/styles/classy.css">Add the following link tag to pull in css font stylesheet from Adobe Typekit.
<link rel="stylesheet" href="https://use.typekit.net/aid8cmg.css">
blue lighter ($theme-blue-lighter)
#7ea9f2
blue light ($theme-blue-light)
#4d64ff
blue ($theme-blue)
#3139f2
blue dark ($theme-blue-dark)
#262cbf
blue darker ($theme-blue-darker)
#1d218c
blue midnight ($theme-blue-midnight)
#18243d
gray lightest ($theme-gray-lightest)
#f0f0f2
gray lighter ($theme-gray-lighter)
#e9e9ec
gray light ($theme-gray-light)
#cfcfd4
gray ($theme-gray)
#a7a8af
gray dark ($theme-gray-dark)
#6f707b
gray darker ($theme-gray-darker)
#50525a
gray darkest ($theme-gray-darkest)
#3f4148
charcoal ($theme-charcoal)
#202020
yellow light ($theme-yellow-light)
#fae193
yellow ($theme-yellow)
#ffce48
yellow dark ($theme-yellow-dark)
#ecb500
green light ($theme-green-light)
#7BD896
green ($theme-green)
#43C86A
green dark ($theme-green-dark)
#2C8245
red light ($theme-red-light)
#fd9a85
red ($theme-red)
#fa6e56
red dark ($theme-red-dark)
#cf4931
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.