Overview

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.

Usage

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">

Color

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

Typography

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.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6