Purpose of the Design System
This Design System aims to establish a unified visual language and user experience across the OSRHE website. By providing a set of design principles and guidelines, we aim to streamline the design and development process, promote efficiency, and deliver a cohesive experience to our users.
Target Audience
The Design System is intended for internal teams, including designers, developers, and content creators involved in creating and maintaining this website. It is a resource to ensure consistency in design implementation and enhance collaboration across teams.
Scope and Applicability
This Design System covers various design aspects, including typography, color palette, and layout principles. It is designed specifically for our WordPress-powered website built with the Beaver Builder page builder. Please note that while this Design System provides guidance, it is not meant to stifle creativity or limit design exploration. It is a tool to provide consistency and efficiency while allowing room for flexibility within the established framework.
Logo Usage and Placement
Consistently use the OSRHE logo on digital platforms with its original proportions and clear visibility. Place it in a prominent position at the top left or designated logo area. Avoid outdated versions, distortion, and cluttering the space around the logo.
Color Palette and Usage
This color palette creates an accessible and visually cohesive user experience. The primary brand colors are Blue and Green, which can be used for primary elements such as buttons and calls-to-action.
Colors labeled (AA) and (AAA) are adjusted to meet WCAG color contrast ratios to improve readability for all users. The minimum contrast ratio for AA compliance is 4.5:1. For AAA compliance, the minimum contrast ratio is 7:1.
The secondary color palette consists of Blue-Gray, Red Clay, and Prairie Gold. These may be used for accents, in-text links, secondary buttons, and supporting elements.
Typography and Font Guidelines
Montserrat Bold is the primary font for headings. Open Sans is used for body text due to its legibility and adaptability across devices. Maintain consistent font sizes, weights, and spacing to improve readability and visual hierarchy.
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 36px
Line Spacing: 1.2em
TABLET:
Size: 32px
Line Spacing: 1.2em
MOBILE:
Size: 28px
Line Spacing: 1.2em
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 28px
Line Spacing: 1.2em
TABLET:
Size: 24px
Line Spacing: 1.2em
MOBILE:
Size: 24px
Line Spacing: 1.2em
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 22px
Line Spacing: 1.2em
TABLET:
Size: 22px
Line Spacing: 1.2em
MOBILE:
Size: 20px
Line Spacing: 1.2em
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 18px
Line Spacing: 1.6em
TABLET:
Size: 18px
Line Spacing: 1.6em
MOBILE:
Size: 18px
Line Spacing: 1.6em
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
6DESKTOP:
Size: 16px
Line Spacing: 1.2em
TABLET:
Size: 16px
Line Spacing: 1.6em
MOBILE:
Size: 16px
Line Spacing: 1.6em
USAGE:
Page Headings
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 14px
Line Spacing: 1.6em
TABLET:
Size: 14px
Line Spacing: 1.6em
MOBILE:
Size: 14px
Line Spacing: 1.6em
Body Text
USAGE:
Body Text
SPECIFICATIONS:
Font: Open Sans
Weight: Normal
Color: #000000
DESKTOP:
Size: 16px
Line Spacing: 1.6em
TABLET:
Size: 16px
Line Spacing: 1.6em
MOBILE:
Size: 16px
Line Spacing: 1.6em
USAGE:
Cards and other small containers
SPECIFICATIONS:
Font: Montserrat
Weight: Extra-Bold
Color: #263238
DESKTOP:
Size: 16px
Line Spacing: 1.6em
TABLET:
Size: 16px
Line Spacing: 1.6em
MOBILE:
Size: 16px
Line Spacing: 1.6em
Small Text
USAGE:
Cards Descriptions and other small text
SPECIFICATIONS:
Font: Open Sans
Weight: Normal
Color: #000000
DESKTOP:
Size: 14px
Line Spacing: 1.6em
TABLET:
Size: 14px
Line Spacing: 1.6em
MOBILE:
Size: 14px
Line Spacing: 1.6em
Visual Elements and Icons
In addition to logo and typography, we use visual elements and icons to enhance this website. These visual elements, such as icons, borders, and dividers, follow a specific style guide to ensure their appearance and usage consistency.
Font Awesome Icons
We incorporate a library of Font Awesome icons, which can visually communicate various concepts and actions. When using icons, ensure they align with our branding guidelines and maintain clarity at different sizes.
Icon Usage: Utilize Font Awesome icons for various concepts and actions, such as social media icons, navigation icons, or feature icons.
Icon Sizes: Use appropriate icon sizes, such as 16px, 30px, or 48px, to ensure clarity and readability.
Icon Color: Adjust the icon color to complement the surrounding text while aligning with the branding guidelines. The icon color can either match or contrast with the surrounding text while adhering to appropriate contrast levels for optimal visibility.
Icon Styles: Use the most appropriate style with the surrounding text. Generally, the solid style might be used for smaller icons, while regular or light may be used for larger icons. Duotone may be used for feature icons.
Borders and Dividers
Borders and dividers are generally applied as 1px solid lines in a cool gray shade. For thicker lines, a lighter shade may be utilized.
Subtle Border Example
Radius: 12px
Color: None, or slightly darker than the background color. In this case, the background is white and the border is Cool Gray.
Bold Border Example
Radius: 12px
Color: Use a 2px solid border in the primary brand color (Blue or Green).
Button Styles
SPECIFICATIONS:
Border Radius: 50px
Font: Open Sans
Font Size: 16px
Font Weight: Bold
Line Height: 1.3em
Padding: 12px 24 px (or full width)
Border: 1px solid
SPECIFICATIONS:
Border Radius: 12px
Title: 18px, Montserrat, Bold
Description: 14px, Open Sans, Regular
Line Height: 1.3em
Padding: 12px 24 px
Border: 1px solid
Button Styles: Use rounded buttons with a primary color background (such as blue or green) and contrasting text color (black) for high visibility.
Hover Effects: Apply a subtle color or value change to buttons on hover to indicate interactivity.
Call To Action Styles
Example CTA
Description Text
SPECIFICATIONS:
Padding: 40px
Border Radius: None or 12px
Border: None or 1px solid
Background: Solid color or image
Example CTA with Shadow
Description Text
SPECIFICATIONS:
Padding: 40px
Border Radius: None or 12px
Border: None or 1px solid
Background: Solid color or image
Box Shadow: If using a shadow, use a subtle opacity between 10% and 30 % black.
Full Width CTA
Description Text
SPECIFICATIONS:
Padding: 40px - 80px
Border Radius: None
Border: None
Background: Use an image
Cards, Panels, and Containers
SPECIFICATIONS:
Border Radius: 12px
Border: 1px solid
Padding: 15px
Header: Montserrat, Extra Bold, 18px
Description: Open Sans, Regular, 14px
Container Padding: Padding can vary from 15px, 20px, and 40px. Use smaller padding for smaller containers, and larger padding for larger containers.
Form Elements and Validation
Beaver Builder is built on the Bootstrap framework. Refer to the Bootstrap 4 Forms documentation for form elements and validation colors. This helps ensure the forms align with Bootstrap's recommended options, maintaining consistency and adhering to industry-standard practices.
Sample Form for OSRHE Design System
Beaver Builder is built on the Bootstrap framework. Refer to the Bootstrap 4 Forms documentation for form elements and validation colors. This helps ensure the forms align with Bootstrap's recommended options, maintaining consistency and adhering to industry-standard practices.
"*" indicates required fields
CONTAINER SPECIFICATIONS:
Border Radius: 12px
Border: 1px solid
Padding: 20px
Headers: Montserrat, Extra Bold
Descriptions: Open Sans, Regular
FIELD INPUT SPECIFICATIONS:
Background Color: #fafafa
Border Radius: 5px
Border: 1px solid #37474F
Padding: 8px
Placeholder Color: #707070
Input Font Size: 16px
Label: Montserrat, Extra Bold, 16px
Descriptions: Open Sans, Regular, 15px
Sub-Label: Open Sans, Regular, 14px, Uppercase
FIELD INPUT FOCUS STATE CHANGES:
Background Color: #ffffff
Outline: 2px solid #004F99
Outline Offset: -2px
DROPDOWN SPECIFICATIONS:
Border Radius: 5px
Border: 1px solid #37474F
Padding: 8px
Input Font Size: 16px
Label: Montserrat, Extra Bold, 16px
Descriptions: Open Sans, Regular, 15px
VALIDATION ERROR SPECIFICATIONS:
Background Color: #fff9f9
Border/Text Color: #c02b0a
Padding: 8px
Border Radius: 5px
Font Size: 16px
Alerts
Beaver Builder is built on the Bootstrap framework. For alert colors, refer to the Bootstrap 4 Alert documentation. This helps ensure that the alert colors align with Bootstrap's recommended color options, maintaining consistency and adhering to industry-standard practices.