Deel

Overview

Deel is a global people platform designed for enterprises managing distributed workforces across 150+ countries. The design system embodies 'Enterprise Clarity'—a movement that prioritizes functional elegance over decorative complexity, using a deep purple hero canvas (#201547) paired with crisp white surfaces and purposeful accent colors. The UI evokes confidence and control: users feel they are orchestrating global operations with precision and ease. The brand personality is direct, solution-focused, and internationally minded. Deel speaks in active verbs and concrete outcomes: 'Run payroll in 150+ countries,' 'Approve contractors in seconds,' 'Ensure compliance automatically.' The tone avoids jargon while maintaining professional authority. Example sentence: 'Your entire global team—hired, paid, and equipped—on one platform.'

Colors

The color system is anchored by a sophisticated dark neutral primary (#1B1B1B) used for body text, CTAs, and primary interactive elements, paired with a vibrant secondary purple (#5938B7) that signals brand identity and highlights key actions. The hero section employs a deep purple background (#201547 to #1A0F36 gradient) to create visual drama and focus, while the supporting palette includes a warm accent yellow (#FFCF25) for highlights and status indicators, a cool blue (#B1D8FC) for informational elements, and a soft lavender (#D6C9FD) for secondary containers. Surface colors follow a clean hierarchy: pure white (#FFFFFF) for primary surfaces, light gray (#F2F2F2) for subtle containers, and mid-gray (#E6E6E6) for dividers. Error states use a warm red (#F95250) with a soft error-containe

Typography

The type system uses three distinct font families to create visual hierarchy and brand personality. BagossCondensedFont (500 weight, -0.02em letter-spacing) powers display and headline layers, delivering a modern, slightly geometric aesthetic that feels contemporary and confident. BagossStandardVF (500 weight) bridges headlines and body copy with a more approachable, humanist character. Inter (400–600 weight) handles all body, label, and UI text, providing excellent legibility at small sizes and a neutral, professional foundation. Display text (60px, 68px line-height) is reserved for hero headlines and major section breaks; headline-lg (48px) for subsection titles; headline-md (32px) for card titles and feature headers. Body-lg (18px, 28px line-height) is used for introductory paragraphs a

Layout

The layout system uses a 12-column grid with a max-width of 1312px, centered on the viewport with 64px horizontal padding on desktop (24px on tablet). The page rhythm alternates between full-width hero sections (often with gradient backgrounds) and contained content sections using the full container width. Vertical spacing follows the semantic scale: lg spacing (40px) separates major sections; md spacing (24px) divides subsections and card groups; sm spacing (12px) creates breathing room between list items and inline elements. The hero section occupies the full viewport height with a deep purple gradient background, white headline text (60px, BagossCondensedFont), and a two-column layout on desktop (left: text and CTAs; right: product imagery or illustration). Below the fold, content secti

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than dramatic elevation. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the white background. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and floating elements to create gentle separation from the background. Level 3 (Elevated/Hover States): box-shadow: 0 4px 8px rgba(0, 0, 8, 0.08), used when cards are hovered or when modals are stacked. The hero section uses no shadow but achieves depth through a gradient background (from #201547

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften hard edges and improve usability without sacrificing clarity or modernity. Buttons and primary interactive elements use full-radius (200px / border-radius: 50%) to create pill-shaped affordances that feel approachable and clickable. Cards and containers use lg radius (16px) for a modern, slightly rounded appearance that avoids the sterile feel of sharp corners while maintaining a professional aesthetic. Input fields and form elements use full-radius (200px) to match button styling and create a cohesi

Components

Action Elements Buttons are the primary call-to-action mechanism and use two distinct styles. Primary buttons (white background, #FFFFFF, with dark text #1B1B1B) are used for main CTAs like 'Book a demo' and 'Get started'; they employ full-radius (200px), 12px vertical padding, 24px horizontal padding, and label-md typography (14px, 600 weight). On hover, the background shifts to #E6E6E6 with a 200ms ease-out transition. Secondary buttons (dark background #1B1B1B, white text) are used for supporting actions and employ the same full-radius but with reduced padding (8px vertical, 16px horizontal) and label-md typography. Ghost buttons (transparent background, dark text, 1px border in outline-variant #A9A9A9) are used for tertiary actions; on hover, they gain a subtle background color (#F

Do's and Don'ts

**Do**

• Do use the deep purple secondary color (#5938B7) sparingly for focus states, active navigation items, and brand-critical highlights—it should feel like a deliberate accent, not a background wash.
• Do maintain 24px (md spacing) as the default vertical rhythm between sections and 12px (sm spacing) between related elements within a section.
• Do apply full-radius (200px) consistently to all primary buttons and input fields to create a cohesive, recognizable interaction pattern.
• Do use BagossCondensedFont for headlines and display text to signal importance and create visual hierarchy; reserve Inter for body and UI text.
• Do pair white CTAs on dark backgrounds with a 200ms hover transition to #E6E6E6 to provide clear, responsive feedback.
• Do use the shadow system (md: 0 3px 8px rgba(0, 0, 0, 0.15)) to separate cards from the background without creating visual clutter.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) as primary text colors; use #1B1B1B for dark text and rgba(255, 255, 255, 0.95) for light text to reduce eye strain.
• Don't apply border-radius to full-width hero sections or background containers; keep edges sharp to maintain a clean, intentional aesthetic.
• Don't mix font families within a single headline or button label; use BagossCondensedFont for display/headlines and Inter for everything else.
• Don't use the secondary purple (#5938B7) as a background color for large content areas; reserve it for accents, focus states, and small UI elements.
• Don't apply multiple shadows or layered elevation effects; use the three-level shadow system (none, md, lg) consistently.
• Don't reduce padding below 12px (sm spacing) on interactive elements; maintain minimum touch targets of 48px height for buttons and 44px for inputs.