BUILD GP > WEBSITE REDESIGN & VISUAL REFRESH
Style Guide
Establishing the Fundamentals
IDENTIFY THE MAIN CHALLENGE
Create a low maintenance sales channel that has a high ROI.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Typography
REGULAR
Use for all body texts.
DEMI
Use for large headlines, labels, text links, and interactive elements like in-line navigations.
BOLD
Use sparingly across the sites mainly for titles.
Color Palette
PRIMARY COLORS
NEUTRAL COLORS
Color Usage
HOW TO USE THE PALETTE
We want to use the yellow, which references the Build GP insulation panels, sparingly, while the off-white should be the dominant color.
Iconography
ICON STYLES
Build GP's custom icons were too intricate, so we recommended a simpler set for the UI.
CONVENTIONAL ICONS
Common icons utilized throughout the site are taken from the Phosphor icon set (Light style).
CUSTOM ICONS
Icons that are specific to GP’s products and applications are custom designed.
Image Treatment
IN A CARD
Images that are embedded in a card will conform to the padding and spacing of the card.
STAND ALONE
When used as a stand alone image, include a 12px padding around the image.
FULL WIDTH
For the most dramatic and eye catching application, have the image extend full width across the page. Include a 12px padding around the entire image.
The Style Guide
A MIXTURE OF BOTH
We created a guide combining stylistic recommendations and concrete rules.
It was both a style and build guide. For the client, it allowed them to visualize the elements and see how the pages could look. For Deloitte, it served as a build guide to show how to construct certain elements and how things fit together. For us, it was a single source of truth, greenlit by everyone ensuring common ground as we embark on this project together.
JUMP AHEAD
Design System
