Welcome to our style guide! Here’s how we keep our website looking sharp and consistent.
The purpose of this style guide is to ensure a consistent and appealing design across all pages of our website. It provides guidelines on color schemes, typography, and various elements to maintain a cohesive look and feel that aligns with our brand.
Name: Vibrant Orange
CSS Value: #FF6F00
Description: Main color for primary buttons and major highlights.
Name: Burnt Orange
CSS Value: #E65100
Description: Used for secondary buttons and borders.
Name: Light Orange
CSS Value: #FF8F00
Description: Used for call-to-action hover states and highlights.
Name: Light Gray
CSS Value: #F5F5F5
Description: Used for backgrounds and containers.
Name: Medium Gray
CSS Value: #E0E0E0
Description: Used for borders and subtle backgrounds.
Name: Gray
CSS Value: #BDBDBD
Description: Used for secondary text and inactive elements.
Name: Charcoal Gray
CSS Value: #212121
Description: Used for main text and headers.
Name: Golden Yellow
CSS Value: #FFC107
Description: Used for special offers and promotions.
Name: Success Green
CSS Value: #4CAF50
Description: Used for success messages and active states.
Name: Success Green
CSS Value: #4CAF50
Description: Used for success messages and positive notifications.
Name: Error Red
CSS Value: #F44336
Description: Used for error messages and critical alerts.
Name: Warning Yellow
CSS Value: #FFEB3B
Description: Used for warning messages and alerts.
Roboto Regular: "The quick brown fox jumps over the lazy dog."
Roboto Bold: "The quick brown fox jumps over the lazy dog."
Roboto Italic: "The quick brown fox jumps over the lazy dog."
Open Sans Regular: "The quick brown fox jumps over the lazy dog."
Open Sans Semibold: "The quick brown fox jumps over the lazy dog."
Roboto Bold, 36px, Line Height 1.2, Charcoal Gray
Open Sans Semibold, 28px, Line Height 1.3, Vibrant Orange
Roboto Regular, 16px, Line Height 1.6, Charcoal Gray
"The quick brown fox jumps over the lazy dog."
Ensure all text has sufficient contrast against backgrounds for readability.
Use legible font sizes and line heights to improve readability.
Provide descriptive alt text for all images to ensure accessibility for screen readers.
Follow our guidelines for proper logo placement and sizing.
Maintain a friendly and professional tone in all written content.
Download our logos and brand assets from the links below.
Refer to our design principles and brand guidelines for additional information.