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.
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.
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.
