Style Guide

Overview

Introduction

Welcome to the Crunchwork website style and brand guidelines.

Everything you need to know about the Crunchwork brand and its usage can be found below, including downloadable logo and font files.

Go ahead and explore or get in touch with the team if you have any questions.

Last updated 8th December 2020.

Expedite design process

By abstracting our base styles layer, now developers can churn out UIs with minimal design input.

Cohesive design language

Refine our visual language to be simpler, more fun and more communicative.

Brand Colours

Green / 100
#00F0AA
Green / 200
#00C8A0
Green / 300
#009678
Dark Blue / 200
#000032
Orange / 200
#FFAA1E
Pink / 200
#FF3296
Yellow / 200
#FFE81E
Gradient (Buttons)
Pink - Orange
Gradient
Orange - Yellow
Gradient
Green 200-100
Gradient (On Imagery)
Dark Blue (80%)

System Colour

UI / 900
#1A1A1A
UI / 800
#333333
UI / 700
#494949
UI / 600
#787878
UI / 500
#A5A5A5
UI / 400
#C2C2C2
UI / 300
#DADADA
UI / 200
#E9E9E9
UI / 100
#F3F3F3
UI / 50
#F9F9F9
UI / 25
#FFFFFF

Typography

H1 - Heading / Blinker / 58px
The quick brown fox jumps over the lazy dog.
H2 - Heading / Blinker / 48px
The quick brown fox jumps over the lazy dog.
H3 - Heading / blinker / 38px
The quick brown fox jumps over the lazy dog.
H4 - Heading / Blinker / 28px
The quick brown fox jumps over the lazy dog.
H5 - Heading / Blinker / 23px
The quick brown fox jumps over the lazy dog.
H6 - Heading / Blinker / 14px
The quick brown fox jumps over the lazy dog.
Body - XS / Nunito Sans / 11px
The quick brown fox jumps over the lazy dog.
Body - S / Nunito Sans / 13px
The quick brown fox jumps over the lazy dog.
Body - Base / Nunito Sans / 16px
The quick brown fox jumps over the lazy dog.
Body - M / Nunito SAns / 18px
The quick brown fox jumps over the lazy dog.
Body - L / Nunito Sans / 20px
The quick brown fox jumps over the lazy dog.
Body - XL / Nunito Sans / 22px
The quick brown fox jumps over the lazy dog.
Quote - Nunito Sans / 30px
The quick brown fox jumps over the lazy dog.

UI Components

Button styles

50px
Primary
40px
Primary
50px
Secondary
40px
Secondary
20px
Text Button

Inputs

©Crunchwork Style Guide 2020. All Rights Reserved.