BrioHR Brand Identity

A complete profile of BrioHR's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #7EB4A1
• secondary: #0089F7
• accent: #F86247
• background: #FFFFFF
• textPrimary: #F86247
• link: #F86247

Typography

• primary: Inter — https://fonts.google.com/specimen/Inter
• heading: Merriweather — https://fonts.google.com/specimen/Merriweather

Visual Assets

• Logo:
• Favicon:
• Social card (og:image):

UI Components

• input: background=#FFE6A4, textColor=#246E53, borderColor=#2D6A4F, borderRadius=13px, shadow=rgba(0, 0, 0, 0.02) 0px 0px 2px 2px inset
• buttonPrimary: background=#F86247, textColor=#FFFFFF, borderRadius=30px, shadow=rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.07) 0px 4px 3px -2px inset
• buttonSecondary: background=#7EB4A1, textColor=#000000, borderColor=#7EB4A1, borderRadius=0px, shadow=none

Brand Personality

Tone: professional · Energy: medium · Audience: business professionals seeking HR solutions

BrioHR Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• AAL Shipping - Career page
  • Image:
  • Source: AAL Shipping Career Page
• Accountability and Ownership: The Cornerstones of Business Success
  • Image:
  • Source: Business Success Article
• HR News: Deferred Employment & Office Return, Aug 2022
  • Image:
  • Source: HR News Article
• How to Write a Job Description: Marketing Executive | BrioHR
  • Image:
  • Source: Job Description Article
• The Evolution and Imperative of Effective Communication Training for Managers | BrioHR
  • Image:
  • Source: Communication Training Article
• Transforming Productivity Measurement with HRMS Tools
  • Image:
  • Source: HRMS Tools Article

Working with these fonts

Not found on Google Fonts? Follow these steps to obtain permission to use the fonts.

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Machine-Readable Profile

{  
  "colorScheme": "light",  
  "fonts": [  
     {  
        "family": "Inter",  
        "role": "body"  
     },  
     {  
        "family": "Roboto",  
        "role": "body"  
     },  
     {  
        "family": "Merriweather",  
        "role": "heading"  
     },  
     {  
        "family": "Poppins",  
        "role": "heading"  
     }  
  ],  
  "colors": {  
     "primary": "#7EB4A1",  
     "secondary": "#0089F7",  
     "accent": "#F86247",  
     "background": "#FFFFFF",  
     "textPrimary": "#F86247",  
     "link": "#F86247"  
  },  
  "typography": {  
     "fontFamilies": {  
        "primary": "Inter",  
        "heading": "Merriweather"  
     },  
     "fontStacks": {  
        "heading": [  
           "Merriweather",  
           "serif"  
        ],  
        "body": [  
           "Poppins",  
           "Helvetica",  
           "Arial",  
           "sans-serif"  
        ],  
        "paragraph": [  
           "Inter",  
           "-apple-system",  
           "BlinkMacSystemFont",  
           "Segoe UI",  
           "Roboto",  
           "sans-serif"  
        ]  
     },  
     "fontSizes": {  
        "h1": "60px",  
        "h2": "40px",  
        "body": "18px"  
     }  
  },  
  "spacing": {  
     "baseUnit": 4,  
     "borderRadius": "5px"  
  },  
  "components": {  
     "input": {  
        "background": "#FFE6A4",  
        "textColor": "#246E53",  
        "borderColor": "#2D6A4F",  
        "borderRadius": "13px",  
        "borderRadiusCorners": {  
           "topLeft": "13px",  
           "topRight": "13px",  
           "bottomRight": "13px",  
           "bottomLeft": "13px"  
        },  
        "shadow": "rgba(0, 0, 0, 0.02) 0px 0px 2px 2px inset"  
     },  
     "buttonPrimary": {  
        "background": "#F86247",  
        "textColor": "#FFFFFF",  
        "borderRadius": "30px",  
        "borderRadiusCorners": {  
           "topLeft": "30px",  
           "topRight": "30px",  
           "bottomRight": "30px",  
           "bottomLeft": "30px"  
        },  
        "shadow": "rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.07) 0px 4px 3px -2px inset"  
     },  
     "buttonSecondary": {  
        "background": "#7EB4A1",  
        "textColor": "#000000",  
        "borderColor": "#7EB4A1",  
        "borderRadius": "0px",  
        "borderRadiusCorners": {  
           "topLeft": "0px",  
           "topRight": "0px",  
           "bottomRight": "0px",  
           "bottomLeft": "0px"  
        },  
        "shadow": "none"  
     }  
  },  
  "images": {  
     "logo": "https://briohr.com/wp-content/uploads/2022/02/Group-30.svg",  
     "favicon": "https://briohr.com/wp-content/uploads/2022/02/BrioHR-Favicon.png",  
     "ogImage": "https://briohr.com/wp-content/uploads/2022/05/Untitled-design-2022-05-31T110140.386.png",  
     "logoHref": "https://briohr.com",  
     "logoAlt": "Group 30"  
  },  
  "confidence": {  
     "buttons": 0.95,  
     "colors": 0.9,  
     "overall": 0.925  
  }  
}