Colors

Hatch makes it easy to change update the colors throughout your site using global swatches.

To update the colors, select a color below and edit the global swatch under the background color section in the right sidebar.

To update the colors, select a color below and edit the global swatch under the background color section in the right sidebar.

Accent colors
Primary
Secondary
Success
Warning
Danger
Info
Grey Scale
Grey / 100
Grey / 200
Grey / 300
Grey / 400
Grey / 500
Grey / 600
Grey / 700
Red Scale
Red / 100
Red / 200
Red / 300
Red / 400
Red / 500
Pink Scale
Pink / 100
Pink / 200
Pink / 300
Pink / 400
Pink / 500
Yellow Scale
Yellow / 100
Yellow / 200
Yellow / 300
Yellow / 400
Yellow / 500
Green Scale
Green / 100
Green / 200
Green / 300
Green / 400
Green / 500
Blue Scale
Blue / 100
Blue / 200
Blue / 300
Blue / 400
Blue / 500
Gradients
Blue Horizontal
Red Horizontal
Blue Vertical
.....
Background Colors
Grey
White
Black
Text Colors
Primary
Secondary
Tertiary
Quaternary

Typography

H1 - 86 Semibold

H1

H2 - 64 Semibold

H2

H3 - 48 Semibold

H3

H4 - 32 Semibold

H4
H5 - 24 Semibold
H5
H6 - 20 bold
H6
H7 - 18 Extrabold
H7 EXTRABOLD
H7 - 18 bold
H7 bold
H7 - 18 Regular
H7 regular
H8 - 16 Extrabold
H8 EXTRABOLD
H8 - 16 bold
H8 bold
H8 - 16 Regular
H8 regular

Body - 14 Extrabold

Body extrabold

Body - 14 bold

body bold

Body - 14 Regular

body bold

Paragraph - 16 Regular

Paragraphs - this is the size for all <p></p> tags

Elements

Icons

Interactive Icons

default state
Clicked state

Numbered Icons

1
2
3
4
5

Social Media Icons