Design Tokens & Styling Guidelines
BonardaHR uses Tailwind CSS 4 configured with custom @theme variables in src/index.css.
Color Palette​
| Token Name | Hex Code | Preview | Usage |
|---|---|---|---|
--color-primary | #097d9f |  | Primary brand color, main CTA buttons, active sidebar links |
--color-secondary | #065166 |  | Darker brand accent, active state highlights |
--color-primary-hover | #4ccff5 |  | Button hover state, interactive highlights |
--color-soft | #e6f2f5 |  | Light tinted surface backgrounds, subtle cards |
--color-base | #f0f0f0 |  | Main application canvas background |
--color-stroke | #cbd5e1 |  | Card and container border strokes |
--color-active | #34c759 |  | Active employee status indicator |
--color-inactive | #ff383c |  | Terminated employee status, error banners |
--color-custom-orange | #ff8d28 |  | Pending leave requests, warning alerts |
--color-custom-green | #2d9a6b |  | Approved status, success badges |
--color-draft | #825b01 |  | Draft timesheet text |
--color-draft-bg | #fcedc8 |  | Draft timesheet badge background |
Typography​
BonardaHR bundles custom self-hosted web fonts under src/assets/fonts/:
- Title Font (
--font-title):Bricolage Grotesque— used for page headers, major section titles, and modal headers. - Body & Interface Font (
--font-sans):Poppins— used for interface copy, tables, forms, and buttons with weights300,400,500,600,700.
/* Using fonts in Tailwind 4 */
.font-sans {
font-family: "Poppins", sans-serif;
}
.font-title {
font-family: "Bricolage", sans-serif;
}