About Us Careers Newco Gives Back Foundation Contact Style Guide

Newco/Blox Style Guide

Primary Colors

Newco Navy
#051c2c
newco-navy
Dark Navy
#020b11
dark-navy
Light Navy
#0f293b
light-navy
Blox Black
#000000
black
Light Black
#161616
light-black

Secondary Colors

Newco Blue Accent
#2f6f9f
accent-newco-blue
Blox Blue Accent
#9ff2fa
accent-blox-blue

Neutral Colors

Gray
#5f6b78
gray
Gray Light
#acbac9
gray-light
Gray Lighter
#f2f4f7
gray-lighter
Gray Lightest
#f5f5f5
gray-lightest

Heading Utility Classes

Display XL
.display-xl
Heading 1
.heading-1
Heading 2
.heading-2
Heading 3
.heading-3
Heading 4
.heading-4
Heading 5
.heading-5
Heading 6
.heading-6

Body Text

Text X-Large

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text Large

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text Default

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text Small

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text X-Small

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

Text Tiny

Esse, nostrud magna dolore laboris. Dolore laboris lorem nisi, duis incididunt laborum. Nisi duis incididunt laborum tempor. Incididunt laborum tempor enim, ipsum. Enim, ipsum enim laborum voluptate qui nulla. Laborum voluptate qui nulla. Qui, nulla laboris culpa. Culpa non lorem non.

UI Elements | Newco

Buttons
Primary Primary
Secondary Secondary
Tertiary Tertiary
Slider Timer

Autoplay: On | Duration: 5 seconds

Inputs
Tags
Category

UI Elements | Blox

Buttons
Primary Primary
Secondary Secondary
Tertiary Tertiary
Slider Timer

Autoplay: Off | Duration: 8 seconds

Inputs
Tags
Category

Radius

Large
.rounded-newco-lg
.rounded-newco-lg
Medium
.rounded-newco-md
.rounded-newco-md
.rounded-newco-md
Small
.rounded-newco-sm
.rounded-newco-sm
.rounded-newco-sm
.rounded-newco-sm
.rounded-newco-sm
.rounded-newco-sm
X-Small
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs
.rounded-newco-xs