Uncubed

Uncubed

Website Style Guide

Brand Assets

Logos are hosted on an AWS s3 bucket, link to the image url or download the png to use.

Colors

  • $orange

    #EC7D5A

  • $light-orange

    #F7946B

  • $dark-blue

    #3c405d

  • $green

    #2D7E7E

  • $grey

    rgba(47, 47, 48, 0.93)

  • $darkgrey

    rgba(44, 43, 45, 0.98)

  • $light-grey

    #F3F3F4

  • $pattern

    subtlenet2

Typography

Aa - Heading, Gotham Bold 44px

Aa - Subheading, Gotham Medium 25px

Aa - Subheading, Gotham Book 25px

Aa - Regular text, Gotham Light 20px

Aa - Gotham Light 14px. This is the default font size for p tags. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Links are $orange. Omnis voluptate distinctio r eprehenderit, autem deleniti ad. Optio ea aperiam nisi distinctio nemo repellat, voluptate fugiat. Quidem neque illum, blanditiis!

For text highlight effect, add class 'highlighted-text' to span element.

Add class 'darkblue' to change the background color.

Buttons

Forms

Input form & animated label:
Select one, drop down list:


Multi-select, checkboxes:
Checkbox 1
Checkbox 2
Checkbox 2

Flash messages:

.warning .message (use .remove-alert to hide after 4000ms)


.success .message