Business

Deel

deel.com16 colors5 componentsInterMulti-page · 12 screens

Hire, pay, and manage teams in 150+ countries with Deel. Run global payroll, ensure compliance, and streamline HR operations—all on one powerful platform.

Remix Visit

Remix

Visit

12 screenshots captured· deel.com

1 / 12 · Deel | Global Payroll, Compliance, HR Solutions | HRIS · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from deel.com

Primary

#1B1B1B

Primary CTA, brand accent, active state; Captions, secondary text

#0000EE

Inline link colour

#A98DF6

Accent / decorative

#D8EBFF

Accent / decorative

#C4B1F9

Accent / decorative

#00499D

Accent / decorative

#1032CF

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#201547

Alternating section band

#000000

Headings / primary text

#141414

Body copy

#616161

Tertiary / placeholder text

#FAF4EE

1px borders and dividers

#D6D6D6

Neutral

#878787

Neutral

Semantic

#00A700

Success

Typography · Inter

body14px · 400 · 23.8px

caption12px · 400 · 20.4px

link16px · 400 · 24px

input16px · 460 · 27.2px

body18px · 600 · 27px

caption12px · 700 · 20.4px

body14px · 600 · 23.8px

button14px · 600 · 20px

body16px · 400 · 27.2px

body18px · 400 · 28.8px

caption12px · 600 · 20.4px

body13px · 500 · 22.1px

body14px · 560 · 23.8px

caption12px · 600 · 12px

body17px · 400 · 28.9px

body20px · 600 · 32px

body14px · 500 · 23.8px

caption10px · 600 · 17px

body16px · 600 · 27.2px

button16px · 600 · 20px

body13px · 700 · 22.1px

body20px · 400 · 32px

body18px · 400 · 27px

button18px · 600 · 30.6px

body18px · 600 · 27px

button18px · 600 · 28.8px

caption12px · 500 · 20.4px

button22px · 600 · 35.2px

caption12px · 600 · 16px

heading16px · 500 · 27.2px

list-item16px · 400 · 27.2px

h316px · 600 · 24px

link13px · 400 · 19.5px

button16px · 500 · 24px

input14px · 400 · 21px

list-item16px · 400 · 24px

body14px · 400 · 23.8px

heading28px · 400 · 47.6px

heading24px · 600 · 32px

caption11px · 500 · 16.5px

button15px · 500 · 23.8px

button14px · 600 · 23.8px

body16px · 500 · 24px

body15px · 500 · 25.5px

body14px · 700 · 23.8px

button13.3333px · 400

list-item16px · 400 · 25.6px

button16px · 400 · 24px

body13px · 600 · 22.1px

Typography · BagossCondensedFont

h244px · 500 · 46.2px

heading24px · 500 · 27.6px

heading16px · 500 · 18.4px

heading28px · 500 · 32.2px

h156px · 500 · 58.8px

body20px · 500 · 28px

h524px · 500 · 27.6px

h160px · 500 · 63px

h424px · 400 · 36px

nav-link14px · 500 · 21px

button15px · 500 · 22.5px

heading20px · 500 · 23px

Typography · BagossExtendedFont

display64px · 600 · 64px

display44px · 600 · 46px

Typography · BagossStandardVF

button15px · 500 · 24px

button16px · 500 · 27.2px

button14px · 500 · 23.8px

button12px · 500 · 20.4px

button24px · 440 · 31.2px

body16px · 500 · 27.2px

caption12px · 500 · 20.4px

body14px · 500 · 23.8px

heading34px · 400 · 54.4px

Typography · BagossStandardFont

h240px · 500 · 46px

heading16px · 500 · 18.4px

button14px · 500 · 20px

Spacing

12px

24px

8px

20px

16px

32px

4px

64px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(27, 27, 27, 0.05) 0px 1.2px 19.2px 0px, rgba(27, 27, 27, 0.16) 0px 9.6px 19.2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27, 0.05) 0px 2px 32px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(27, 27, 27, 0.04) 0px 8px 16px 0px, rgba(27, 27, 27, 0.04) 0px 2px 8px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 73, 157) 0px 0px 0px 3px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(27, 27, 27, 0.04) 0px 8px 16px 0px, rgba(27, 27, 27, 0.04) 0px 2px 8px 0px

Components · 5

Remixes of Deel

Latest remixes

No public remixes yet. Be the first to make one.

Remix it