Skip To Main ContentAccessibility Help & Feedback
McCall Homes
Contact Us
Contact Us

Style Guide

Typography

Sans Serif

Value:
proxima-nova, sans-serif
Variable:
${typography.SansSerif}
Helper Class:
className="text-sans-serif"

Serif

Value:
objektiv-mk1, sans-serif
Variable:
${typography.Serif}
Helper Class:
className="text-serif"

Condensed

Value:
proxima-nova-condensed, sans-serif
Variable:
${typography.Condensed}
Helper Class:
className="text-condensed"

Display

Value:
Hollanda, sans-serif
Variable:
${typography.Display}
Helper Class:
className="text-display"

Font Weight

Headers
Proxima Nova
BOLD
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Hollanda
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Body
Proxima Nova
Bold
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Regular
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Light
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Thin
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Headers

Header H1
Family Font: Proxima NovaFont Weight: BoldFont Size: 56Line Height: 76 (135%)

Header H1

Header H2
Family Font: Proxima NovaFont Weight: BoldFont Size: 48Line Height: 60 (125%)

Header H2

Header H3
Family Font: Proxima NovaFont Weight: BoldFont Size: 40Line Height: 56 (140%)

Header H3

Header H4
Family Font: Proxima NovaFont Weight: BoldFont Size: 36Line Height: 52 (144%)

Header H4

Header H5
Family Font: Proxima NovaFont Weight: BoldFont Size: 32Line Height: 48 (150%)
Header H5
Header H6
Family Font: Proxima NovaFont Weight: BoldFont Size: 24Line Height: 36 (150%)
Header H6
Header H1 v2
Family Font: HollandaFont Size: 56Line Height: 92px (164%)

Header H1 v2

Header H2 v2
Family Font: HollandaFont Size: 48Line Height: 72 (150%)Letter Spacing: 0.96px (2%)

Header H2 v2

Header H3 v2
Family Font: HollandaFont Size: 40Line Height: 60 (150%)Letter Spacing: 0.8px (2%)

Header H3 v2

Header H4 v2
Family Font: HollandaFont Size: 36Line Height: 56 (155%)Letter Spacing: 0.72px (2%)

Header H4 v2

Header H5 v2
Family Font: HollandaFont Size: 32Line Height: 52 (162%)Letter Spacing: 0.64px (2%)
Header H5 v2
Header H6 v2
Family Font: HollandaFont Size: 24Line Height: 40 (166%)Letter Spacing: 0.48px (2%)
Header H6 v2

Body

Body L
Font Family: Proxima NovaFont Weight: LightFont Size: 20pxLine Height: 28px (140%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Body M
Font Family: Proxima NovaFont Weight: Bold | Regular | Light | ThinFont Size: 18pxLine Height: 28px (140%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Body S
Font Family: Proxima NovaFont Weight: Bold | Regular | Light | ThinFont Size: 16pxLine Height: 24px (150%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Body XS
Font Family: Proxima NovaFont Weight: LightFont Size: 14pxLine Height: 20px (142%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique orci est, et vehicula erat ultricies ut.

Buttons

Standard Button

className="btn"

Button Brand 1

className="btn btn-brand1"

Button Brand 2

className="btn btn-brand2"

Button Brand 3

className="btn btn-brand3"

Button Brand 4

className="btn btn-brand4"

Button Hollow

className="btn btn-hollow"

Hollow White

className="btn btn-hollow-white"

Hollow Brand 1

className="btn btn-hollow-brand1"

Hollow Brand 2

className="btn btn-hollow-brand2"

Hollow Brand 3

className="btn btn-hollow-brand3"

Hollow Brand 4

className="btn btn-hollow-brand4"

Button Icons
Arrow White

className="btn btn-arrow-white"

Arrow Black

className="btn btn-hollow btn-arrow-black"

Phone White

className="btn btn-phone-white"

Phone Black

className="btn btn-hollow btn-phone-black"

Chat White

className="btn btn-chat-white"

Chat Black

className="btn btn-hollow btn-chat-black"

Text For Buttons
Button S
Font Family: Proxima Nova
Font Weight: Light
Font Size: 16px
Line Height: 24px

Button S

Button M
Font Family: Proxima Nova
Font Weight: Light
Font Size: 18px
Line Height: 28px

Button M

Button Sizing
Medium
Small
Primary
Secondary
Hover
Font Size: 18
Font Height: 28
Vertical Padding: 8px
Horizontal Padding: 20px
Font Size: 16
Font Height: 24
Vertical Padding: 8px
Horizontal Padding: 20px

Styles

Stroke
Stroke M
1px
Stroke L
2px
Drop Shadow
Drop Shadow 1
Blur: 32
X: 0
Y: 0
Color: #000000 10%
Drop Shadow 2
Blur: 64
X: 0
Y: 0
Color: #000000 10%
Background Blur
Background Blur 1
Blur: 38px

Iconography

Style
icon-apple
icon-apple.png
icon-award
icon-award.png
icon-bathroom
icon-bathroom.png
icon-bed
icon-bed.png
icon-blueprint
icon-blueprint.png
icon-bricks
icon-bricks.png
icon-calculator
icon-calculator.png
icon-calendar
icon-calendar.png
icon-car
icon-car.png
icon-city
icon-city.png
icon-clock
icon-clock.png
icon-coffee
icon-coffee.png
icon-coins
icon-coins.png
icon-contract
icon-contract.png
icon-dollar
icon-dollar.png
icon-email
icon-email.png
icon-football
icon-football.png
icon-garage
icon-garage.png
icon-gears
icon-gears.png
icon-graduation
icon-graduation.png
icon-graph
icon-graph.png
icon-halfbath
icon-halfbath.png
icon-hand-heart
icon-hand-heart.png
icon-hand-house
icon-hand-house.png
icon-handshake
icon-handshake.png
icon-handshake-house
icon-handshake-house.png
icon-home
icon-home.png
icon-lightbulb
icon-lightbulb.png
icon-man
icon-man.png
icon-map
icon-map.png
icon-measurement
icon-measurement.png
icon-mobile
icon-mobile.png
icon-network
icon-network.png
icon-notebook
icon-notebook.png
icon-paint
icon-paint.png
icon-paper
icon-paper.png
icon-pen
icon-pen.png
icon-phone
icon-phone.png
icon-ribbon
icon-ribbon.png
icon-scale
icon-scale.png
icon-stories-one
icon-stories-one.png
icon-stories-three
icon-stories-three.png
icon-stories-two
icon-stories-two.png
icon-text
icon-text.png
icon-tree
icon-tree.png
Scale
icon-mobile-xs
XS 20px x 20px
icon-mobile-s
S 24px x 24px
icon-mobile-m
M 44px x 44px
icon-mobile-l
L 60px x 60px
icon-mobile-xl
XL 70px x 70px

Spacing

Base Unit: 8px
Minimum Unit: 4px
Max Unit: 140px
Spacing 01: 4px
Spacing 02: 8px
Spacing 03: 12px
Spacing 04: 16px
Spacing 05: 20px
Spacing 06: 24px
Spacing 07: 28px
Spacing 08: 32px
Spacing 09: 40px
Spacing 10: 48px
Spacing 11: 56px
Spacing 12: 64px
Spacing 13: 92px
Spacing 14: 112px
Spacing 15: 120px
Spacing 16: 128px
Spacing 17: 140px
Spacing Design Notes
Desktop
Gutter Should Always be 20px
Container Size 1256px
Top & Bottom padding on each section should be 112px
For smaller Sections, top & bottom padding should be 52px
Spacing between Body and Buttons should be 28px
**For spacing between elements we can use the graph above.
Very important to only use even numbers. NO ODD NUMBERS
Mobile
Gutter Should Always be 16px
Top & Bottom padding on each section should be 64px
For smaller Sections, top & bottom padding should be 44px
Spacing between Body and Buttons should be 24px
**For spacing between elements we can use the graph above.
Very important to only use even numbers. NO ODD NUMBERS

Brand Colors

brand 1#e6e1d1  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.brand1}
${colors.brand1Dark}
${colors.brand1Darker}
${colors.brand1Darkest}
${colors.brand1Light}
${colors.brand1Lighter}
${colors.brand1Lightest}

brand 2#4c4c4c  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.brand2}
${colors.brand2Dark}
${colors.brand2Darker}
${colors.brand2Darkest}
${colors.brand2Light}
${colors.brand2Lighter}
${colors.brand2Lightest}

brand 3#000000  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.brand3}
${colors.brand3Dark}
${colors.brand3Darker}
${colors.brand3Darkest}
${colors.brand3Light}
${colors.brand3Lighter}
${colors.brand3Lightest}

brand 4#FFFFFF  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.brand4}
${colors.brand4Dark}
${colors.brand4Darker}
${colors.brand4Darkest}
${colors.brand4Light}
${colors.brand4Lighter}
${colors.brand4Lightest}

black#000000  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.black}
${colors.blackDark}
${colors.blackDarker}
${colors.blackDarkest}
${colors.blackLight}
${colors.blackLighter}
${colors.blackLightest}

neutral#EEEEEE  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.neutral}
${colors.neutralDark}
${colors.neutralDarker}
${colors.neutralDarkest}
${colors.neutralLight}
${colors.neutralLighter}
${colors.neutralLightest}

white#FFFFFF  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.white}
${colors.whiteDark}
${colors.whiteDarker}
${colors.whiteDarkest}
${colors.whiteLight}
${colors.whiteLighter}
${colors.whiteLightest}

body#2B2B2B  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.body}
${colors.bodyDark}
${colors.bodyDarker}
${colors.bodyDarkest}
${colors.bodyLight}
${colors.bodyLighter}
${colors.bodyLightest}

errorred  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.error}
${colors.errorDark}
${colors.errorDarker}
${colors.errorDarkest}
${colors.errorLight}
${colors.errorLighter}
${colors.errorLightest}

underdog#e6e1d1  SL
SL
SL
SL
SL
SL
SL

Variables:
${colors.underdog}
${colors.underdogDark}
${colors.underdogDarker}
${colors.underdogDarkest}
${colors.underdogLight}
${colors.underdogLighter}
${colors.underdogLightest}

Color Palette

Gray
Light
#f7f7f7
rgb(247, 247, 247)
Light :hover
#f2f2f2
rgb(242, 242, 242)
Light :active
#e5e5e5
rgb(229, 229, 229)
Normal
#aaaaaa
rgb(170, 170, 170)
Normal :hover
#999999
rgb(153, 153, 153)
Normal :active
#888888
rgb(136, 136, 136)
Dark
#808080
rgb(128, 128, 128)
Dark :hover
#666666
rgb(102, 102, 102)
Dark :active
#4c4c4c
rgb(76, 76, 76)
Darker
#3b3b3b
rgb(59, 59, 59)
Beige
Light
#fcfcfa
rgb(253, 252, 250)
Light :hover
#fbfbf8
rgb(251, 251, 248)
Light :active
#f7f6f1
rgb(247, 246, 241)
Normal
#e6d1d1
rgb(230, 225, 209)
Normal :hover
#d4d0c1
rgb(207, 203, 188)
Normal :active
#b8b4a7
rgb(184, 180, 167)
Dark
#ada99d
rgb(173, 169, 157)
Dark :hover
#8a877d
rgb(138, 135, 125)
Dark :active
#67655e
rgb(103, 101, 94)
Darker
#514f49
rgb(81, 79, 73)
Baseline Colors
Color 1
E7D2D4
Color 2
000000
Color 3
4C4C4C
For Text
Color 4
FFFFFF
Opacities
Opacity 01
000000
50%
Opacity 02
000000
20%
Gradient
Gradient 1
Linear
000000 0%
000000 100%
80%

AccessibilityForm

AreasSection

BlogDetail

BlogInsideHeader

BlogList

BlogpostsBanner

BulletPointContent

ButtonSet

ButtonSetBanner

CTABanner

CTABannerDesc

CareerForm

ContactBanner

ContactBannerAlt

ContactForm

ContactFormImage

ContactFormShort

ContactInfo

ContentCarousel

DesignPostsBanner

DualContentCards

EmbedSection

FaqList

FeaturedProducts

GetStarted

HomeContent

HomePageHeroImage

ImageSection

InformationSection

InsideHeader

InsideMenu

InteractiveHome

LocalTradesForm

OpenPositions

PageAccordionSection

PageIntroBanner

PageIntroBannerAlt

PageIntroBannerFullHeight

PageIntroBannerImages

PageIntroBannerReverse

PagePromoBanner

PageSections

PageTestimonials

PageTextSection

PageVideoGallery

PhotoGallery

PhotoGalleryBanner

PhotoGalleryBannerAlt

ProductMap

QuickSearch

RealtorForm

ReferAFriendForm

SiteMapAll

SiteUpdatesMenuSection

SiteUpdatesPageDivider

Sitemap

Spotlight

Spotlight2

Team

TeamBanner

TestimonialBanner

TestimonialBannerAlt

TestimonialCards

TestimonialCarousel

TestimonialsCarouselAlt

TextStepsMediaSection

TourGallery

TradeForm

VendorRequestForm

VideoGallery

VideoList

VideoSection

WarrantyForm

WarrantyInformationBanner