Design System:

Style Guide

Primary Spacing

Standard (Default) Width: 1033px

Standard (Wide) Width: 1170px

Full Width: Full Browser Width 100%


Vertical Spacing (Padding & Margins)

X-Small

Small

Medium

Large

X-Large

XX-Large


Colors

Stewart Red

#9E2333

Black

#000000

Grey

#42474B

Cyan

#96e0ff

Teal

#006781

Mint Green

#48cfa0

Purple

#53469C

Grey 100

#43464a

Grey 90

#757982

Grey 80

#A8a8AC

Grey 70

#DAD6D6

Grey 60

#F2f2f2


Fonts

Gotham font family

Faces: Regular, Medium, Semi Bold, Bold, Extra Bold

This is paragraph text lorem ipsum amet buffalo rump – Regular

This is paragraph text lorem ipsum amet buffalo rump – Medium

This is paragraph text lorem ipsum amet buffalo rump – Semi Bold

This is paragraph text lorem ipsum amet buffalo rump – Bold

This is paragraph text lorem ipsum amet buffalo rump – Extra Bold


Typography

Display – Short headline

H1 – Short display headline

H2 – Short display headline

H3 – Short display headline

H4 – Short display headline

H5 – Short display headline
H6 – Short display headline

Eyebrow Text – Short display headline


Paragraph

Hello babies. Welcome to Earth. It’s hot in the summer and cold in the winter. It’s round and wet and crowded. On the outside, babies, you’ve got a hundred years here. There’s only one rule that I know of, babies—God damn it, you’ve got to be kind.


Paragraph Small

Hello babies. Welcome to Earth. It’s hot in the summer and cold in the winter. It’s round and wet and crowded. On the outside, babies, you’ve got a hundred years here. There’s only one rule that I know of, babies—God damn it, you’ve got to be kind.


List – Bullets


List – Red Checklist


Blockquote

The investment in Redzone this year was one of the easiest and best decisions we have ever made for our business.”


Buttons

– Main color
active state

Blue CTA

– Hover
Alternate states

CTA container color changes

White Button

CTA container color changes Text changes to white

Small Blue

Small White

Outlined Button

Outlined Button

CTA container color changes Text changes to white

Small Outlined

– Main color

Active states

– Alternate

Hovers, alternate states

Text link in paragraph text

Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf. Landjaeger cupim drumstick ham hock.

Colored #0075AA

Outlined Button

Outlined button


Small Outlined

CTA container color changes Text changes to white


Forms

Form

Checkboxes
Radio Buttons
Consent
Consent

Images

Audit your image treatments, give them names, and give it specs. These styles will be applied via a class so your options are vast, just try to keep the number of image style options below 5.

NOTE: Dropshadows should be on by default, but be able to be turned off

Square

Horizontal

Parallelogram


Dividers

Light: #EFEFEF


Dark: #42474B



Videos


Play button in bottom left
Optional video title Gradient overlay at bottom:
(linear-gradient(187deg, rgba(0,0,0,0.00) 79%, rgba(41,41,41,0.77) 100%);
Shadow: box-shadow: 0 23px 28px -18px rgba(0,0,0,0.25);


Groups – Container Styles

A wrapper that has a unique design style, think layer styles in Sketch. This can have custom inner padding, background color/image, design accents, box shadows, etc.

Large Padding

Large

Padding




<— Inner Padding
36px

Inner Padding —>
24px.

Small Padding

Large

Padding

With Shadow

Group

Shadow

With Shadow – Hover

Group

Shadow

Tables

ProductsValueFocus & Collateral PointSVI EvaluationAppraisal Desktop with InspectionField Appraisals
Provides a Market ValueAVM Derived/Interactive AVM DerivedReal Estate Professional DerivedAppraiser DerivedAppraiser Derived
Subject property photos included
Provides comments/market commentary
Provides market forecast graphs and other trendsN/A
Includes an Appraiser’s Signature
Cost$$$$$$$$$$