# Deel · Design system migration spec

> Source: https://www.deel.com  ·  Curated by OpenDesign  ·  en

> The site is a prime example of a modern, professional B2B platform that balances authority with approachability.

## 1. Identity DNA

Deel's design system is architected as a professional enterprise dashboard for global team management. The identity is built on the core tension between clarity and authority—a system that must handle the complexity of international payroll while presenting itself as a clean, structured SaaS platform.

**One-liner:** A clean, structured SaaS platform for hiring, managing, and paying global teams.
**Keywords:** global workforce · payroll · compliance · platform
**Analogy:** A professional enterprise dashboard for global team management.

## 2. Color

The color system is a study in controlled contrast. A sophisticated palette of high-contrast white and charcoal backgrounds is grounded by a bright golden accent, creating clean whitespace with distinct light and dark sections.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F5F2` | card background |
| `--bg-quiet` | `#141414` | quiet area |
| `--ink` | `#1B1B1B` | body text |
| `--ink-soft` | `#3B3B3B` | secondary text |
| `--muted` | `#888888` | placeholder |
| `--muted-soft` | `#E5E5E5` | weak hint |
| `--accent` | `#FAAF00` | single accent |
| `--line` | `rgba(0, 0, 0, 0.16)` | divider |

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

The guiding principle is to use shadow and color contrast to define depth, reserving the primary accent for focused interaction points.

## 3. Typography

The typographic voice is one of professional authority and directness. A transitional serif font provides premium weight for headlines, while a highly legible humanist sans-serif ensures comfortable reading for body text.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 560 | -0.09px | Hero headlines |
| heading | 36px | 1.2 | 500 | 0px | Section headers |
| body | 16px | 1.5 | 400 | 0.18px | Paragraph text |
| caption | 14px | 1.6 | 400 | 0.24px | Small labels |

**Type rules:**
- 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.

## 4. Spacing

All spacing is governed by a consistent 4px base grid, applied uniformly to padding, gaps, and margins to create a predictable rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid applied to padding, gaps, and margins.

## 5. Surfaces

Surfaces are defined more by elevation than by borders. Two shadow values—a focused medium shadow and a broad, diffuse shadow—create a subtle sense of depth.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - rgba(27, 27, 27, 0.16) 0px 16px 32px 0px
  - rgba(27, 27, 27, 0.05) 0px 2px 32px 0px
- **Borders:** Minimal borders, using subtle shadows and color contrast to define surfaces.

## 6. Layout

The layout skeleton begins with a split multi-column hero, establishing a strong left-right text-and-image divide. This transitions into full-width dark and light content bands that create clear horizontal separation between sections.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion in this system is refined and understated, serving feedback rather than decoration. Interactions feature smooth fill and color transitions on elements, with subtle hover transforms on buttons and links.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fill and color transitions on interactive elements.
  - Subtle hover transforms on buttons and links.

- **Hover:** Subtle color shifts or opacity changes to indicate interactivity.
- **Click:** Immediate visual feedback through button press states.
- **Transition:** Consistent use of ease-in-out timing for standard UI updates.
- **Keyboard:** Full accessibility support with visible focus indicators.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and direct. Large, punchy headlines highlight core value propositions with action-oriented labels for calls to action.

- **Tone:** Professional, authoritative, and direct.
- **Headline style:** Large, punchy statements that highlight core value propositions.
- **CTA style:** Action-oriented labels like 'Book a demo' or 'Learn more'.
- **Avoid:** Avoid overly casual slang. / Avoid cluttered layouts. / Avoid neon or ungrounded color palettes.

### Don'ts
- ❌ 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.

The system deliberately avoids cluttered layouts, neon or ungrounded color palettes, and overly decorative scripts to maintain its clean, structured integrity.

## System Prompt (paste into AI tool)

```
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.
```