Design System Inspiration of PayFit

Overview

Visual Theme & Atmosphere

PayFit makes payroll and HR software for small and mid-sized businesses. Its story page says “It started with three founders – Firmin Zocchetto, Ghislain de Fontenay and Florian Fournier” in 2015, and quotes Zocchetto: “We started Payfit because we believed every business deserved a real payroll and HR partner.” The legal notice gives the company as Payfit SAS, head office 37 Avenue de Trudaine, Paris, and says the solution was founded in 2016 to automate payslips, social declarations and leave management.

The site is clean and warm: near-black #0d0d0c type and buttons on white and warm greys #f5f5f4, with a bright magenta #f048f0 as the brand accent, soft pink highlights and a deep plum #7f007f. Type is Restart Soft, a variable face, with Heartbreak Eighties for display.

What makes it worth reading:

• A state machine in tokens. 803 --uy-* properties give each surface, content and border role its enabled, hover, pressed, active, focus, selected, disabled and read-only values.
• Colour in oklch. Most colours are authored as oklch() — the brand magenta is oklch(70.06% .2678 327.97).
• Buttons that stay dark. The primary is near-black with a slightly lighter hover; magenta is saved for accents and highlights.

Primary tasks

• Try PayFit or book a demo.
• Explore payroll, HR and pricing; sign in.

Brand Narrative

PayFit set out to give every business a real payroll and HR partner. Its site is calm where it needs to be trusted — dark buttons, warm greys — and playful where it can be, with magenta, pink and a display face. Behind it sits a token system that spells out every state in oklch.

Principles

• Calm core, playful edge. Near-black actions, magenta accents.
• Every state defined. Enabled to read-only.
• Warm neutrals. Greys with a touch of warmth.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on payfit.com/fr: 839 root custom properties — --uy-* 803 (PayFit’s), --tw-* 30 (Tailwind, excluded), and a few container and link values. Hex values below convert the oklch() tokens where needed.

Brand

• Brand (#f048f0) — --uy-color-surface-primary, --uy-color-content-accent #f048f0.
• Brand active (#d100d1) — --uy-color-content-primary-active, --uy-color-content-button-minimal-active.
• Highlight hover (#ffc7ff) · pressed (#ff7aff) — --uy-color-surface-button-highlight-*.
• Plum (#7f007f) — deep brand backgrounds.

Ink and neutrals

• Primary (#0d0d0c) — --uy-color-content-neutral, --uy-color-surface-button-primary-pressed.
• Primary hover (#333332).
• Foreground (#0d0d0c) · Text secondary (#5c5957, 158 <p> elements) · Placeholder (#706e6b, --uy-color-content-form-placeholder).
• Surface (#f5f5f4, --uy-color-surface-button-secondary-hover) · Surface alt (#f1f0ef) · Border (#e7e6e4) · Canvas (#ffffff).

Focus and status

Focus #0d9ad8 (the 2px outline) · Danger #b52834 · decorative cards #9fdff9 (blue) and #f7e98d (yellow).

Typography

Font family

Restart Soft — a variable face (100–900) on body and headings — and Heartbreak Eighties for display, both loaded (document.fonts) under hashed family names. Source Sans 3 loads from an embedded widget.

Scale

Calls to action 16px/500; header items 16px/400.

Layout

• White and warm-grey sections; pastel cards (blue, yellow, pink) for features.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat on the measured controls.

Motion & Easing

Not measured.

Components

Measured after declining cookies (“Refuser”), focus read under a real Tab key, and a hover counted only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.

• Primary — Essayez maintenant: #0d0d0c, white 16px/500, 8px, 48px, 12px 16px. Hover #333332; press returns to #0d0d0c. Focus: outline: 2px solid #0d9ad8.
• Secondary — Demandez une démo: #ffffff, #5c5957 border. Hover #f5f5f4 with a #0d0d0c border; press keeps the dark border. Focus: the same outline.
• Header item — Pourquoi Payfit ? and siblings: 6px, 39px, 16px/400. Hover and press fill #f1f0ef. Focus is the browser’s auto ring.

Radius

8px on buttons, 6px on header items.

States

Hover: primary #333332, secondary #f5f5f4, header items #f1f0ef. Press: the primary back to #0d0d0c, the secondary keeps a dark border. Focus: a 2px #0d9ad8 outline on buttons, the browser’s ring on header items.

Live state probe, 2026-10-16 (), button-primary: pressed — no visible change (measured 2026-10-16).

Do’s and Don’ts

Do

• Keep primary buttons near-black #0d0d0c, lifting to #333332 on hover.
• Use magenta #f048f0 and its pinks for accents and highlights.
• Draw focus as a 2px #0d9ad8 outline.

Don’t

• Don’t make the primary button magenta.
• Don’t use cold greys; PayFit’s neutrals are warm (#f5f5f4, #e7e6e4).
• Don’t count --tw-* as PayFit tokens.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#0d0d0c ink · #333332 hover · #f048f0 magenta · #d100d1 magenta active · #ffc7ff pink · #7f007f plum · #f5f5f4 warm grey · #5c5957 secondary · #0d9ad8 focus

Example Component Prompts

• “A 48px button, #0d0d0c, white 16px/500 Restart Soft, 8px radius; hover #333332; focus a 2px #0d9ad8 outline.”
• “A white secondary button with a #5c5957 border; hover #f5f5f4.”

Governance

Known Gaps

• Contrast, nav-item. Text #0d0d0c on #00000000 measures 1.08:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.