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.

This guide uses the following 3rd party frameworks

Usage

Start by adding the following files to your page:

<link rel="stylesheet" href="https://styleguide-dev.nocti.org/css/nocti.min.css">
<script src="https://styleguide-dev.nocti.org/js/all.min.js"></script>

Color

Primary
#3E5265
Secondary
#95C5DF
Green
#65B345
Orange
#F7941D
Light
#E5E5E5
Dark
#58595B

Typography


Heading Level 1

Font Helvetica Neue Reg / 28pt/37px / #3E5265

Heading Level 2

Font Helvetica Neue Bold / 28pt/37px / #3E5265

Heading Level 3

Font Helvetica Neue Bold / 21pt/28px / #58595B

FONT STACK:
Helvetica Neue
Helvetica
Verdana
Ariel
This is Body copy

Font Helvetica Neue Reg / 16pt/22px / Black

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is a Text link

Font Helvetica Neue Bold / 16pt/22px / #375C89