Skip to content
DesignMunkDesignMunk Submit a site

Employment Hero

employmenthero.com
Employment OS for your business. Every part of employment, intelligently run.
HR & Recruiting Software WordPress Homepage DM Sans Saiga
Share Visit site
employmenthero.com DESKTOP · 1440
Employment Hero

AI Breakdown

Design export

# Design brief: the Employment Hero design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/04175055/employmenthero-com-uk-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04175055/employmenthero-com-uk-featured.webp
- On DesignMunk: https://designmunk.com/employment-hero/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Employment Hero: Saiga Headlines and Capsule Purple CTAs

## Overview

Employment Hero presents an AI-forward HR and payroll platform to SMEs and enterprises. The interface is confident and modern: heavy display headlines, generous white backgrounds, and a single strong purple accent. Density is moderate—enough information for B2B buyers without crowding. Use this system to feel decisive, polished and trustworthy rather than playful.

## Colors

- **primary (#000000):** Core text and dominant headlines on light surfaces.
- **secondary (#9a5af9):** Supporting accent for links, badges and less-critical CTAs.
- **tertiary (#7622d7):** Primary accent for actions; used on main buttons and highlights.
- **neutral (#ffffff):** Base surface for pages, cards and modals.
- **border (#e5e7eb):** Subtle dividers, card outlines and table rules.
- **brand-spanish-violet (#4c2c7c):** Dark brand violets for rich states, hovers or hero flourishes.
- **surface ({colors.neutral}):** Default page and card backgrounds.
- **on-surface ({colors.primary}):** Standard text color on white surfaces.

## Typography

- Saiga is the display family for all headlines (xs–lg). It is self-hosted/custom and not freely available to load from Google. For agents, substitute with accessible display sans options that hold heavy weights and tight spacing: Archivo Black, Sora, or Space Grotesk.
- DM Sans is the body family (body-md 18px/1.5, weight 400) and is available from Google Fonts; use it for paragraphs, lists and form labels.
- Scale and roles: headline-lg 80/900 for primary page claims; headline-md 60/900 for section headers; headline-sm 28/500 and headline-xs 24/500 for module titles and FAQs. Keep body copy to 18px for readability under dense headlines.

## Layout

Spacing uses a 6–16–24–36–60 ladder. Apply xl (60px) for section top/bottom padding, lg (36px) to separate headings from media or grids, md (24px) inside dense modules, sm (16px) for card padding and stacks of small elements, and xs (6px) for micro-gaps. Sections are vertically centered with generous white space; grids typically present as equal columns with consistent gutters derived from md or lg spacing.

## Elevation & Depth

Depth is mostly tonal and spatial. Cards sit on white with a faint border (#e5e7eb); use the measured sm shadow for interactive media or overlays when separation is needed. Avoid heavy drop shadows—lg and xl are none—rely on whitespace, borders and the strong type scale to create hierarchy.

## Shapes

Two radii define the language: sm 8px for cards and small containers; md 32px for hero media and primary buttons. The 32px pill on CTAs communicates primary action and is used consistently across the page.

## Components

Buttons and Card
- Primary Button: background #7622d7, text #ffffff, 32px radius, 14px×24px padding, 52px height. Use for the main action per section.
- Secondary Button: background #9a58fc, text #121214, 32px radius, 14px×24px padding, 52px height. Reserve for alternate paths.
- Link Button: text-only in #7622d7, no radius; pair with body text.
- Card: white background, ink text, 8px radius, 16px padding; add a 1px #e5e7eb border when placed on white.

### Global Navigation Bar
Top bar with logo left, four audience links (Businesses, Partners, Employees, Job Seekers) and utilities (Resources, Search, Login) right. Use body-md for links, 24–36px vertical padding and border #e5e7eb for separation.

### Region Switcher Notice
Compact banner confirming the user's market selection. Render as a card (8px radius) with border #e5e7eb and body-md text; include a close control.

### Hero Headline & CTA
Two-line headline using headline-md or lg depending on viewport, followed by body-md paragraph and a primary button. Vertical spacing: lg between headline and copy, md to the CTA.

### Hero Video Player
Wide media frame with 32px radius and subtle sm shadow. Place an unobtrusive control chip top-center; keep contrast high against video content.

### Audience Switcher Tiles
Three equal cards ("For Businesses/Employees/Job Seekers"). Use card spec with 16px padding, headline-xs titles and a link button in #7622d7.

### KPI Grid
2×2 metrics presenting percentages (e.g., 89%). Use headline-md (60/900) for numerals, body-md labels, and lg spacing between items; optional 1px #e5e7eb dividers.

### Testimonial Spotlight
Quote block with customer attribution and a CTA. Set quote in headline-sm, attribution in body-md; card container with 8px radius and md padding.

### FAQ Accordion
Section heading in headline-sm; each item uses body-md with a 1px #e5e7eb top border. Expand/collapse icons align to a 24px hit-target.

## Do's and Don'ts

- Do reserve the deep violet (#7622d7) for the single most important CTA per section; use the lighter secondary only for alternatives.
- Do set primary claims in Saiga (or Archivo Black/Sora fallback) at 60–80px with tight leading; keep paragraphs at 18px DM Sans.
- Do space sections with 60px top/bottom to preserve the clear, editorial rhythm.
- Don't add heavy shadows; the system relies on borders (#e5e7eb) and whitespace.
- Don't mix radii on a single module—use 32px for hero media and buttons, 8px for cards.
- Don't overrun the nav with extra CTAs; keep one primary action visible at a time.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent (primary action): #7622d7

1) Build the hero
- Background #ffffff, center a container with 60px top/bottom padding.
- H1: "Employment. Intelligently Run." in Saiga (or Archivo Black), 80px, weight 900, line-height 1.06, color #000000.
- Paragraph: DM Sans 18px/1.5, color #000000.
- Primary button: 52px height, 14px×24px padding, 32px radius, background #7622d7, text #ffffff.
- Add a media frame below with 32px radius and a soft sm shadow.

2) Audience tiles (3-up)
- Use cards: background #ffffff, 8px radius, 16px padding, 1px border #e5e7eb.
- Title in Saiga/Archivo Black 24px, weight 500.
- Body in DM Sans 18px.
- "Learn more" as link button in #7622d7; 36px gaps between tiles.

3) KPI grid (2×2)
- Section padding: 60px.
- Each metric: numeral in Saiga/Archivo Black 60px, 900 weight; label in DM Sans 18px.
- Use 1px #e5e7eb dividers and 36px gaps.

4) FAQ accordion
- Section heading in Saiga/Archivo Black 28px, 500 weight.
- Each item row: 20px vertical padding, 1px top border #e5e7eb, body in DM Sans 18px.
- Expand icon at 24px touch target; content area uses 24px inner spacing.

## Similar Brands

- Gusto: Similar white surfaces and friendly CTAs; Gusto is softer in type, with rounder sans headlines.
- Rippling: Equally bold with high-contrast type; Rippling leans darker backgrounds and more saturated gradients.
- Deel: Shares the purple accent and global-employment messaging; Deel uses more illustration and lighter headline weights.
- Workday: Enterprise-oriented with broad nav and data-led sections; Workday's type is calmer and spacing tighter than Employment Hero's.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #9a5af9;
  --color-tertiary: #7622d7;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-spanish-violet: #4c2c7c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 80px;
  --text-headline-lg-weight: 900;
  --text-headline-lg-leading: 1.06;
  --text-headline-lg-tracking: -0.003em;
  --text-headline-md-size: 60px;
  --text-headline-md-weight: 900;
  --text-headline-md-leading: 1.08;
  --text-headline-md-tracking: -0.003em;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.14;
  --text-headline-sm-tracking: -0.007em;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.25;
  --text-headline-xs-tracking: -0.008em;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-saiga: "Saiga";
  --font-dm-sans: "DM Sans";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 32px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 60px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 14px 24px;
  --button-primary-height: 52px;
  --button-secondary-background-color: #9a58fc;
  --button-secondary-text-color: #121214;
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 14px 24px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-tertiary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #9a5af9;
  --color-tertiary: #7622d7;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-spanish-violet: #4c2c7c;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Saiga";
  --font-headline-md: "Saiga";
  --font-headline-sm: "Saiga";
  --font-headline-xs: "Saiga";
  --font-body-md: "DM Sans";
  --text-headline-lg: 80px;
  --text-headline-md: 60px;
  --text-headline-sm: 28px;
  --text-headline-xs: 24px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.003em;
  --tracking-headline-md: -0.003em;
  --tracking-headline-sm: -0.007em;
  --tracking-headline-xs: -0.008em;
  --font-weight-headline-lg: 900;
  --font-weight-headline-md: 900;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-md: 32px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 60px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.604,
                    0.353,
                    0.976
                ],
                "hex": "#9a5af9"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.463,
                    0.133,
                    0.843
                ],
                "hex": "#7622d7"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-spanish-violet": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.298,
                    0.173,
                    0.486
                ],
                "hex": "#4c2c7c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Saiga",
                "fontSize": {
                    "value": 80,
                    "unit": "px"
                },
                "fontWeight": 900,
                "letterSpacing": {
                    "value": -0.003,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Saiga",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 900,
                "letterSpacing": {
                    "value": -0.003,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Saiga",
                "fontSize": {
                    "value": 28,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.007,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Saiga",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.008,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "DM Sans",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Employment Hero**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse HR & Recruiting →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery