# Heyjobs Design System

> A structured recruitment canvas pairing geometric utility with playful, hand-drawn organic accents.

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

## TL;DR
Heyjobs utilizes a high-contrast foundation of deep obsidian `#181a22` on a clean white canvas `#ffffff`. The system is characterized by a dual-font strategy: **Rebond Grotesque** provides a bold, geometric display presence for heroes, while **IBM Plex Sans** handles the functional UI and body density. A signature "hand-drawn" aesthetic is introduced through organic underlines and squiggles in primary pink `#d02879` and gold `#f5b100`, softening the rigid grid. Components favor an 8px radius for controls and a more generous 20px for content cards, creating a friendly but professional recruitment environment.

## Signature DNA
1. **The Organic Overline** (Hand-drawn squiggles and underlines in `#d02879` or `#f5b100` appearing under key display text to signal human-centricity. Observed on Homepage and About pages.)
2. **Geometric Display Scale** (Massive 80px Rebond Grotesque headlines that prioritize impact over traditional SaaS padding. Observed on Homepage hero.)
3. **The Scrim Surface** (Use of `#313545` for modal backgrounds and scrims to create high-contrast focus states. Observed in Privacy Settings component.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-surface-gray-100` | `#181a22` | Primary text, button backgrounds, borders | 82 | 1 | Computed style |
| `--color-surface-white` | `#ffffff` | Page background, button text, card surfaces | 32 | 1 | Computed style |
| `--color-surface-gray-00` | `#fbfbfc` | Secondary surface background | 1 | 1 | Declared token |
| `--color-surface-gray-90` | `#313545` | Scrims, overlays, high-contrast text | 12 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-primary-cosmo-50` | `#d02879` | Primary CTA background, organic accents | 1 | 1 | Computed style |
| `--color-surface-gray-80` | `#4c526b` | Secondary text, subtle shadows | 2 | 1 | Decorative only |
| `--color-accent-gold-50` | `#f5b100` | Secondary organic accents (squiggles) | 1 | 1 | Declared token |
| N/A | `#0000ee` | Standard hyperlink blue | 16 | 0.8 | Computed style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--color-support-success-50` | `#0a7749` | Success states |
| `--color-support-error-50` | `#d42d4a` | Error/Validation states |
| `--color-support-warning-50` | `#f6694e` | Warning states |
| `--color-support-help-50` | `#4751b2` | Information/Help states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| rebondGrotesque | 400, 700 | Display, Hero headlines | Montserrat | Proprietary |
| ibmPlexSans | 400, 500, 600 | Body, UI, Navigation, Subheadings | IBM Plex Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-mega}` | 80px | 88px | normal | 700 | Homepage Hero | `span.e1sp1z71` |
| `{type.display-xl}` | 64px | 71.68px | normal | 700 | Section Headers | `p.css-xkh3pg` |
| `{type.display-lg}` | 56px | 63.84px | normal | 700 | About Hero | `p.css-qpuxq1` |
| `{type.heading-md}` | 24px | 32px | 0.2px | 600 | Card Titles | `h6.css-ffttnm` |
| `{type.heading-sm}` | 20px | 28px | 0.2px | 600 | Sub-section labels | `span.css-ktkj1k` |
| `{type.body-lg}` | 18px | 26px | 0.1px | 400 | Intro paragraphs | `p.css-h4wrym` |
| `{type.body-md}` | 16px | 24px | 0.1px | 400 | Default running text | `a.ekcuab70` |
| `{type.button}` | 14px | 24.5px | normal | 500 | CTA Labels | `button.MuiButtonBase` |

### Principles
1. **Display Weight is Absolute.** Headlines use 700 weight Rebond Grotesque for a "stamped" geometric feel.
2. **Functional Tracking.** Body text at 16px-24px uses a consistent 0.1px to 0.2px tracking to improve legibility on digital screens.
3. **Contrast-First.** Text primarily sits at `#181a22` on `#ffffff` to maintain maximum accessibility.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.1}` | 4px | 6 |
| `{space.2}` | 8px | 4 |
| `{space.3}` | 12px | 5 |
| `{space.4}` | 16px | 6 |
| `{space.6}` | 24px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Layout containers, sharp sections | 101 occurrences |
| `{radius.control}` | 8px | Buttons, inputs, small cards | 36 occurrences |
| `{radius.card}` | 20px | Feature cards, city cards | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.subtle}` | `rgba(76, 82, 107, 0.02) 0px 2px 2px 0px...` | Buttons and floating UI elements | pricing, about pages |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** pricing, about
**Spec:** Background `#181a22` | Text `#ffffff` | Border `none` | Radius `8px` | Padding `12px 24px` | Typography `14px/500` | Shadow `{shadow.subtle}`
**States observed:** Default | Hover | Focus: captured | Active | Disabled: not captured

#### Search Input
**Role:** Job search entry
**Pages observed:** homepage, about
**Spec:** Background `#ffffff` | Text `#181a22` | Border `1px solid #dadde8` | Radius `8px` | Padding `16px` | Typography `16px/400`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### City Card
**Role:** Regional job navigation
**Pages observed:** homepage
**Spec:** Background `image-overlay` | Text `#ffffff` | Border `none` | Radius `20px` | Padding `24px` | Typography `20px/600`
**States observed:** Default | Hover: captured

#### Icon Grid Item
**Role:** Category navigation
**Pages observed:** homepage
**Spec:** Background `transparent` | Text `#181a22` | Border `none` | Radius `0px` | Padding `10px` | Typography `16px/600` (underlined)
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Privacy Modal
**Role:** Consent management
**Pages observed:** homepage, pricing, about
**Spec:** Background `#ffffff` | Text `#181a22` | Border `none` | Radius `8px` | Padding `32px` | Scrim `#313545`
**States observed:** Default: captured

#### Accent Button (Cosmo)
**Role:** High-priority conversion (e.g. "Accept All")
**Pages observed:** homepage
**Spec:** Background `#d02879` | Text `#ffffff` | Border `none` | Radius `8px` | Padding `12px 24px`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px |
| Section padding | 80px (desktop) |
| Grid | 12-column fluid |

## Imagery & decoration
- **Hand-drawn accents:** Squiggles and underlines used sparingly to highlight verbs (e.g., "more", "looking").
- **Photography:** High-quality, bright, "daylight" imagery of people in work environments.
- **Avoids:** Heavy drop shadows, complex gradients, or sharp 90-degree corners on interactive elements.

## Do's
- Use **Rebond Grotesque** at 700 weight for all hero headlines.
- Apply the **8px radius** to all interactive controls (buttons, inputs).
- Use **#d02879** (Cosmo Pink) for the primary "Accept" or "Find Jobs" actions.
- Maintain high contrast with **#181a22** text on white backgrounds.
- Use **20px radius** for content-heavy cards to soften the layout.

## Don'ts
- Do not use **#0000ee** for primary UI buttons; it is reserved for inline text links.
- Do not apply organic squiggles to more than one word per section.
- **Wrong:** Using a 4px radius on a button. **Right:** 8px. **Reason:** To maintain the "friendly utility" brand pillar.
- **Wrong:** Using #4c526b for primary body text. **Right:** #181a22. **Reason:** Accessibility and brand authority.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #d02879;
  --color-ink: #181a22;
  --color-canvas: #ffffff;
  --color-scrim: #313545;
  --font-display: 'rebondGrotesque', sans-serif;
  --font-body: 'ibmPlexSans', sans-serif;
  --radius-control: 8px;
  --radius-card: 20px;
}
```

## Known gaps
- Hover and Active states for the "Cosmo Pink" button were not captured in the automated run.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://heyjobs.co | 1440px / 390px | 2026-06-06 |
| Pricing | https://heyjobs.co/pricing | 1440px | 2026-06-06 |
| About | https://heyjobs.co/about | 1440px | 2026-06-06 |