---
title: "Employment Hero design system"
variant: extended
source: https://employmenthero.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/employmenthero-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Employment Hero · Design System

> Confidently minimal, powered by vivid purple and people-first stories

**Theme:** light · **Industry:** saas · **Source:** https://employmenthero.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Employment Hero pairs a spacious white canvas and bold black headlines with purple calls to action. A video-led hero gives way to a dense resource feed, FAQ, proof-point stats, and a high-contrast footer.

## North star

Keep the page bright and editorial, using Saiga headlines and Employment Hero purple to focus attention amid practical, content-rich sections.

## Overview

A crisp white foundation gives the page a bright, open feel, while near-black typography creates strong contrast and a confident tone. Purple is the unmistakable action colour: it marks the main buttons, selected brand surfaces, and the full-width closing banner. DM Sans handles navigation, body copy, and utility text; the heavier, distinctive Saiga display face gives the hero and key section headings their character. The hero pairs a large headline with a compact explanatory column, then anchors the opening with a broad, rounded video and a restrained customer-logo strip. Farther down, compact filters and a varied card feed create a more information-dense rhythm without abandoning white space. Fine neutral borders and soft-gray bands organize content instead of heavy shadows. The FAQ and statistics return to calm, structured layouts, before a vivid purple CTA and nearly black footer create a strong finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, open hero background, and light text on dark or purple buttons. |
| Deep Teal | `#00483e` | `--color-deep-teal` | semantic | Text on pale mint resource badges; badge accent rather than a core page colour. |
| Harbour Blue | `#006585` | `--color-harbour-blue` | semantic | Text on pale cyan video badges; badge accent rather than a core page colour. |
| Hero Violet | `#7622d7` | `--color-hero-violet` | brand | Primary CTA fill, nav action, card accent, footer banner, and branded purple surfaces. |
| Off-Black | `#121214` | `--color-off-black` | neutral | Dark inverse surfaces, navigation and footer elements, and supporting dark text. |
| Graphite | `#27272a` | `--color-graphite` | neutral | Secondary button text and supporting dark details, including within the footer. |
| Aubergine Ink | `#460078` | `--color-aubergine-ink` | semantic | Occasional resource badge text; appears as a small badge detail, not a defining brand surface. |
| Quiet Divider | `#e4e4e7` | `--color-quiet-divider` | neutral | Fine borders around navigation, cards, buttons, and content links. |
| Slate Copy | `#52525b` | `--color-slate-copy` | neutral | Muted body and navigation text where softer contrast is needed. |
| Violet Edge | `#6f28d9` | `--color-violet-edge` | accent | Minor purple badge and border detail alongside the main violet. |
| Headline Black | `#000000` | `--color-headline-black` | neutral | Primary headings and high-contrast text on the white canvas. |
| Cloud Surface | `#f4f4f5` | `--color-cloud-surface` | surface | Soft-gray card, nav, and button backgrounds that separate content from white. |
| Smoky Gradient | `#2f2f31` | `--color-smoky-gradient` | neutral | Gradient or media detail; not a dominant flat interface colour. |
| Button Border | `#d4d4d8` | `--color-button-border` | neutral | Subtle outline on light secondary buttons. |
| Muted Stone | `#71717a` | `--color-muted-stone` | neutral | Secondary text, navigation and footer details, and minor button content. |
| Footer Mist | `#a9a9b2` | `--color-footer-mist` | neutral | Low-emphasis footer text and secondary heading details on dark surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f5` (Cloud Surface) · `--color-surface-2` → `#121214` (Off-Black) · `--color-text` → `#000000` (Headline Black) · `--color-text-muted` → `#121214` (Off-Black) · `--color-text-subtle` → `#52525b` (Slate Copy) · `--color-border` → `#e4e4e7` (Quiet Divider) · `--color-accent` → `#7622d7` (Hero Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f5` | 19.11:1 | AAA |
| `#000000` | `#121214` | 1.12:1 | fail |
| `#121214` | `#ffffff` | 18.71:1 | AAA |
| `#121214` | `#f4f4f5` | 17.02:1 | AAA |
| `#52525b` | `#ffffff` | 7.73:1 | AAA |
| `#52525b` | `#f4f4f5` | 7.03:1 | AAA |
| `#52525b` | `#121214` | 2.42:1 | fail |
| `#7622d7` | `#ffffff` | 7.05:1 | AAA |
| `#7622d7` | `#f4f4f5` | 6.41:1 | AA |

### Gradients

- `linear-gradient(rgba(18, 18, 20, 0.88) 0%, rgba(18, 18, 20, 0) 32.69%, rgba(18, 18, 20, 0) 57.69%, rgba(18, 18, 20, 0.9) 84.13%)`
- `linear-gradient(to right, rgba(0, 0, 0, 0) 55%, rgb(255, 255, 255) 75%), linear-gradient(rgba(0, 0, 0, 0) 55%, rgb(255, 255, 255) 75%)`
- `linear-gradient(rgba(18, 18, 20, 0.88) 0%, rgba(18, 18, 20, 0) 49.73%, rgba(18, 18, 20, 0) 57.69%)`
- `linear-gradient(270deg, rgb(118, 34, 215) 0%, rgb(216, 73, 145) 50%, rgb(118, 34, 215) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 700, 600, 500, 800 | Navigation, body copy, labels, buttons, links, and captions | Inter |
| Saiga | `--font-display` | webfont | 400, 900, 800 | Display headings, especially the hero headline and prominent section titles | Outfit |

- **DM Sans:** Practical sans-serif across utility and content text; measured weights span 400–800. Eyebrows are uppercase with loose tracking.
- **Saiga:** Distinctive display face with very heavy measured weights; use for short, high-impact headings rather than body copy.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 400 | 1.2 | 0 | — | Saiga | Hero headline and primary display heading. |
| body | 14px | 400 | 1.43 | 0 | — | DM Sans | Paragraphs, resource descriptions, and supporting content. |
| caption | 12px | 400 | 1.3 | 0 | — | DM Sans | Small metadata and image or card captions. |
| button | 12px | 400 | 1.33 | 0 | — | DM Sans | CTA labels and compact action controls. |
| nav | 14px | 400 | 1.43 | 0 | — | DM Sans | Primary navigation and utility menu labels. |
| link | 14px | 400 | 1.43 | 0 | — | DM Sans | Text links and resource-card titles. |
| eyebrow | 11px | 700 | 1 | 0.073em | uppercase | DM Sans | Uppercase category labels and section overlines. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 11, 12, 14, 15, 16, 20, 24 px.
- Section rhythm 60px · element gap 6px · card padding 26px · max content width —.

The desktop page uses a centered content region, with the hero and resource feed visibly narrower than the full viewport. A slim announcement strip sits above the full-width navigation. The hero aligns its large headline and short copy side by side, then places a broad video below. The resource area uses a dense, variable-width card grid with filters across its top. FAQ and statistics sections become simpler and more open, while the CTA and footer span the page width. Spacing moves from comfortable hero breathing room to compact card-feed rhythm.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `50%` · badge `9999px` · nav `14px` · link `8px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `14px` · pill `9999px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px`
- Motion: standard transition `0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The visual system is mostly flat. Light neutral hairlines separate navigation and card content, with soft gray surfaces used for grouping. Rounded controls and media edges give the interface polish without making cards feel raised. The measured medium shadow appears on buttons, but the screenshot keeps elevation restrained; use dark overlays only on video captions and media.

## Imagery

The opening is led by a wide photographic video showing people using workplace technology, with a dark caption overlay at its base. Customer logos act as a quiet trust strip. Below, resource cards mix video thumbnails, workplace photography, and text-led stories in varied aspect ratios. The closing purple banner includes a playful illustrated character; treat it as a single campaign asset, not a general illustration system.

## Components

### Announcement strip

A narrow, light regional notice above the main navigation, with a region selector and dismiss control.

### Primary navigation

Full-width white bar with logo, selected dark Work tab, navigation links, utility controls, and a violet Get started button.

### Hero

Large bold Saiga headline beside compact supporting copy and a violet See Employment Hero action; wide rounded video follows.

### Resource filters

Compact category tabs and a filter affordance above a search-style input with a thin neutral outline.

### Resource feed

Dense, mixed-size card grid combining video thumbnails, article imagery, category badges, titles, and metadata.

### FAQ and proof points

Accordion rows with fine dividers, followed by a centered heading and a row of prominent percentage metrics.

### Closing banner and footer

Full-width violet campaign CTA with character artwork transitions into a dark multi-column footer.

### Measured component styles

- **Primary button** (“HR & Compliance”): background #ffffff · text #27272a · border 1px solid #d4d4d8 · radius 8px · padding 5px 11px · 400 12px DM Sans
- **Secondary button** (“Get started”): background #7622d7 · text #ffffff · radius 10px · padding 11px 20px · 600 14px DM Sans
- **Link** (“Resources HR & Compliance May 18, 2026 F”): transparent background · text #000000 · border 1px solid #e4e4e7 · radius 8px · padding 0px · 400 16px DM Sans
- **Input**: transparent background · text #121214 · radius 0px · padding 0px · 400 14px Arial
- **Card** (“LEARN TOPICS All learn topics HR & Compl”): background #f4f4f5 · text #000000 · radius 0px · padding 24px 28px · 400 16px DM Sans
- **Badge** (“Resources”): background #d1faf5 · text #00483e · radius 99999px · padding 4px 7px 4px 5px · 600 9px DM Sans · capitalize
- **Navigation item** (“You're viewing our Australia site. Selec”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px DM Sans

## Do

- Use white as the dominant page canvas.
- Reserve Hero Violet (#7622d7) for prominent actions and branded moments.
- Set display headlines in Saiga and interface copy in DM Sans.
- Give the hero video a broad, rounded frame.
- Use thin neutral dividers to structure dense content.
- Vary resource card widths while keeping their text legible.

## Don't

- Do not turn every section into a purple panel.
- Do not use heavy shadows as the main card separator.
- Do not apply display typography to long body copy.
- Do not force the resource feed into uniform cards.
- Do not treat badge colours as primary brand colours.
- Do not crowd the opening hero with extra controls.

## Agent prompt

Build a new Employment Hero page that preserves the site's bright, practical SaaS identity. Use Gallery White (#ffffff) as the main canvas, Headline Black (#000000) for bold display copy, and Hero Violet (#7622d7) for key actions and selected brand moments. Set short headlines in Saiga, with DM Sans for navigation, body text, labels, and buttons. Keep the top navigation and announcement strip compact; give the hero a strong headline, concise support copy, and a prominent rounded media frame. Organize detailed material with fine Quiet Divider (#e4e4e7) borders and Cloud Surface (#f4f4f5) grouping. Let content cards vary in width and media ratio, then simplify lower sections into FAQ rows and proof-point statistics. Finish with a violet CTA and dark footer. Keep elevation restrained and preserve comfortable spacing around major sections.

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #FFFFFF;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--off-black: #121214;
--wp--preset--color--dark-grey: #545454;
--wp--preset--color--neutral-900: #18181B;
--wp--preset--color--neutral-800: #27272A;
--wp--preset--color--neutral-700: #3F3F46;
--wp--preset--color--neutral-600: #52525B;
--wp--preset--color--neutral-500: #71717A;
--wp--preset--color--neutral-450: #888888;
--wp--preset--color--neutral-400: #A9A9B2;
--wp--preset--color--neutral-300: #D4D4D8;
--wp--preset--color--neutral-200: #E4E4E7;
--wp--preset--color--neutral-100: #F4F4F5;
--wp--preset--color--neutral-50: #FAFAFA;
--wp--preset--color--neutral-alpha-white-4: #fff;
--wp--preset--color--off-white: #FCFBFF;
--wp--preset--color--light-violet-10: #F2E9FB;
--wp--preset--color--light-violet-25: #F1E8FF;
--wp--preset--color--light-violet-50: #F9F5FF;
--wp--preset--color--light-violet-100: #E4D3F7;
--wp--preset--color--hp-light-violet-100: #F1E8FF;
--wp--preset--color--hp-label-color-white: #FFFFFF;
--wp--preset--color--hp-static-white: #FFFFFF;
--wp--preset--color--hp-border-light: #F4F4F5;
--wp--preset--color--hp-tab-hover-border: #71717A;
--wp--preset--color--hp-tab-hover-bg: #FFFFFF;
--wp--preset--color--violet-deep-800: #460078;
--wp--preset--color--violet-deep-900: #280541;
--wp--preset--color--hp-tab-active-bg: #3F3F46;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/employmenthero-com