Light interfaceMeasured www.deel.com

Deel

Bold global HR platform that mixes a punchy purple hero with crisp black-and-white buttons.

This page is styled with Deel’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F7F5F2
Cards, panels, menus

Text#1B1B1B
Headings and body

Muted text#1B1B1B
Secondary info

Line#A98DF6
Dividers and outlines

Accent#5938B7
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 17.2:1Muted on background 17.2:1Text on accent 7.9:1

Every colour found on their site

#1B1B1B#FFFFFF#000000#FAF4EE#0C0A08#F7F5F2#201547#FFFBF4#5938B7#A98DF6

Typography

Headings use BagossCondensedFont (company-only; shown here with the free look-alike Inter). Body text uses Inter (free).

h1	BagossCondensedFont · 60px · 500 · -0.19px	Hire, manage, pay, & equip anyone, anywhere.
h2	BagossCondensedFont · 44px · 500 · -0.22px	The global people platform
h3	BagossCondensedFont · 24px · 500	Deel Payroll
p	Inter · 14px · 600	Get 3 months free of PEO*

Corners & shadows

Corner sizes used

12px

16px

4px

pill

8px

Shadows

Shadow 1

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Deel’s live website. Click to enlarge.

Buttons · 4

Deel button: Claim offer — #FFFFFF · corners 200px · 32px

Deel button: Log in — No fill · corners 200px · 40px

Deel button: Book a demo — #1B1B1B · corners 200px · 40px

Navigation bar · 1

Deel Navigation bar: Solutions — fill #FFFFFF · square · Inter 16px

Buttons · 5

Deel Buttons: Claim offer — fill #FFFFFF · corners 200px · BagossStandardVF 12px

Deel Buttons: Log in — no fill · corners 200px · BagossStandardVF 14px

Deel Buttons: Book a demo — fill #1B1B1B · corners 200px · BagossStandardVF 14px

Deel Buttons: Deel Payroll — fill #D8EBFF · corners 8px · Inter 14px

Deel Buttons: Get Started — fill #201148 · corners 200px · BagossStandardVF 16px

Cards and panels · 1

Deel Cards and panels: Deel Payroll — fill #F7F5F2 · corners 16px · Inter 16px

Icons

4 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Deel product screen: 936 × 528 — 936 × 528

Deel product screen: 675 × 336 — 675 × 336

Deel product screen: 1680 × 1120 — 1680 × 1120

Deel product screen: 474 × 250 — 474 × 250

Deel product screen: 2280 × 1280 — 2280 × 1280

Deel product screen: 1680 × 722 — 1680 × 722

Deel product screen: 2400 × 1260 — 2400 × 1260

Deel product screen: 1400 × 682 — 1400 × 682

Deel product screen: 936 × 526 — 936 × 526

Deel product screen: 2871 × 1509 — 2871 × 1509

Do & don’t

What makes it Deel

Deep purple hero banner with a photo of a real person working
Fully pill-shaped (rounded) buttons everywhere, no sharp corners
Black and white buttons used as the main calls to action, purple reserved for backgrounds

Make every button a full pill shape
Use black as the primary button colour with white text
Use purple as a bold background block, not just an accent line

Don’t

Don't use sharp-cornered buttons
Don't mix too many accent colours on one screen
Don't make the purple timid or muted

For AltLeads: Borrow the pill-shaped buttons and bold black primary action for a confident, modern CRM feel.

Copy the tokens

Paste into any project to try this look.

/* Deel · values measured from https://www.deel.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F7F5F2;
  --text: #1B1B1B;
  --muted: #1B1B1B;
  --line: #A98DF6;
  --accent: #5938B7;
  --on-accent: #FFFFFF;
  --radius-button: 200px;
  --radius-card: 16px;
  --radius-small: 4px;
  --button-height: 32px;
  --font-heading: "BagossCondensedFont", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.004) 0px 0.6px 1.5px 0px, rgba(0, 0, 0, 0.008) 0px 1.1px 3.4px 0px, rgba(0, 0, 0, 0.01) 0px 1.8px 6.1px 0px, rgba(0, 0, 0, 0.02) 0px 2.6px 10.1p;
}