CURATED · OPEN · FREE

Deel

A clean, structured SaaS platform for hiring, managing, and paying global teams.

fintechsaas

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://www.deel.com

📦 Browse pack contents →

Identity DNA

global workforcepayrollcomplianceplatform

A professional enterprise dashboard for global team management.

Color

#FAAF00Accent

#1B1B1BInk

#3B3B3BInk soft

#FFFFFFBG

#F7F5F2BG soft

#141414BG quiet

#888888Muted

rgba(0, 0, 0, 0.16)Line

Clean whitespace with high-contrast dark and light sections, grounded by a bright primary accent.

Typography

transitional-serif · humanist-sans · monospace

display56px · 560
heading36px · 500
body16px · 400
caption14px · 400

Headlines use a transitional serif font for premium weight. · Body text uses a highly legible humanist sans-serif. · Primary text color is a deep charcoal (#1B1B1B) rather than pure black.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

A consistent 4px base grid applied to padding, gaps, and margins.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

Minimal borders, using subtle shadows and color contrast to define surfaces.

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Multi-column hero transitioning into full-width dark and light content bands.

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth fill and color transitions on interactive elements. · Subtle hover transforms on buttons and links.

Subtle color shifts or opacity changes to indicate interactivity. · Immediate visual feedback through button press states.

Components

button Pill-shaped buttons with high contrast (white-on-black or black-on-white) and subtle border-radius.
card Subtly rounded containers with light shadows, often featuring a primary action or image.
chip Small rounded tags with icons for categorizing features (e.g., PEO, EOR).
input Clean form fields with clear labels and standard rounded borders.
hero Split layout with a large text block on the left and a lifestyle image on the right.

Voice & Don'ts

Tone Professional, authoritative, and direct.
Headlines Large, punchy statements that highlight core value propositions.
CTAs Action-oriented labels like 'Book a demo' or 'Learn more'.

Don't use bright neon colors — screenshot shows a grounded palette of black, white, and charcoal.
Don't use overly decorative scripts — screenshot shows a structured mix of transitional-serif and humanist-sans.
Don't use harsh pure black backgrounds — screenshot shows a soft charcoal (#141414) for dark mode sections.
Don't use sharp, rectangular buttons — screenshot shows highly rounded, pill-shaped buttons.
Don't use dense, cluttered grids — screenshot shows generous whitespace and clear sectioning.
Don't use thin, hard-to-read fonts — screenshot shows high-contrast, well-weighted typography.
Avoid: Avoid overly casual slang.
Avoid: Avoid cluttered layouts.
Avoid: Avoid neon or ungrounded color palettes.

Inside the pack — real screenshots

Deel — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Deel is a premium SaaS platform for global workforce management. Its design DNA is built on a clean, high-contrast palette of white, charcoal (#1B1B1B, #141414), and a distinctive golden accent (#FAAF00). Typography mixes a professional transitional-serif for bold headlines with a highly readable humanist-sans for body text. The layout is spacious, utilizing a 1280px container with generous whitespace and a 4px base grid. Interaction is refined, featuring pill-shaped buttons, subtle shadows, and smooth cubic-bezier transitions. Critical donts: avoid neon colors, avoid sharp rectangular buttons, and avoid dense, cluttered layouts.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko