Sightline Institute – Style Guide
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.
Open the child theme CSS file and match up the heading and body font names, then change the font sizes as needed.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph.
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
Dark-1 (#2A2A2A)
Dark-2 (#07263A)
Accent-1 (#517D99)
Accent-2 (#C26233)
Light-1 (#E5EAEC)
Light-2 (#F0E9E4)
Light-3 (#FFFFFF)
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
Layout: The 12-Column Grid is the most common and flexible grid system used in modern web design. It allows for easy subdivision (e.g., 2, 3, 4, 6 columns) and works well with various screen sizes. Each column of the grid takes up a fraction of the container width.
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, L, M, S & XS.
Layout & Spacing
Grid System: The website’s overall grid system creates a flexible and responsive structure that ensures consistent layout, easy alignment and visual balance across devices.
Spacing: Standard values for margins, padding, and gutters between elements. Each of these has a global style assigned to them.
Section XS (1rem / 1.5rem)
Section S (1.5rem / 1.5rem)
Section M (2.5rem / 1.5rem)
Section L (5rem / 1.5rem)
Section XL (10rem / 1.5rem)
Default Container Width (1200px)
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.
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
Fluent Forms Pro: Visual example of form fields, labels and placeholder text.
Iconography
Icon Library: Custom designed icons have been added to the icon library under GenerateBlocks > Asset Library. One icon for each program area (category) has been created, as well as a set of branded icons for Sightline values.
Icon Sizes & Usage: Standard sizes for most UI components are 24px or 32px, but ensure touch targets are at least 48px by 48px for accessibility, and use scaleable formats like SVG.
Iconography
UI Elements
Each of the following design elements and components are saved as Patterns. These can be accessed directly from the editor under Patterns > My Patterns, or GenerateBlocks > Local Patterns.
The Local Patterns are categorized as follows:
- Call-to-Action
- Content
- Headers
- Interactive
- Layout
- Utilities
UI Elements
Local Patterns: below is a reference list of all synced patterns on the site, for each category
Call-to-Action: Encourage user engagement through links, buttons, or forms.
Content: Components (cards & posts) designed to showcase content such as blog posts, resources, or features.
Headers: Large, attention-grabbing sections at the top of pages or posts to provide context or highlight key information.
Layout: Structural elements that define the page or section layout, providing foundational grid systems and organization.
Utilities: Useful components that enhance the site’s functionality, such as search bars, breadcrumbs, progress bars, etc.
