---
title: "Deel design system"
variant: extended
source: https://www.deel.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/deel-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Deel · Design System

> Confident global SaaS, softened by human warmth

**Theme:** light · **Industry:** saas · **Source:** https://www.deel.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Deel pairs a clean white canvas and expressive condensed headlines with a vivid purple hero and product-led imagery. Broad white intervals keep a long SaaS homepage legible, while a dark, information-dense footer closes the experience.

## North star

Keep the interface quiet and spacious, then use one confident purple, media-rich split hero to make the product feel human and capable.

## Overview

The page establishes a bright, white foundation, with near-black text and restrained pale borders keeping navigation and long-form content calm. Its opening hero is the visual exception: a rounded, two-part composition pairs a deep purple gradient and large white headline with a lifestyle photograph overlaid by payroll and visa interface cards. Purple also marks interactive product choices, but the purple and blue tones inside screenshots, customer logos, and photography should be treated as media content rather than a reason to recolor the whole interface. Bagoss Condensed gives headlines a distinctive, compact silhouette; Inter handles navigation, body copy, and utility text, while Bagoss Standard appears on buttons. The main content alternates spacious white sections, pale product cards, and a large charcoal product showcase. A centered metrics block creates a simple pause before the dense dark footer. Rounded cards and pill controls soften the otherwise crisp grid; subtle shadows are reserved for layered interface elements.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header, hero media backdrop, and the broad open intervals between content sections. |
| Muted Plum | `#372d5a` | `--color-muted-plum` | brand | Measured button-border color; a supporting dark purple rather than the main page canvas. |
| Soft Ink | `#1b1b1b` | `--color-soft-ink` | neutral | Primary text and dark surfaces, including the announcement strip and footer-adjacent review area. |
| Slate Copy | `#5f5f5f` | `--color-slate-copy` | neutral | Muted body text and supporting copy against the white canvas. |
| Deel Violet | `#5938b7` | `--color-deel-violet` | brand | Hero gradient and select cards or calls to action; the page’s principal purple signal. |
| Warm Ash | `#d9d4cf` | `--color-warm-ash` | neutral | Muted text detected in footer-related content; use only where secondary contrast is needed on dark surfaces. |
| Linen Tint | `#faf4ee` | `--color-linen-tint` | surface | Warm pale surface and footer-related text color in measured elements; a subtle contrast to white. |
| Night Charcoal | `#141414` | `--color-night-charcoal` | surface | Near-black card and heading surfaces in dark product and footer areas. |
| Midnight Violet | `#201148` | `--color-midnight-violet` | surface | Deep purple surface used in a dark feature card; keep it localized rather than page-wide. |
| Quiet Rule | `#dadada` | `--color-quiet-rule` | semantic | Measured border color for subtle dividers and outlined controls on light surfaces. |
| Graphite Line | `#3f3e3d` | `--color-graphite-line` | semantic | Dark border detail detected around button and footer elements. |
| Warm Gray | `#aca8a4` | `--color-warm-gray` | neutral | Secondary text tone, appropriate for low-emphasis copy on dark or warm surfaces. |
| Silver Rule | `#cccccc` | `--color-silver-rule` | semantic | Minor measured border detail; use sparingly for secondary separators. |
| Deep Graphite | `#272727` | `--color-deep-graphite` | surface | Small dark section and media-adjacent surface, not a defining page-wide color. |
| Media Black | `#030303` | `--color-media-black` | semantic | Appears in media content; do not use as a primary brand surface based on this measurement. |
| Lilac Glow | `#d6c9fd` | `--color-lilac-glow` | accent | Light purple gradient detail detected in accent artwork; keep localized to gradient treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1b1b1b` (Soft Ink) · `--color-surface-2` → `#141414` (Night Charcoal) · `--color-surface-3` → `#faf4ee` (Linen Tint) · `--color-surface-4` → `#201148` (Midnight Violet) · `--color-text` → `#1b1b1b` (Soft Ink) · `--color-text-muted` → `#5f5f5f` (Slate Copy) · `--color-text-subtle` → `#d9d4cf` (Warm Ash) · `--color-border` → `#dadada` (Quiet Rule) · `--color-accent` → `#5938b7` (Deel Violet) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b1b1b` | `#ffffff` | 17.22:1 | AAA |
| `#1b1b1b` | `#141414` | 1.07:1 | fail |
| `#1b1b1b` | `#faf4ee` | 15.78:1 | AAA |
| `#5f5f5f` | `#ffffff` | 6.39:1 | AA |
| `#5f5f5f` | `#1b1b1b` | 2.7:1 | fail |
| `#5f5f5f` | `#141414` | 2.89:1 | fail |
| `#5f5f5f` | `#faf4ee` | 5.85:1 | AA |
| `#d9d4cf` | `#ffffff` | 1.47:1 | fail |
| `#d9d4cf` | `#1b1b1b` | 11.7:1 | AAA |
| `#d9d4cf` | `#141414` | 12.52:1 | AAA |

### Gradients

- `linear-gradient(118deg, rgba(89, 56, 183, 0) 48.33%, rgb(89, 56, 183) 92.96%), none`
- `linear-gradient(109deg, rgb(214, 201, 253) 28.2%, rgb(181, 156, 247) 100%)`
- `linear-gradient(to right, rgb(255, 255, 255) 0px, oklab(0.999994 0.0000455677 0.0000200868 / 0.7) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, rgb(255, 255, 255) 0px, oklab(0.999994 0.0000455677 0.0000200868 / 0.7) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700, 560, 500 | Navigation, body and caption copy, utility labels, and most interface text. | Inter |
| BagossCondensedFont | `--font-display` | webfont | 500, 400 | Display and page headings, including the prominent hero headline. | Barlow Condensed |
| BagossStandardVF | `--font-bagossstandardvf` | webfont | 500 | Button labels and selected short action text. | Inter |

- **Inter:** Measured weights span regular through bold; compact tracking for body and captions, with uppercase bold eyebrow labels.
- **BagossCondensedFont:** Medium-weight, condensed display character; measured headings use tight tracking and sentence case.
- **BagossStandardVF:** Medium-weight standard sans style; button lettering uses slightly open tracking and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.442, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.05 | -0.003em | — | BagossCondensedFont | Large condensed statements and standout section headings. |
| h1 | 44px | 500 | 1.05 | -0.005em | — | BagossCondensedFont | The split-hero headline introducing Deel’s global workforce platform. |
| h2 | 24px | 500 | 1.15 | 0 | — | BagossCondensedFont | Section headings for product, reviews, and supporting content. |
| body | 20px | 400 | 1.6 | -0.01em | — | Inter | Descriptive copy, product explanations, and supporting hero text. |
| caption | 16px | 400 | 1.7 | -0.005em | — | Inter | Small card details, testimonials, and secondary information. |
| button | 15px | 500 | 1.6 | 0.025em | — | BagossStandardVF | Short action labels such as Book a demo. |
| nav | 14px | 600 | 1.7 | 0 | — | Inter | Header navigation and page-level menu labels. |
| eyebrow | 12px | 700 | 1.7 | 0.06em | uppercase | Inter | Uppercase section markers and compact category labels. |

OpenType features in use: `"ss01"`, `"ss02"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 4px · card padding 20px · max content width 1312px.

The page uses a centered, wide content frame measured at a 1312px maximum, with a comfortable density and clear section breaks. The hero is a broad two-column split: text and action tiles on the left, photographic product proof on the right. Below it, a logo cloud and product grid give way to centered product storytelling, reviews, and statistics. The footer is a dark, multi-column information area. Preserve the generous white intervals and align repeated content to consistent edges rather than compressing every section.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · media `24px` · nav `2px` · link `16px` · xs `4px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `xl` (other): `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)`
- Shadow `lg` (other, card): `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.`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Most sections are flat, with whitespace doing the work of separation. Use fine measured gray borders where controls need definition and reserve soft layered shadows for floating interface or media elements. Cards and media have generous rounding; the hero’s gradient and image carry more visual depth than ornamental shadows.

## Imagery

Lead with human workplace photography paired with floating payroll, currency, and visa interface cards. Product imagery elsewhere is presented in pale rounded cards and a large dark product-showcase band; customer logos and testimonial video thumbnails add proof. Keep photography natural and spacious, and let overlaid interface details remain legible. Purple and blue colors inside interface mockups or photos belong to the imagery, not necessarily to the surrounding UI palette.

## Components

### Announcement and navigation

A dark offer strip sits above a white navigation row. Keep the announcement compact, with a contrasting claim action and a separate dark pill-shaped demo action in the header.

### Split hero

Pair a rounded purple-gradient text panel with a rounded workplace photo. Set the condensed white headline above selectable action tiles and a prominent white demo button.

### Hero action tiles

Present task choices as outlined, translucent tiles with small icon marks and concise labels. Keep them grouped beneath the supporting prompt, inside the hero panel.

### Customer logo cloud

Follow the hero with a compact trust statement and a horizontal field of customer marks on white; keep logos secondary and visually quiet.

### Product card grid

Use a two-row product overview with pale, rounded cards, concise titles, short descriptions, and interface imagery contained within each card.

### Product showcase

Create a large rounded charcoal section with a heading, short proof points, and expansive product imagery; use dark-on-dark panels as supporting content.

### Footer

Use a near-black full-width area for reviews, grouped navigation links, newsletter signup, and legal details, with subdued warm-gray secondary text.

### Measured component styles

- **Primary button** (“175 STORIES Read about real results”): background #5938b7 · text #0000ee · radius 100px · padding 8px 16px 8px 8px · 400 16px Inter
- **Secondary button** (“Hire anywhere”): transparent background · text #ffffff · border 1px solid #372d5a · radius 12px · padding 12px · 600 14px Inter
- **Link** (“Deel Payroll Local and global payroll, y”): background #f7f5f2 · text #0000ee · radius 16px · padding 24px · 400 16px Inter
- **Input**: background #ffffff · text #000000 · border 2px solid #1b1b1b · radius 200px · padding 1px 54px 1px 24px · 460 16px Inter
- **Card** (“Set up payroll countries and owners”): background #d8ebff · text #000000 · radius 12px · padding 20px · 400 16px Inter
- **Navigation item** (“SPECIAL OFFER Get 3 months free of PEO* ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the main canvas white and content areas visibly separated by whitespace.
- Use Bagoss Condensed-style typography for high-impact headings.
- Reserve Deel Violet for focal accents and localized gradient surfaces.
- Pair product interface mockups with human-centered photography.
- Use near-black surfaces for the footer and selected product storytelling.
- Keep controls rounded and labels concise.

## Don't

- Do not turn the whole page purple or dark.
- Do not treat colors inside photos and product mockups as global UI colors.
- Do not crowd the large white intervals between homepage sections.
- Do not use generic geometric sans headlines in place of the condensed display voice.
- Do not add decorative shadows to every card.
- Do not make the footer visually as light as the main canvas.

## Agent prompt

Build a new Deel-style SaaS page with a Gallery White (#ffffff) foundation, Soft Ink (#1b1b1b) text, and restrained Quiet Rule (#dadada) borders. Use Deel Violet (#5938b7) for a localized gradient focal area, not as a blanket background. Set display headlines in a Bagoss Condensed-like face and use Inter for navigation, body, and supporting labels. Organize the page with a clear header, a human-centered split hero, compact product cards, spacious proof sections, and a deep charcoal footer. Combine real workplace photography with legible product-interface overlays; keep interface mockup colors local to their imagery. Favor rounded panels, pill actions, and flat surfaces, adding soft depth only to layered media or UI. Keep sections calm, aligned, and generously separated.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Dark announcement strip above a white horizontal navigation row. | Claim offer action, Persistent primary demo action | Dark offer band, Logo and menu links, Pill CTA |
| 2 | hero | Wide split hero with a purple text panel beside a workplace photo. | Choose a workforce task, Book a demo | Condensed headline, Action tiles, Floating product cards, Review proof |
| 3 | logo-cloud | Trust statement and customer marks arranged across a white band. | Social proof, Read customer stories | Small trust label, Horizontal logo field, Story CTA |
| 4 | stats | Centered headline above four evenly grouped metrics and a demo action. | Scan proof metrics, Book a demo | Large bold numerals, Compact labels, Pill CTA |
| 5 | footer | Full-width dark footer with review content, grouped link columns, signup, and legal row. | Browse topic links, Subscribe to updates | Dark review band, Multi-column navigation, Pill email field |

## Source CSS custom properties (selected)

```css
--font-inter: 'Inter','Inter Fallback',Arial,Helvetica,sans-serif;
--font-bagoss-condensed: 'BagossCondensedFont','BagossCondensedFont Fallback',Arial,Helvetica,sans-serif;
--font-bagoss-standard: 'BagossStandardVF','BagossStandardVF Fallback',Arial,Helvetica,sans-serif,Arial,Helvetica,sans-serif;
--font-bagoss-extended: 'BagossExtendedFont','BagossExtendedFont Fallback',Arial,Helvetica,sans-serif;
--font-bagoss-standard-vf: 'BagossStandardVF','BagossStandardVF Fallback',Arial,Helvetica,sans-serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/deel-com