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
Secondar/Success 400
#3acf5d
Tertiary/Warning 400
#ffc957
Accent/Danger 400
#ff5957
Alternate/Info 400
#a474ff
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