Style Guide
Heading 1
Font Family: Ivypresto Text | Color: #283E7D (#ffffff on dark backgrounds) | Letter Spacing: 0.6px | Font Weight: 500 | Desktop & Laptop usage: Font size: 67px, Line height: 75px | Tablet and Mobile usage: Font size: 50px, Line height: 55px
Heading 2
Font Family: Ivypresto Text | Color: #283E7D (#ffffff on dark backgrounds) | Letter Spacing: 0.6px | Font Weight: 400 | Desktop & Laptop: Font size: 57px, Line height: 65px | Tablet usage: Font size: 40px, Line height: 45px | Mobile usage: Font size: 35px, Line height: 42px
Heading 3
Heading 3 alt.
Font Family: Ivypresto Text | Color: #949494 (#ffffff on dark backgrounds) | Letter Spacing: 0.4px | Font Weight: 400 | Font Style: italic (alt. use normal style) | Desktop & Laptop: Font size: 33px, Line height: 35px | Tablet usage: Font size: 27px, Line height: 30px | Mobile usage: Font size: 25px, Line height: 30px
Heading 4
Font Family: Ivypresto Text | Color: #494949 (#ffffff on dark backgrounds) | Letter Spacing: 0.3px | Font Weight: 400 | Desktop, Laptop, Tablet & Mobile usage: Font size: 21px, Line height: 28px
Heading 5
Font Family: Ivypresto Text | Color: #494949 (#ffffff on dark backgrounds) | Letter Spacing: 0px | Font Style: italic | Font Weight: 400 | Desktop, Laptop, Tablet & Mobile usage: Font size: 15px, Line height: 19px
Heading 6
Font Family: Montserrat | Color: #494949 (#ffffff on dark backgrounds) | Letter Spacing: 0px | Font Weight: 300 | Desktop, Laptop, Tablet & Mobile usage: Font size: 18px, Line height: 22px
Paragraph
Font Family: Montserrat | Color: #222222 (#ffffff on dark backgrounds) | Letter Spacing: 0px | Font Weight: 400 | Desktop, Laptop, Tablet & Mobile usage: Font size: 17px, Line height: 25px
Paragraph text should be left-aligned on mobile layouts, even if heading font is kept centered (you can use the CSS ID ‘left’ to force this style upon sections, or use elementors native editing options). Some exceptions are allowed, on desktop, but should be sparse.
Divider Styling
Font Family: Ivypresto Text | Color: #494949 (#ffffff on dark backgrounds) | Letter Spacing: 0.4px | Font Weight: 400 | Desktop & Laptop: Font size: 32px, Line height: 34px | Tablet & Mobile usage: Font size: 25px, Line height: 25px
Web Safe Fallback Fonts
In instances where the Ivypresto Text font is not available, please use the font Montserrat using the same styling specifications described above.
Font Exceptions
Generally, all elements on the website that use Elementors native heading or paragraph text elements will automatically adopt the heading and paragraph text styling. However, please be aware that customizations: color changes, normal versus italic specifications for Heading 3, font size changes etc. will need to be manually updated. As an example, if you changed the Heading 3 specifications to be a different color, and instances of Heading 3 throughout the site that was set to default styling (most of them), these will update to the new color automatically. However, if you had a Heading 3 styled to be a custom color (like #ffffff), these will stay the color they were customized to be. If you would like them to be updated to reflect the new change, you must manually go in to make this change.
In addition, there are certain elements across the site that use more specified Elementor elements, or custom coded sections that either have been customized natively within Elementor or via css to style in such a way that matches an existing font specification. Below, you will find a list of all text that has been:
Customized within Elementor, and will need adjusting within the page editor if font styling is changed to reflect these new changes.
Customized within a niche Elementor element; these fonts will not always be styled as Heading or paragraph text, but may simply be described as “titles”, “content”, “subheading” etc. in Elementor’s element styling panel. These fonts will need to be updated more robustly, as more of their styling info will not correspond to existing styling specfications.
Customized via css, and will need to be adjusted within the css style sheet to match any font or element styling changes.
Sections or Elements that require manual updating
- Every instance of white text on dark backgrounds, or Empowered by Buska Pink headers or Financially Speaking Bright Blue headers.
- Every instance of Heading 3 alt style; these have all been set within Elementor to have “normal” text style instead of default italic.
- Every instance of divider headings.
- Subheading size on homepage (currently set as Heading 6 with custom font size customization)
- Counters on Homepage (the “number” section within the element under style.)
- Image boxes on the Homepage, Our Team, “Meet the Team sections” on Service pages, Our Approach page, Reports & Tools, Beyond the Plan page, Financially Speaking page, Literature Downloads page, Empowered By Buska page, Our Books page, Buska Social Club page, Client Referrals and pages (the “Title” or “Description” sections under content in the style window.)
- Strategic Alliances Disclosure
- Sub-sub headers on individual team member pages with licenses.
- Captions on the images in the “Deserving Families We’ve Helped” sections across Community Support pages. Can be customized under the styling panel in “caption”
- Icon Lists on service pages (found in the style panel under text)
- Large, call-out numbers on service pages.
- Post info and Post Title Elements in archive template for Financially Focused Blog page.
- Subheadings beside books on Our Books page.
- Form text, buttons and layout customizations.
- Empowered by Buska and Financially Speaking footer link and icon colors.
Color Palette
Buska Blue
#283E7D
Light Blue
#576CA1
White
#FFFFFF
Gold
#D6BC87
Light Grey
#949494
Dark Grey
#494949
Dark Blue
#10204A
Empowered By Buska Color Palette
Bright Pink
#C71B79
Dark Pink
#7A074B
White
#FFFFFF
Gold
#D6BC87
Medium Pink
#890754
Financially Speaking Color Palette
Bright Blue
#3672B5
Bright Green
#2c9128
White
#FFFFFF
Dusty Blue
#576ca1
Image Treatment
Ideally, images should be no larger than 1MB when uploaded to the website. Larger uploads should be used for images that stretch across entire screen widths, or images that are “hero” images. Any image that does not stretch across the entire screen should have a 5px border radius.
Images should not have drop shadows.
When images are placed inside a container, they should be adjusted to have a “cover” fit style.
In sections where images are placed to the side of text on desktop, the order of content on mobile should be: image > header > body text > button (if applicable). In other words: the image should always come first.
If images have alt text, this needs to be provided for the web designer so they have it when uploading new content.
Button Styling
Default
Color: Background color #D6BC87, Font color #FFFFFF
Font Weight: 500 | Font Family: Montserrat | Font Size: 14px | Font Style: Uppercase | Border Radius: 8px | Padding: 12px 20px | Text Transform: Uppercase
Hover
Color: Background color transparent (if over an image or patterned background, #576CA1), Font color #283E7D, Border color #283E7D 1px width
Behavior
If buttons open to an internal page, user should remain on the page. If the link opens to an external page, the button should open that link in a new tab.
Dark Background
Default
Color: Background color #D6BC87, Font color #FFFFFF
Font Weight: 500 | Font Family: Montserrat | Font Size: 14px | Font Style: Uppercase | Border Radius: 8px | Padding: 12px 20px | Text Transform: Uppercase
Hover
Color: Background color transparent (if over an image or patterned background, #576CA1), Font color #FFFFFF, Border color #FFFFFF 1px width
Implementation
To create a dark background button, give the button a CSS ID of “dark-bg-button”. The corresponding styling can be found or edited in the css style sheet.
Hyperlink Styling
Default
COLOR: #576CA1
Hover
COLOR: #D6BC87
Dark Background
Default
COLOR: #D6BC87
Hover
COLOR: #576CA1
Layout
“Boxed” sections are 1440px on desktop, and should have a padding of 80px 35px (on mobile 80px 30px). In instanced where images or content pushes right against the edge of one piece of content, the next area of content should have a margin to separate it- usually of 100px.
While images (or flat color backgrounds) can stretch across entire pages or containers, if text or other components are present over this image/color they should follow the same padding rules as described above.
If content is split into multiple columns, these columns can be used (depending on size of content and spacing) on all screen sizes except mobile. On mobile screens, all columns should be set to 100% width and stack on top of one another vertically. In these instances, images always appear first, followed by titles or other applicable content.
Following standard wordpress and elementor structure, each row can be split into as many as 12 columns. If columns size is determined by percentages (which is preferred over static pixel widths that will not resize well), all the columns in a row cannot exceed 100% in width, but may be less than 100% for spacing purposes.
Page Templates: Employee Page Breakdown
Employee Name
Employee Title
Employee Licensure
About Pages | Hero Section
Centered professional office image in the 36% width left column, followed in the 60% width right column by H2 name, h4 title, optionally followed by h4 italicized licensure and finally paragraph text. All text should be left-aligned. Image height may need to be adjusted to better complement the length of material. Use the following as a model for spacing of items on about team pages.
On tablets, adjust column sizes to 40% and 57%, respectively, and on mobile screens ensure that all columns are stacked vertically at 100% width with image appearing before all other content.
Hear from Employee Name
Header 3 alt white text in the left 50% width column, employee video in the right hand 50% width column. Both columns should be center aligned until tablet and mobile orientations, where the video column will become top aligned.
Beyond the Office
After their initial bio in the hero section, all employees should have a secondary bio “beyond the office”. The left column should be 60% width, centered content with left-aligned text. Bios can vary in length, from one to multiple paragraphs. The image in the right, 36% width column should feature a casual, personal photo from the employee. Image height may need to be adjusted to better complement the length of material.
Page Templates: Service Page Breakdown
Service Title
Service subheading
Service hero sections should start with two 50% columns; these are interchangeable, but please make note that the column with the image should not have padding on the edge that sits closest to the screen edge. The container itself has padding, no additional padding is required in the column itself. All hero section text should be left aligned and follow this order: heading 2, heading 3, paragraph text. Content in both sections should be center aligned.
Above is an example of appropriate sizing for entity logos; certain services will only be assigned to specific entities. In these cases, a corresponding logo must be placed in the hero section of the service page.
Meet the Team
Ensure all team members are centered in the column whether there is 1 or 6 team members.
First Name Last Name
Position
First Name Last Name
Position
First Name Last Name
Position
First Name Last Name
Position
First Name Last Name
Position
First Name Last Name
Position
Fullwidth Service Page Subsection Title
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text.
Like so
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text.
Like so
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text. The left-most column should be equal length if not slightly longer than the right column. Alternately, designers may choose to use an image in place of text in either column. On mobile devices, this image should come before written content.
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text.
Like so
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text.
Like so
Service page subsections when styled in this way should have two columns, and content should be broken up with Header 4 text.
Content Template: Icon Box Breakdown
Corresponding Business Entity/Subheading
Image Box Title
Image box description. Image boxes should have Heading 5 subheadings, followed by Heading 4 titles and paragraph text descriptions. Because the native elementor image box is used to create these with limited styling options, heading and subheading text will need to be manually updated. Be aware that a mobile version of the image box is styled separately, and will need to be adjusted accordingly to match the desktop and tablet version.
OPTIONAL LINK
Corresponding Business Entity/Subheading
Image Box Title
Image box description. Image boxes should have Heading 5 subheadings, followed by Heading 4 titles and paragraph text descriptions. Because the native elementor image box is used to create these with limited styling options, heading and subheading text will need to be manually updated. Be aware that a mobile version of the image box is styled separately, and will need to be adjusted accordingly to match the desktop and tablet version.
OPTIONAL LINK
Content Template: Image Box Breakdown
Image Box Title
All image boxes should use the elementor image box element. They should use Heading 4 titles with paragraph text. The image should be set to full width within the box, and 225px height. There should be 20px padding around all text content, and the box itself should have a drop shadow and 5px border radius. 10px margins should be present between image boxes.
OPTIONAL LINK
Social Security Maximization
All image boxes should use the elementor image box element. They should use Heading 4 titles with paragraph text. The image should be set to full width within the box, and 225px height. There should be 20px padding around all text content, and the box itself should have a drop shadow and 5px border radius. 10px margins should be present between image boxes.
OPTIONAL LINK
Social Security Maximization
All image boxes should use the elementor image box element. They should use Heading 4 titles with paragraph text. The image should be set to full width within the box, and 225px height. There should be 20px padding around all text content, and the box itself should have a drop shadow and 5px border radius. 10px margins should be present between image boxes.
OPTIONAL LINK
Content Template: Forms
Heading 3 Call to Action
Short section of paragraph text describing where this contact form will be used, who it will be sent to, or where else users can reach out to get their questions answered. The form itself should be structured in three or four columns on desktop screens (depending on how many question fields they are, and the area required for responses.), on mobile all fields should stack into one column. On white backgrounds, question fields should be #c7cbe6. On colored backgrounds, all fields should be #ffffff.