Sassly Style Guide

Edit globally elements of this template

Color

Purple

Dark Purple

#7C2BB8

Purple

#AC5FE6

Light Purple

#C58DF0

Lighter Purple

#E0BDFB

Extra Light Purple

#F7EDFE

Blue

Dark Blue

#006FBA

Blue

#0097FE

Light Blue

#66C1FF

Lighter Blue

#A8DBFE

Extra Light Blue

#EBF7FF

Deep Blue

Dark Deep Blue

#14358A

Deep Blue

#1B45B4

Light Deep Blue

#6287E7

Lighter Deep Blue

#C4D2F6

Extra Light Deep Blue

#EDF1FC

Neutral

Black

#03133D

Grey

#354263

Light Grey

#B8BDC9

Lighter Grey

#E4E6EA

White

#FFFFFF

Yellow

Dark Yellow

#D4912C

Yellow

#FFAE00

Light Yellow

#FFCC5E

Lighter Yellow

#FFE7B3

Extra Light Yellow

#FFF7E5

Red

Dark Red

#AF2E1D

Red

#E95C49

Light Red

#F08D80

Lighter Red

#F8CEC8

Extra Light Red

#FDEFED

Green

Dark Green

#009E42

Green

#00C150

Light Green

#40E986

Lighter Green

#9CF5C1

Extra Light Green

#E2FCED

Gradient

Gradient Purple

Gradient Blue

Background

Typography

Heading

H1 / Heading 1

DM Sans - Bold

60 px, 110%, -3%

The quick brown fox jumps

H2 / Heading 2

DM Sans - Bold

48 px, 105%, -3%

The quick brown fox jumps

H3 / Heading 3

DM Sans - Bold

32 px, 110%, -3%

The quick brown fox jumps

H4 / Heading 4

DM Sans - Bold

24 px, 110%, -3%

The quick brown fox jumps

Body

Extra Large

DM Sans - Bold, Medium, Regular

24 px, 110%, -3%

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

Large

DM Sans - Bold, Regular

18 px, 135%, 0%

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

Medium

DM Sans - Bold, Medium, Regular

16 px, 140%, 0%

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

Small

DM Sans - Bold, Medium, Regular

14 px, 140%, 0%

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

Extra Small

DM Sans - Bold, Regular

12 px, Auto, 0%

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form which don't look.

Icon

Button

Primary - Large

Primary - Medium

Primary - Small

Secondary - Large

Secondary - Medium

Secondary - Small