Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color,  and add it as a global swatch.

Style Guidestyle guide is a centralized document that outlines the design elements and specifications used throughout a website or project. It serves as a reference for maintaining visual consistency by detailing the fonts, colors, spacing, and other styling choices. The style guide helps ensure that different team members or collaborators follow the same design standards, resulting in a cohesive and professional-looking website. It simplifies the design process by providing a single source of truth for design decisions, making it easier to manage and update styles across multiple pages.

Color styles

Bottom Card Stroke - #C0C1B2

Top Card Stroke - #C0C1B2

Primary/Main/400 - #AC98E4

Primary/Main/Button - #7144DA

Primary/Main/450 - #451CA1

Primary/Main/200 - #CFC1F2

Primary/Main/150 - #DFD5F6

Primary/Primary-2/800 - #2C273D

Primary/Primary-2/700 - #443B5C

Primary/Primary-2/600 - #5C4D80

Primary/Primary-2/500 - #968CB6

Primary/Primary-2/250 - #B9B3CC

Primary/Primary-3/900 - #1A1523

Primary/Primary-3/850 - #262035

Primary/Primary-3/750 - #342B48

Primary/Primary-3/550 - #796CA1

Primary/Primary-3/300 - #A49BBE

Secondary/Main/550 - #6D773C

Secondary/Main/500 - #AAB376

Secondary/Main/300 - #CBD3A7

Secondary/Main/250 - #E0E3CB

Secondary/Main/200 - #EAECDD

Secondary/Secondary-2/800 - #48483B

Secondary/Secondary-2/700 - #6B6E5B

Secondary/Secondary-2/650 - #8C9374

Secondary/Secondary-2/450 - #BBBEAC

Secondary/Secondary-2/350 - #D2D3C8

Secondary/Secondary-3/900 - #2C2D26

Secondary/Secondary-3/850 - #424437

Secondary/Secondary-3/750 - #585C49

Secondary/Secondary-3/600 - #9DA28C

Secondary/Secondary-3/400 - #C0C1B2

Accent/Accent-2/750 - #674E26

Accent/Accent-2/700 - #9A7539

Accent/Accent-2/600 - #D8C19C

Accent/Accent-2/500 - #E6D5BC

Accent/Main/900 - #2B1D10

Accent/Main/800 - #6C4322

Accent/Main/650 - #D88642

Accent/Main/550 - #E9BC84

Accent/Main/450 - #F3DEC2

Accent/Main/400 - #F2E9DF

Warning/Success - #76A11C

Warning/Error - #A11C1C

Neutral/150 - #FBF6EE

Neutral/200 - #F5F6ED

Neutral/250 - #E7E8E2

Neutral/300 - #DFDFD8

Neutral/350 - #EFEAFA

Neutral/400 - #DDD8E7

Neutral/450 - #D2CDDF

Background/Page - #FDFAF9

Background/Top Nav - #FAF6F4

Icon/URL Controls/Disabled/Light - #BABCBE

Text styles

Desktop (basepoint 1279px)
H1

Montserrat Light 36px

H2

Montserrat SemiBold 24px

H3

Montserrat 20px

Body

Montserrat Normal 16px/undefinedpx

Caption

Montserrat SemiBold 14px/undefinedpx

CAPTION

Montserrat Regular 12px/undefinedpx

Caption

Montserrat Regular 12px

Body Card

Montserrat Normal 14px/undefinedpx

Button text primary

Montserrat Semibold 16px

Button text Secondary

Montserrat Bold 14px

Buttons
VIEW ALL
Button
JOIN REGISTRY
Button
BUtton
Button
Cards
Supporting text
VIEW ALL
Title
Info
View details
Brown building that says Foothills professional building
Title
Info
View details
Title
Info
View details
TAG
Title

Info

Button
Title

Text
Text
Title

Text
Text
Title

Text
Text
Title
text
Button
Title
text
Button
Cards - CMS
VIEW ALL
Information text place holder
TAG
Title
This is some text inside of a div block.
TAG
Title
This is some text inside of a div block.
TAG
Title
This is some text inside of a div block.
EXPLORE MORE PROJECTS
A description about what kind
TAG
Title
This is some text inside of a div block.
TAG
Title
This is some text inside of a div block.
EXPLORE MORE
Title
Subtitle
Step 1
Title
Step 2
Title
Step 3
Title

Title

subtitle

Title

Tagline

Information

Title

Tagline

Information

Title

Tagline

Information