Typography
Set the “Font Family” inside the Customizer > Typography > Font Manager. Use the HTML for the body font and the All Headings for the heading fonts.
This theme is using clamp functions. Please remember to set a fallback CSS. Open the child theme CSS file and match up the heading and body font names, then assign the font sizes (minimum rem in clamp) as needed.
Typography
Font Family: Segoe UI font-style: normal;
font-weight: 400;700
Font Sizes and Hierarchy: Define heading sizes (H1, H2, H3, etc.), base body text sizes, and line-height for each.
Heading 1
Heading 2
Heading 3
Heading 4
Heading
This is small paragraph
This is a regular paragraph.
This is medium size paragraph
PREHEADING
pillheading
This is a blockquote.
Add citation
Colors
Colors are fickle. Here’s a starting point that uses a primary brand color, a contrast color, plus surface colors.
In general, surface colors should be used on 60% of the area, primary colors on 30% of the area, and contrast colors on 10% of the area.
Colors
Primary
Secondary Color
Accent 1
Accent 2
Accent 3
Neutral 1
Neutral 2
Neutral 3
Surface-70
Surface-80
Surface-90
Surface-100
Buttons
These are set up using global styles, though you might want to make a copy in CSS in case you need to match the theme’s buttons or add a button to the header.
Buttons
Layout & Spacing
The Global Styles for sections should be applied to the outer container (section), with the inner container controlling the max width.
These global styles control the padding in the section and are available in XL, LG, MD, SM & XS.
Layout & Spacing
section-xl (10rem; 6rem)
section-lg (8rem; 6rem)
section-md (6rem; 6rem)
section-sm (3rem; 6rem)
section-xs (1.5rem; 6rem)
Default container width (1280px)
var(–width-m) – 75% (960px)
var(–width-s) – 50% (640px)
var(–width-xs) – 25% (320px)
Modal
Modals are done with custom CSS and JS. It uses a specific GB layout. The master copy is saved in Local Patterns.
The custom code is located inside Code Snippets and can be deactivated if a modal is not being used.
Modal
Modals are now Overlay Panels.
Forms
The website uses Fluent Forms Pro version to customize and create forms on the website.
The form fields and settings can be configured in the Fluent Forms plugin.
Forms
Iconography
Icon Library: List the approved icon library, or include custom designed icons.
Icon Sizes & Colors: Provide specifications for common icon sizes and permissible colors.
Icon Usage: Guidelines on how and when to use icons.
Iconography
UI Elements
Navigation: Show the design and behavior of the website’s navigation.
Cards: Design and label any commonly used content cards.
Tables: Design and usage guidelines for data tables.
Modals: Design for pop-ups, lightboxes, etc.
Additional Elements: Include designs for tooltips, loaders, accordions, or any other custom site components.
UI Elements
education & Training
tools & resources
Electrification summit coming this spring
dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
Read more
Grid resilience study released today
Data shows benefits of distributed energy resources dolor sit amet,
Read more
