Brand Style Guide
A comprehensive reference for our brand colors, typography, and design elements to ensure consistency across all materials.
Brand Colors
Primary Dark
Deep, trustworthy blue for headers and primary elements
HEX: #20407E
CSS: primary-dark
Usage: Headers, navigation, primary buttons
Primary Light
Bright, calming blue for accents and highlights
HEX: #51B1DB
CSS: primary-light
Usage: Links, hover states, accent elements
Light Neutral
Clean background color for content areas
HEX: #F4F7FA
CSS: light-neutral
Usage: Page backgrounds, card backgrounds
Mid Neutral
Subtle gray for secondary text and borders
HEX: #D9E1E8
CSS: mid-neutral
Usage: Secondary text, borders, dividers
Dark Accent
Professional dark gray for body text and footer
HEX: #4A5A68
CSS: dark-accent
Usage: Body text, footer background
Highlight
Fresh mint green for success states and highlights
HEX: #B3E7D4
CSS: highlight
Usage: Success messages, special highlights
Warm Contrast
Coral accent for call-to-action elements
HEX: #F28482
CSS: warm-contrast
Usage: Call-to-action buttons, important alerts
Teal Accent
Professional teal for secondary accents and highlights
HEX: #3B8C92
CSS: teal-accent
Usage: Secondary accents, icons, decorative elements
Typography
Heading Font - ABeeZee
Clean, modern sans-serif font for all headings and important text elements.
Heading 1 - 48px
Used for page titles and hero headings
Heading 2 - 36px
Used for section headings
Heading 3 - 30px
Used for subsection headings
Heading 4 - 24px
Used for card titles and smaller headings
Heading 5 - 20px
Used for form labels and small headings
Heading 6 - 18px
Used for the smallest headings
Body Font - Carlito
Highly readable sans-serif font for all body text, optimized for web reading.
Large Body Text - 20px
Used for introductory paragraphs and important content
Medium Body Text - 18px
Used for standard paragraph text
Regular Body Text - 16px
Default size for most body content
Small Body Text - 14px
Used for captions, footnotes, and secondary information
Bold Text Example
Italic Text Example
Bold Italic Text Example
Button Styles
Consistent button styling across the website for different actions and contexts.
Primary Buttons
Used for main call-to-action buttons
Secondary Buttons
Used for secondary actions
Success Buttons
Used for positive actions and confirmations
Alert Buttons
Used for important alerts and urgent actions
Large Buttons
Used for hero sections and prominent calls-to-action
Small Buttons
Used for compact spaces and secondary actions
Button States
Default appearance
On mouse hover
When action is unavailable
Usage Guidelines
Color Usage
- • Use Primary Dark for main headings and navigation
- • Primary Light for links and interactive elements
- • Dark Accent for body text and secondary elements
- • Light Neutral for backgrounds and card surfaces
- • Highlight for success states and positive feedback
- • Warm Contrast sparingly for urgent calls-to-action
Typography Rules
- • Always use ABeeZee for headings (h1-h6)
- • Use Carlito for all body text and paragraphs
- • Maintain consistent line height (1.6 for body text)
- • Use font weights appropriately (regular, bold)
- • Ensure sufficient contrast for accessibility
- • Keep line lengths between 45-75 characters