Style Guide

This style guide is your project’s foundation, it gives you the basics already set up so you don’t have to start from scratch. All your core element types like colors and typography are pre-defined and neatly organized in the assets tab as well as visually on the page, making it easy to adjust and expand as you go. This way, you can jump straight into building while ensuring consistency, efficiency, and a polished look across your project.

Color

Neutral

White

Hex

#

FFFFFF

White

Hex

#

FFFFFF

White

Hex

#

FFFFFF

Light Grey

Hex

#

EBEBEB

Light Grey

Hex

#

EBEBEB

Light Grey

Hex

#

EBEBEB

Grey

Hex

#

CCCCCC

Grey

Hex

#

CCCCCC

Grey

Hex

#

CCCCCC

Dark Grey

Hex

#

333333

Dark Grey

Hex

#

333333

Dark Grey

Hex

#

333333

Black

Hex

#

000000

Black

Hex

#

000000

Black

Hex

#

000000

Primary

Primary Red

Hex

#

FF0000

Primary Red

Hex

#

FF0000

Primary Red

Hex

#

FF0000

Semantic

Success Green

Hex

#

22C55E

Success Green

Hex

#

22C55E

Success Green

Hex

#

22C55E

Success Dark Green

Hex

#

15803D

Success Dark Green

Hex

#

15803D

Success Dark Green

Hex

#

15803D

Warning Amber

Hex

#

F59E0B

Warning Amber

Hex

#

F59E0B

Warning Amber

Hex

#

F59E0B

Warning Dark Amber

Hex

#

B45309

Warning Dark Amber

Hex

#

B45309

Warning Dark Amber

Hex

#

B45309

Danger Red

Hex

#

EF4444

Danger Red

Hex

#

EF4444

Danger Red

Hex

#

EF4444

Danger Dark Red

Hex

#

991B1B

Danger Dark Red

Hex

#

991B1B

Danger Dark Red

Hex

#

991B1B

Typography

Heading

H1

H1

H1

H2

H2

H2

H3

H3

H3

H4

H4

H4

H5
H5
H5
H6
H6
H6

Paragraph

Text Size Large

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Large

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Large

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Regular

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Regular

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Regular

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Tiny

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Tiny

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Text Size Tiny

Extra Bold

Bold

Semi Bold

Medium

Regular

Light

Create a free website with Framer, the website builder loved by startups, designers and agencies.