Deel DESIGN.md

Global HR and payroll design with bold blue identity, compliance-forward surfaces, clean data tables, and multi-currency clarity.

1. Visual Theme & Atmosphere

Deel should feel global, reliable, and professional. The design language communicates international contractor payments, EOR, compliance, and payroll across 150+ countries.

• Mood: professional, global, reliable, modern
• Density: medium-to-high, with worker tables, contract flows, and payroll summaries
• Character: bold blue brand, clean white workspace, global flag accents, compliance green

2. Color Palette & Roles

Use blue for all primary actions. The green/amber/red compliance scale must be used consistently — compliance states are the most critical visual signal in the product.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #0052CC;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.worker-card {
  border: 1px solid #DFE1E6;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.compliance-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 12px/1.4 Inter, sans-serif;
}

.country-flag {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}

5. Layout Principles

Worker/contractor tables are the primary view. Filter by country, contract type, and status should be always visible in a left panel.

6. Depth & Elevation

css.shadow-card   { box-shadow: 0 1px 4px rgba(23, 43, 77, 0.08); }
.shadow-panel  { box-shadow: 0 8px 24px rgba(0, 82, 204, 0.10); }
.shadow-modal  { box-shadow: 0 20px 50px rgba(23, 43, 77, 0.18); }

Tables and worker cards use minimal shadow. Payment confirmation modals use stronger elevation.

7. Do's and Don'ts

Do always show the worker's country flag alongside their name. Do use mono font for all currency values. Do make compliance status immediately visible — it is never secondary. Do not abbreviate country names in compliance views. Do not bury the payroll run action.

8. Responsive Behavior

Desktop is the primary surface for HR managers. Mobile for workers checking payment status.

9. Agent Prompt Guide

Design like Deel: bold blue CTAs, dark sidebar navigation, dense worker tables, country flags, mono currency values, compliance-state color coding, and global payroll hierarchy.