Search
Close this search box.

Brand Guide Template

Brand Colors: Start 4 and add as needed (also can rename in the Global Font settings)

Royal

#125CF0

Sea

#08ABA1

Punch

#FF6363

Orange

#FFA347

Liliac

#EBBAFF

Royal 2

#A1BFFA

Sea 2

#9CDED9

Punch 2

#FFC2C2

Orange 2

#FFD9B5

Liliac 2

#F7E3FF

Ivory

#FAFAF5

Black

#211C1F

Royal 3

#EDF2FF

Sea 3

#EBF7F7

Orange 3

#FFF7F0

Brand Font Styles: Based on the Perfect Fourth scale using Poppins Font

Extra Large Title

Large Title

Medium Title

Small Title

Large Body Text

Body Text

Buttons and Menus

Small Body

Subheaders

Design System Guide: Use this as a starter

Border Radius - 12px

Box Shadow - 0px, 10px, 40px, -4px - .1 opacity

Guide for card spacing

Card Spacing (gutters/gaps) 20px desktop/horizontal 40px mobile/vertical Card Inner spacing: 60px top and bottoms

Card Global Style

Card Spacing (gutters) 20px desktop/horizontal - Gutters 40px mobile/vertical - Gutters Card Inner spacing: 60px top and bottom 20px on the sides

Card Global Style

Card Spacing (gutters) 20px desktop/horizontal - Gutters 40px mobile/vertical - Gutters Card Inner spacing: 60px top and bottom 20px on the sides

Card Global Style

Card Spacing (gutters) 20px desktop/horizontal - Gutters 40px mobile/vertical - Gutters Card Inner spacing: 60px top and bottom 20px on the sides

Large Container Guide

Large Space: 100px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section

Medium Container Guide

Large Space: 80px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section

Small Container Guide

Large Space: 60px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section

Large Narrow Container Guide

Large Space: 100px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section

Medium Narrow Container Guide

Large Space: 80px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section

Small Narrow Container Guide

Large Space: 60px top and bottom; 20px on the sides

Container Width: 1280px for full sections 846 px for the narrow section