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/toolkit.css">
<script src="assets/toolkit/scripts/toolkit.js"></script>

Color

Base/Neutral 600
#242326
Primary/Link 400
#38bdff
Secondar/Success 400
#3acf5d
Tertiary/Warning 400
#ffc957
Accent/Danger 400
#ff5957
Alternate/Info 400
#a474ff
Base/Neutral 100
#e6edf0
Base/Neutral 200
#d0d6d9
Base/Neutral 300
#a4aeb3
Base/Neutral 400
#747a80
Base/Neutral 500
#555259
Base/Neutral 600
#242326
Base/Neutral 700
#0c0c0d
Primary/Link 100
#d1f0ff
Primary/Link 200
#9edfff
Primary/Link 300
#6bceff
Primary/Link 400
#38bdff
Primary/Link 500
#2e9bd1
Primary/Link 600
#2b617c
Primary/Link 700
#112630
Secondary/Success 100
#d7f5de
Secondary/Success 200
#b5e8c1
Secondary/Success 300
#82e098
Secondary/Success 400
#3acf5d
Secondary/Success 500
#2a9c44
Secondary/Success 600
#2c683b
Secondary/Success 700
#17361e
Tertiary/Warning 100
#fff6e3
Tertiary/Warning 200
#ffe9bd
Tertiary/Warning 300
#ffd98a
Tertiary/Warning 400
#ffc957
Tertiary/Warning 500
#cca045
Tertiary/Warning 600
#7b6539
Tertiary/Warning 700
#2e2615
Accent/Danger 100
#ffdcdb
Accent/Danger 200
#ffb3b3
Accent/Danger 300
#ff8180
Accent/Danger 400
#ff5957
Accent/Danger 500
#cc4745
Accent/Danger 600
#7b3939
Accent/Danger 700
#2e1515
Alternate/Info 100
#eee6ff
Alternate/Info 200
#d8c4ff
Alternate/Info 300
#bf9eff
Alternate/Info 400
#a474ff
Alternate/Info 500
#835dcc
Alternate/Info 600
#56437c
Alternate/Info 700
#221a30

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