#  CADM Design Configuration Options - HHR 

 



 ##  

  expand\_more  

 
  

 

##  Site Configurations using the HHR Palette 

   ![demo](/sites/g/files/omnuum1651/files/styles/hwp_1_1__360x360_scale/public/2025-08/palette_HHR_0.png?itok=CphFz5O4) 

 

- **Site font pairings:** Serif (Baskerville, Merriweather) or sans serif (Inter)
- **Site Style options:** Bold & Compelling, Light & Elegant, or Friendly & Approachable
- **Site Header layout options:** Inline ,stacked, or compact



 

###  Header Color Options 

Sample Configuration Variations



 

 Option 1 

**Light Primary**

Stacked header  
Serif header font  
Light & Elegant Site Style  
Custom Site Logo  
Dark Primary, small stacked hero



 

 [Harvard Human Resources chevron\_right](https://hr.harvard.edu/) 

 

      ![demo](/sites/g/files/omnuum1651/files/styles/hwp_4_3__1540x1160/public/2025-08/option1_1_3.jpg?itok=3ZUArhc-) 

 

 



 

 



---

 

 Option 2 

**White**

Stacked header  
Sans serif header font  
Bold & Compelling Site Style  
Text Site name  
White, medium floating Hero



 

 

 

      ![demo](/sites/g/files/omnuum1651/files/styles/hwp_4_3__1540x1160/public/2025-08/option3_1_1.jpg?itok=jnmpm00O) 

 

 



 

 



---

 

**This example includes:**  
Inline header  
Serif header font  
Friendly style, rounded corners  
Site logo  
Dark Secondary, small split vertical Hero



 

 

 

      ![demo](/sites/g/files/omnuum1651/files/styles/hwp_4_3__1540x1160/public/2025-08/option4_2.jpg?itok=Ug6wI7_Z) 

 

 



 

 



---

 

**This example includes:**  
Inline header  
Serif header font  
Elegant rounded corners style  
Site name

White, large stacked hero



 

 

 

      ![demo](/sites/g/files/omnuum1651/files/styles/hwp_4_3__1540x1160/public/2025-08/option5_2.jpg?itok=CjuQDgWC) 

 

 



 

 



---

 

**This example includes:**  
Inline header  
Serif header font  
Friendly, rounded corners style  
Site logo  
White, small vertical Hero



 

 

 

      ![demo](/sites/g/files/omnuum1651/files/styles/hwp_4_3__1540x1160/public/2025-08/option6_1.jpg?itok=yUgVPvZV) 

 

 



 

 



 

 

 

 
#border img{
border:1px solid #1e1e1e;
}
#border_w img{
border:1px solid #cccccc;
}