# Happ.jobs Design System

> A high-contrast, professional canvas defined by deep navy ink, vibrant cobalt actions, and soft-edged floating containers.

**Source:** https://happ.jobs | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Happ.jobs utilizes a "Professional Cobalt" aesthetic, anchoring a pure white foundation `#ffffff` with a primary action color of `#2e3be3`. The system relies on high-contrast typography using **Poppins** for bold, impactful displays (55px) and **Jost** for functional UI elements and subheadings. Depth is achieved through a specific "Soft Float" shadow `rgba(0, 0, 0, 0.1) 0px 11px 33px 0px` applied to cards with generous 16px to 32px radii. The layout is spacious, utilizing a custom spacing scale that emphasizes 32px and 48px gaps to maintain a clean, accessible recruitment interface.

## Signature DNA
1. **The Cobalt Anchor** (The use of `#2e3be3` for primary CTAs and `#151948` for text creates a trustworthy, high-contrast environment across all pages).
2. **Soft-Floating Cards** (Large 32px rounded corners combined with deep 33px blur shadows create a distinct layered effect for feature blocks).
3. **Geometric Type Pairing** (The transition from the heavy geometric weight of Poppins 700 to the more legible, open Jost 400 defines the hierarchy).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, card surface | 38 | 1 | `css_variable:--white` |
| `{color.ink.primary}` | `#151948` | Primary text, headings | 69 | 1 | `css_variable:--main-text` |
| `{color.ink.secondary}` | `#212529` | Secondary body text | 18 | 1 | `css_variable:--bs-body-color` |
| `{color.ink.muted}` | `#424242` | De-emphasized labels | 2 | 1 | `css_variable:--button-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.action.primary}` | `#2e3be3` | Primary buttons, active states | 33 | 0.8 | Computed style |
| `{color.action.soft}` | `#6069df` | Secondary buttons, hover | 2 | 1 | `css_variable:--light-blue` |
| `{color.border.subtle}` | `#d9dbf7` | Card outlines, dividers | 2 | 1 | `css_variable:--border-color` |
| `{color.accent.blue}` | `#0d6efd` | Links, focus rings | 1 | 1 | `css_variable:--bs-blue` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#198754` | Valid states, success messages |
| `{color.error}` | `#dc3545` | Invalid states, error alerts |
| `{color.warning}` | `#ffc107` | Warning notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Poppins** | 700 | Display, Hero Headings | Poppins (Google Fonts) | OFL |
| **Jost** | 400, 500, 600, 700 | Subheadings, UI, Buttons | Jost (Google Fonts) | OFL |
| **Roboto** | 400, 500 | Body copy, Form labels | Roboto (Google Fonts) | OFL |
| **Manrope** | 400 | Supplemental body | Manrope (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 55px | 66px | normal | 700 | Hero H1 | `h1.land-title` |
| `{type.h2}` | 36px | 43.2px | normal | 700 | Section Headings | `h2.land-subtitle` |
| `{type.h3}` | 22px | 33px | normal | 400 | Header/Lead text | `header.land-header` |
| `{type.h4}` | 19px | 22.8px | normal | 700 | Card Titles | `h3.card-title.bald` |
| `{type.button}` | 18px | normal | normal | 600 | Primary CTA | `a.button.big` |
| `{type.body}` | 16px | 24px | normal | 400 | Main Body | `div.land-form` |
| `{type.body-sm}` | 14px | 23px | normal | 700 | List Items | `li.card-list-item.bald` |
| `{type.caption}` | 12px | 23px | normal | 400 | Small Metadata | `li.card-list-item.company` |

### Principles
1. **Heavy Display Weight:** All primary headings must use Poppins at weight 700 to maintain brand authority.
2. **Functional Sans for UI:** Use Jost for all interactive elements (buttons, links) to ensure geometric clarity.
3. **Generous Line Height:** Body text maintains a 1.5x ratio (24px on 16px) to support readability in dense job descriptions.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 12px | 16 |
| `{space.md}` | 16px | 20 |
| `{space.lg}` | 24px | 3 |
| `{space.xl}` | 32px | 4 |
| `{space.xxl}` | 48px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 6px | Secondary buttons | `Rounded Button` component |
| `{radius.md}` | 12px | Form inputs | `radii` scale |
| `{radius.lg}` | 16px | Primary buttons, cards | `Rounded Button` spec |
| `{radius.xl}` | 32px | Feature cards | `Card` component |
| `{radius.full}` | 36px | Pill buttons, badges | `Rounded Button` spec |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `Flat` | none | Default surfaces | `Surface` component |
| `Floating` | `rgba(0, 0, 0, 0.1) 0px 11px 33px 0px` | Feature cards, Hero elements | `shadows` evidence |
| `Subtle` | `rgba(0, 0, 0, 0.12) 0px 3px 5px 0px` | Hover states | `shadows` evidence |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (Start Now, Apply)
**Pages observed:** https://happ.jobs, https://happ.jobs/pricing
**Spec:** Background: `#2e3be3` / Text: `#ffffff` / Radius: `16px` / Padding: `8px 28px` / Typography: `Jost 600 18px`
**States observed:** Default | Hover: `#1721c8` | Focus: captured | Active: captured | Disabled: not captured

#### Surface
**Role:** Page sections and structural containers
**Pages observed:** https://happ.jobs/pricing, https://happ.jobs/about
**Spec:** Background: `#ffffff` / Text: `#212529` / Radius: `0px` / Padding: `32px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit highlights and job listings
**Pages observed:** https://happ.jobs, https://happ.jobs/pricing
**Spec:** Background: `rgba(255, 255, 255, 0.75)` / Border: `10px #d9dbf7` / Radius: `32px` / Shadow: `Floating`
**States observed:** Default: captured | Hover: not captured

#### Rounded Button (Secondary)
**Role:** Alternative actions (Pricing, About)
**Pages observed:** https://happ.jobs/pricing, https://happ.jobs/about
**Spec:** Background: `#6069df` / Text: `#ffffff` / Radius: `16px` / Padding: `8px 32px`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Search Bar
**Role:** Homepage job search input
**Pages observed:** https://happ.jobs
**Spec:** Background: `#ffffff` / Border: `1px #d9dbf7` / Radius: `12px` / Padding: `16px 20px`
**States observed:** Default: captured | Focus: `#0d6efd` border

#### Navigation Link
**Role:** Header menu items
**Pages observed:** https://happ.jobs, https://happ.jobs/about
**Spec:** Text: `#151948` / Typography: `Jost 400 22px` / Padding: `4px 12px`
**States observed:** Default: captured | Hover: `#2e3be3`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gap | 48px |
| Card Grid Gap | 24px |
| Container Padding | 16px (Mobile) / 32px (Desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, full-width buttons, 16px side padding |
| Desktop | 1440px | Multi-column grids, 32px side padding, fixed-width search bar |

## Imagery & decoration
Happ.jobs uses high-quality photography of diverse professionals, often placed within "blob" or "pill" shaped masks that mirror the UI's border radii. Backgrounds are kept clean (white or very light gray) to allow the cobalt blue accents and floating cards to define the visual hierarchy.

## Do's
- Use `#2e3be3` for all primary user actions.
- Apply `{radius.xl}` (32px) to all major content containers.
- Pair Poppins 700 with Jost 400 for a clear display-to-body hierarchy.
- Use the `Floating` shadow for elements that need to stand out from the canvas.
- Maintain a minimum 24px gap between grid items.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary buttons. **Right:** Use `#2e3be3`. **Reason:** `#0d6efd` is a utility/link color, not the brand's primary action color.
- Do not use sharp corners (0px) for buttons or cards; the brand identity relies on soft, rounded geometry.
- Do not use Poppins for long-form body text; stick to Jost or Roboto for legibility.
- Avoid using dark backgrounds for sections; the system is designed for a light, airy canvas.

## Similar brands
- LinkedIn (Professional blue palette)
- Indeed (Functional recruitment UI)
- Glassdoor (Clean, card-based layout)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #2e3be3;
  --color-text-main: #151948;
  --color-border: #d9dbf7;
  --radius-card: 32px;
  --shadow-floating: 0px 11px 33px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a primary button using the Happ.jobs cobalt blue `#2e3be3`, white text, and a 16px border radius."
- "Create a feature card with a white background, 32px rounded corners, and a deep 33px blur shadow."
- "Design a section header using Poppins Bold at 36px with the primary text color `#151948`."

## Known gaps
- Hover states for secondary buttons were not fully captured in the source.
- Mobile-specific navigation menu (hamburger) behavior was not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://happ.jobs | 1440x900 | 2026-06-06 |
| Pricing | https://happ.jobs/pricing | 1440x900 | 2026-06-06 |
| About | https://happ.jobs/about | 1440x900 | 2026-06-06 |