# Briohr Design System

> A professional HR canvas balancing high-contrast deep forest greens with energetic coral-red accents and classic serif authority.

**Source:** https://briohr.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Briohr utilizes a "Forest and Coral" palette to distinguish itself in the HR tech space. The system is anchored by a deep green foundation (`#026653`) and a high-energy primary action color (`#f86247`). Typography is a sophisticated pairing of **Merriweather** (heavyweight 900) for authoritative display headlines and **Inter** for functional UI and body copy. Layouts favor generous white space, rounded containers (up to 50px radius), and subtle depth through soft, tinted shadows (`rgba(17, 96, 96, 0.12)`).

## Signature DNA
1. **The "Underline" Motif** (Yellow-gold brush-stroke underlines appearing under key words in headlines across all pages, emphasizing the "human" in HR).
2. **Forest-Tinted Depth** (Shadows are not neutral gray but carry a green tint `rgba(17, 96, 96, 0.12)`, creating a cohesive atmospheric link to the brand's primary green).
3. **High-Contrast Serif Display** (Merriweather at weight 900 is used for all major section headers, providing a "trustworthy publication" feel against the modern sans-serif UI).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, button text | 127 | 1.0 | Computed |
| `{color.black}` | `#000000` | Deepest text, shadow base | 15 | 1.0 | Token |
| `{color.charcoal}` | `#293939` | Primary body text | 135 | 0.8 | Computed |
| `{color.gray.dark}` | `#545454` | Secondary body text | 303 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#f86247` | Primary CTAs, active states | 35 | 0.8 | Computed |
| `{color.forest}` | `#026653` | Section backgrounds, headings | 32 | 0.8 | Computed |
| `{color.mint.light}` | `#f1fefa` | Card backgrounds (soft) | 8 | 0.6 | Computed |
| `{color.amber}` | `#ffd972` | Pricing highlights, secondary buttons | 3 | 0.6 | Computed |
| `{color.orange.vivid}` | `#ff6600` | Decorative text elements | 3 | 1.0 | Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Merriweather | 700, 900 | Display, Headings | Merriweather (Google) | OFL |
| Inter | 400, 500, 600, 700 | UI, Body, Navigation | Inter (Google) | OFL |
| Roboto | 400, 500, 800 | Lists, secondary UI | Roboto (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 60px | normal | normal | 900 | Hero H1 | `h1.main-title` |
| `{type.display.lg}` | 40px | 60px | normal | 900 | Section H2 | `h2` |
| `{type.heading.md}` | 28px | 25px | normal | 700 | Feature Titles | `div.title` |
| `{type.heading.sm}` | 22px | 45px | normal | 900 | Sub-section H3 | `h3` |
| `{type.body.lg}` | 18px | 25px | normal | 500 | Intro paragraphs | `p` |
| `{type.body.md}` | 16px | 25px | normal | 500 | Default body | `div#Wrapper` |
| `{type.body.sm}` | 14px | 40px | normal | 400 | Nav links | `a.mega-menu-link` |
| `{type.caption}` | 12px | 25px | 1px | 500 | Copyright/Small | `div.copyright` |

### Principles
1. **Headlines are always Serif.** Merriweather 900 is non-negotiable for any text larger than 32px.
2. **Functional UI is Sans.** Inter 500 is the default for buttons and interactive labels to maintain legibility.
3. **Loose Body Leading.** Body text consistently uses 25px line-height for 16px font sizes to ensure readability in dense HR contexts.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 48 |
| `{space.sm}` | 10px | 204 |
| `{space.md}` | 15px | 99 |
| `{space.lg}` | 20px | 101 |
| `{space.xl}` | 30px | 48 |
| `{space.xxl}` | 50px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Page sections, footers | 609 occurrences |
| `{radius.sm}` | 5px | Form inputs, small buttons | 20 occurrences |
| `{radius.md}` | 20px | Standard content cards | 10 occurrences |
| `{radius.lg}` | 30px | Primary CTA buttons | 27 occurrences |
| `{radius.xl}` | 50px | Large feature panels | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.forest}` | `rgba(17, 96, 96, 0.12) 0px 5px 30px 0px` | Feature cards on white | 19 occurrences |
| `{shadow.soft}` | `rgba(17, 96, 96, 0.12) 1px 5px 15px 0px` | Secondary cards | 8 occurrences |
| `{shadow.inset}` | `rgba(0, 0, 0, 0.07) 0px 4px 3px -2px inset` | Primary buttons | 6 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call-to-action (e.g., "Get a Free Demo")
**Pages observed:** Home, Pricing
**Spec:** Background: `#f86247` | Text: `#ffffff` | Radius: `30px` | Padding: `10px 30px` | Typography: Inter 14px/500 | Shadow: `{shadow.inset}`
**States observed:** Default | Hover: Not captured

#### Surface (Standard)
**Role:** Default section container
**Pages observed:** Home, Pricing
**Spec:** Background: `#ffffff` | Text: `#545454` | Radius: `0px` | Padding: `0px` | Typography: Inter 16px

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific HR modules or testimonials
**Pages observed:** Home
**Spec:** Background: `#ffffff` | Radius: `35px` | Padding: `30px` | Shadow: `{shadow.forest}` | Border: None

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Radius: `20px` | Padding: `30px` | Shadow: `rgba(0, 0, 0, 0.5) 0px 0px 25px -9px`

### Tier 3: Surface-specific

#### Forest Hero Section
**Role:** High-impact brand messaging
**Pages observed:** Home, Pricing
**Spec:** Background: `#0b4c40` | Text: `#ffffff` | Radius: `0px` | Padding: `0px`

#### Footer
**Role:** Global site navigation
**Pages observed:** Home, Pricing
**Spec:** Background: `#ffffff` | Text: `#293939` | Border-top: `1px solid rgba(255, 255, 255, 0.1)`

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (estimated from desktop screenshots) |
| Section Padding (Vertical) | 50px - 80px |
| Column Gap | 30px |

## Do's
- Use **Merriweather 900** for all primary section headlines.
- Apply the **forest-tinted shadow** (`rgba(17, 96, 96, 0.12)`) to cards on white backgrounds.
- Use **#f86247** for the primary "Demo" or "Action" buttons.
- Maintain a **30px radius** on primary buttons to match brand softness.
- Use **#026653** for full-width background sections to create brand rhythm.

## Don'ts
- Do not use Merriweather for body copy; use **Inter** or **Roboto**.
- Do not use pure black shadows; always tint with the forest green.
- Do not use sharp corners (0px) for cards or buttons unless they are full-width sections.
- Do not use the primary coral `#f86247` for body text; it is reserved for interactive elements.

## Similar brands
- BambooHR (Similar HR focus, friendly professional vibe)
- Personio (Clean, card-based HR management)
- Gusto (Warm colors, high-contrast typography)

## Quick start

```css
/* Briohr Core Tokens */
:root {
  --color-primary: #f86247;
  --color-forest: #026653;
  --color-charcoal: #293939;
  --color-white: #ffffff;
  --font-display: 'Merriweather', serif;
  --font-ui: 'Inter', sans-serif;
  --radius-button: 30px;
  --radius-card: 20px;
  --shadow-brand: 0px 5px 30px 0px rgba(17, 96, 96, 0.12);
}
```

## Agent prompt examples
- "Create a feature card using a 35px border radius, a white background, and the Briohr forest shadow (rgba 17, 96, 96, 0.12)."
- "Design a hero section with a #026653 background and a primary button using #f86247 and a 30px radius."
- "Generate a headline using Merriweather weight 900 in #293939 with a yellow brush-stroke underline effect."

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://briohr.com | 1440px | 2026-06-06 |
| Pricing | https://briohr.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://briohr.com | 390px | 2026-06-06 |