SMART Columbus

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.

Color

smrt-red
#f15032
smrt-green
#95d600
smrt-pink
#ea1d76
smrt-orange
#ffa400
smrt-golden
#ffc627
smrt-blue
#00aeef
smrt-blue-light
#6cc5e9
black
#000000
grey-darkest
#222222
grey-darker
#606f7b
grey-dark
#8795a1
grey
#d8d8d8
grey-light
#efefef
grey-lighter
#f1f5f8
grey-lightest
#f8fafc

Typography

Headling Level 1 (Reserved: Do not use in CMS)

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

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.

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.

Grouped Headlines

Grouped Subheadline

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.

  1. List item 1
  2. List item 2
  3. List item 3

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.

It won’t work without you.

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>