Deel — design system & UI screens

Productivity · 1 screen · 9 sections · deel.com

The hero is split: a deep-violet left panel with bold "Hire, manage, pay, & equip anyone, anywhere" headline plus two segmented product-selector buttons ("Hire anywhere / Run payroll"), beside a warm lifestyle photo overlaid with floating glassmorphic UI chips ($360,450 payroll-complete card, currency/Visa/contractor pills). The signature element is the recurring pattern of pill-shaped floating notification chips (currencies, status badges, compliance tags) layered over photography throughout the page. Below, a six-tile light-beige product bento grid (Deel Payroll/HR/IT/Benefits/Hire/Mobility) each with a mini in-app screenshot, followed by a tabbed timeline, a dark immersive workforce section, video testimonials, and a giant-number stats band.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/deel.

Decoded design system

Deel's decoded design system: background #FFFFFF, text #1B1B1B, accent #5938B7, link #B1D8FC, primary #5938B7; type scale h1 60px / h2 44px / body 16px; 4px spacing base; 16px base radius. The single interactive/action color is #5938B7 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F1F1F1`
border	`#DCDCDC`
text	`#1B1B1B`
text_muted	`#717171`
primary	`#5938B7`
accent	`#5938B7`
link	`#B1D8FC`
secondary	`#FFCF25`
button_bg	`#5938B7`
button_text	`#0000EE`

Using these colors

Action color #5938B7 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #5938B7 — one role, not several (the action color).
accent #5938B7 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #B1D8FC — fails contrast on the background (~1.5:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #FFCF25 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Bagoss Condensed
Body: Bagoss Standard
h1: 60px
h2: 44px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 15px, 16px, 20px, 24px, 32px

Radii

base: 16px
button: 100px

Shadows (elevation)

card: rgba(0, 0, 8, 0.08) 0px 4px 8px 0px

Motion

Micro-interactions run at 200ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 200ms · 100ms · 150ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease-in-out
animated properties: fill, color, transform, background-color

Native design tokens

Token	Value
`--color-purple-200`	`oklch(90.2% .063 306.703)`
`--color-surface-brand-purple-03`	`#a98df6`
`--color-surface-brand-blue-03`	`#b1d8fc`
`--color-cornbread-300`	`#ffe27c`
`--color-purple-175`	`#ede5ff`
`--color-surface-brand-yellow-01`	`#ffeba6`
`--color-neutral-300`	`#ccc`
`--color-orange-50`	`oklch(98% .016 73.684)`
`--color-tangelo-175`	`#e7a288`
`--color-blue-150`	`#d8ebff`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #4E4E4E
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1310px
nav: 144px sticky
common grid: 3 columns

Motion choreography (measured)

Load order: div.flex×4 → div.CybotEdge×2 → div.MuiBox-root

Scroll reveal: 1 elements rest at opacity 0, animate in over 0.5s cubic-bezier(0.4, 0, 0.2, 1).

Responsive (measured)

breakpoints: 390px · 430px · 598px · 601px · 958px · 1024px
mobile (390px): hero 38px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Deel global payroll platform landing page with split violet hero and product-tile bento grid