Brand Colors

The primary and secondary color palettes for the control panel simplification project are:

Navigation Palette

Navigation background

Navigation secondary items

Navigation selected item

Navigation hover item

Primary Palette

Page background

Primary color

Content background

Content panel background

Primary Button Palette

Primary Button

Hover Button

Click Button

Secondary Button Palette

Secondary Button

Hover Button

Click Button

Text and Grey Palette

Heading text color

Main text color

Medium grey

Light grey

Very light grey

Notification Palette

Attention

Critical

Heading

Font stack: 'Lato', 'Helvetica Neue', san-serif

Heading: #3575D3 (except H7)

H1 - 1.6em, margin: 1.2em 0 .8em

H2 - 1.4em, margin: 1em 0 .6em

H3 - 1.2em, margin: .8em 0 .4em

H4 - 1.1em, margin: .6em 0 .2em

H5 - 1em, margin: .5em 0 0

H6 - .95em, margin: .4em 0 0

H7 - .95em

Text

Normal text: .95em, #363636, 400 font weight, line-height: 1.4

.notice: #3575D3 - Lorem ipsum dolor sit amet

.error: #C82020 - Lorem ipsum dolor sit amet

Misc

.border_color text (top and bottom have width set)

Anchors

Normal anchor

.a class

.btn_anchor .btn_primary anchor

Button Styles

.btn_primary .btn_primary.inverse

.btn_secondary .btn_secondary.inverse

.btn_inactive or disabled

#17B212, 400 font weight, 38px height

#3575D3

#888888

.boxed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

box-shadow - 1px 1px 2px 0 rgba(138, 138, 138, 0.5)

box section title

.boxed with title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.brand-form

attention section title

.boxed.attention with title hex value: #F3D92C

critical section title

.boxed.critical with title hex value: #EBEB42

shaded section title

.boxed.shaded with title hex value: #3575D3

.accent