Base Rules

Do not edit me; I am auto generated from ./src/scss/_base.scss.

Below are the base values (variables) that are used through the user interface.

Colors

Variable Name	Value
`color-transportation`	`#F37D45`
`color-publicservices`	`#087070`
`color-sales`	`#810853`
`color-manufacturing`	`#044A59`
`color-communication`	`#B2BB2F`
`color-hospitality`	`#B42189`
`color-health`	`#075F89`
`color-fashion`	`#E04F56`
`color-engineering`	`#B88C75`
`color-energy`	`#0F8DAE`
`color-education`	`#DF5898`
`color-business`	`#0E613E`
`color-construction`	`#EB904D`
`color-arts`	`#662E8F`
`color-agriculture`	`#0B8441`
`color-light4`	`#D9F0FA`
`color-light3`	`#f2eaea`
`color-light2`	`#f0f3fd`
`color-light1`	`#fff`
`color-dark4`	`#ccc`
`color-dark3`	`#545454`
`color-dark2`	`#555`
`color-dark5`	`#01021a`
`color-dark1`	`#1c1e4b`
`color-accent7`	`#fb6f1a`
`color-accent6`	`#61dfff`
`color-accent5`	`#f19e00`
`color-accent4`	`#e376f9`
`color-accent3`	`#8f7bfa`
`color-accent2`	`#59d28b`
`color-accent1`	`#fee732`
`color-accent0`	`#ffb600`
`color-background1`	`#002f6d`
`color-interactive2`	`#ff426e`
`color-interactive1`	`#0066ba`

Font Sizes

Default values for all text appearing within modules.

Variable Name	Value
`font-size-small1`	12px
`font-size`	16px
`font-size-large1`	24px
`font-size-large2`	32px
`font-size-large3`	48px
`font-size-large4`	88px

Font Families

The font-stack determines a preferred set of fonts to display to the user.

Variable Name	Value
`font-family-sans`	Source Sans Pro, sans-serif
`font-family-serif`	Source Serif Pro, Times New Roman, Times, serif
`font-family`	Source Sans Pro, sans-serif

Line Heights

Used alongside font sizes within modules.

Variable Name	Value
`line-height-small1`	16px
`line-height`	24px
`line-height-large1`	32px
`line-height-large2`	48px
`line-height-large3`	80px

Grid Spacing

Defines the default value used for margins, padding, etc.

Variable Name	Value
`gridspacing`	8px

Break Points

All modules start for the smallest screen size, then set overrides as needed for each of these breakpoints.

Variable Name	Value
`mobilelarge`	516px
`tablet`	768px
`desktop`	1024px
`hd`	1440px

Animation (Transitions)

Default values for duration and easing of all animations. Visit easings.net to explore different settings.

Variable Name	Value
`transition-easing`	ease-in-out
`transition-duration`	0.25s

Border Radius

Variable Name	Value
`border-radius`	4px