@insurity/unity NPM

Unity Design System

Foundational styles, fonts, icons, etc. for Insurity's design system, Unity.

Usage

Styles

There is only one style file to load, either css/styles.css or css/styles.scss depending on which flavor you need / prefer.
This file contains a normalizer, token css/scss variables, typography, and general styles.

import "[path]/css/styles.(s)css";

<link rel="stylesheet" href="[path]/css/styles.(s)css">

Icons

Unity uses a custom set of icons designed specifically for Insurity's suite of insurance applications. There are three things to load:

1) The style.css file

import "[path]/unity-icons/style.css";

<link rel="stylesheet" href="[path]/unity-icons/style.css">

2) The svgxuse.min.js file

import "[path]/unity-icons/svgxuse.min.js";

<script href="[path]/unity-icons/svgxuse.min.js"></script>

3) The contents of the symbol-defs.svg file need to be the first thing inside the <body> element.

Fonts

Unity uses two fonts, Proxima Nova (licensed) and Source Sans Pro (open-source).
The fonts are loaded in [path]/css/_typography.scss which compiles into the [path]/css/styles.(s)css file.