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

Primary

$colour-big-stone
rgb(20, 43, 68)
$colour-chambray
rgb(29, 80, 141)
$colour-lochmara
rgb(40, 138, 214)
$colour-caribbean-green
rgb(22, 201, 141)
$colour-paris-daisy
rgb(254, 239, 109)
$colour-saffron
rgb(255, 200, 63)
$colour-carnation
rgb(250, 94, 91)
$colour-mulberry
rgb(191, 83, 141)

Secondary

$colour-trendy-pink
rgb(104, 78, 121)
$colour-brink-pink
rgb(255, 112, 142)
$colour-keppel
rgb(71, 168, 153)
$colour-malibu
rgb(138, 190, 229)
$colour-caper
rgb(199, 230, 170)
$colour-chino
rgb(207, 203, 175)
$colour-buccaneer
rgb(88, 44, 43)
$colour-falu-red
rgb(132, 30, 27)

Neutral

$colour-black
rgb(0, 0, 0)
$colour-grey-dark
rgb(41, 43, 44)
$colour-grey
rgb(70, 74, 76)
$colour-grey-light
rgb(99, 108, 114)
$colour-grey-lighter
rgb(236, 238, 239)
$colour-grey-lightest
rgb(247, 247, 249)
$colour-white
rgb(255, 255, 255)

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

Lists

Unordered List

Ordered List

  1. List Item 0
  2. List Item 1
  3. List Item 2
  4. List Item 3
  5. List Item 4

Definition List

Term 0
Definition 0
Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3
Term 4
Definition 4