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
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
List – Red Checklist
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
- Bacon ipsum dolor amet buffalo rump ground round tail, tenderloin pork chop meatloaf.
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
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
| Products | ValueFocus & Collateral Point | SVI Evaluation | Appraisal Desktop with Inspection | Field Appraisals |
|---|---|---|---|---|
| Provides a Market Value | AVM Derived/Interactive AVM Derived | Real Estate Professional Derived | Appraiser Derived | Appraiser Derived |
| Subject property photos included |  | | | |
| Provides comments/market commentary | | | | |
| Provides market forecast graphs and other trends | | | N/A | |
| Includes an Appraiser’s Signature | | | | |
| Cost | $ | $$ | $$$ | $$$$ |