Deep Cosmos
#201547Hero section background — the darkest brand surface, houses white headlines and violet accent text
Deel
deel.comWebsite preview
The design language
Deel operates in contrasting registers — a deep purple-black (#201547) hero punched through with electric yellow-green product shots, then a cream-warm (#fffbf4) body that stretches through the rest of the page. The dual-zone layout is the signature move: dark/vivid left panel with serif-weight condensed Bagoss headlines, fluorescent product imagery on the right, then warmth and space below. Accent violet (#a98df6 to #5938b7) appears only within the dark hero for the word 'anywhere.' and CTAs — never in the light body sections. Pill-shaped buttons (200px radius) coexist with 24px-radius cards, creating a soft geometry throughout. The custom Bagoss family — in Condensed, Extended, Standard, and VF cuts — gives the brand typographic range unavailable through any system font.
Color palette
brand
Violet Mid
#5938b7CTA buttons in hero context, pill backgrounds — saturated mid-violet bridges cosmos and accent
Lavender Pulse
#a98df6Headline accent text ('anywhere.') in dark hero — vivid violet pops against #201547
Pale Amethyst
#c4b1f9Soft violet surface tint, used as background on secondary dark panels
Indigo Shadow
#381f89Deep violet body text or decorative elements within dark sections
accent
Electric Lime
#ffcf25Product screenshot accent, border highlights — the neon counterpoint to deep purple creating visual tension
Amber Core
#faaf00Icon fills and body-level accent color in light sections — warm, confident
Butter Glow
#ffe27cLight amber for icon strokes, decorative fills — softer version of Amber Core
Sky Mist
#d8ebffButton and panel backgrounds in light sections — very pale blue-gray tint
Powder Blue
#b1d8fcUI illustration fill in product screenshots
neutral
Midnight Ink
#000000Primary text, icon fills, borders — near-universal dark token
Graphite
#1b1b1bBody text, nav labels, CTA button background (dark pill), footer text
Obsidian
#141414Dark section backgrounds, deepest surface in light-theme stacks
Charcoal
#404040Mid-dark surface, secondary panel backgrounds
Slate
#5f5f5fSecondary body text, metadata, captions
Fog
#767676Tertiary text, muted labels
Ash
#a4a4a4Disabled states, light icon tones
Bone
#dbdbdbBorder separators, input outlines, card dividers
Linen
#d9d0caWarm-toned rule lines and subtle separators in cream body sections
Warm Cream
#fffbf4Page body background — warm off-white gives light sections a tactile, paper-like quality vs pure white
Pure White
#ffffffCard surfaces, nav background, input backgrounds, button text on dark
Near Black
#101828High-contrast body text alternative to pure black
semantic
Celadon Check
#53a945Success state chip background (e.g. green checkmark on Crypto selection chip)
Typography
Type scale
Minor Third (1.2) · 24px basedisplay
64px · 600 · 1 · 0.32px trackingThe quick brown fox jumps
heading-lg
60px · 500 · 1 · -0.3px trackingThe quick brown fox jumps
heading
44px · 500 · 1.05 · -0.22px trackingThe quick brown fox jumps
text-30
30px · 600 · 1.2The quick brown fox jumps
text-28
28px · 500 · 1.5The quick brown fox jumps
heading-sm
24px · 400 · 1.2The quick brown fox jumps
text-20
20px · 400 · 1.6The quick brown fox jumps
subheading
18px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
BagossCondensedFont
- Weights
- 500
- Sizes
- 16px, 24px, 28px, 44px, 60px
- Line height
- 1.00–1.15
- Letter spacing
- -0.005em
- Features
- "ss01" on, "ss02" on
Primary display and hero headlines — the condensed cut lets oversized text fill wide containers without breaking; the -0.005em tracking tightens the text mass. This is Deel's most distinctive typographic voice: large, dense, confident headlines that compress horizontal space.
Additional typeface
BagossExtendedFont
- Weights
- 600
- Sizes
- 30px, 64px
- Line height
- 1.00–1.20
- Letter spacing
- 0.005em
- Features
- "ss02" on
Section headers where width is the feature — extended cut fills horizontal space at large sizes, used for spread-out banner headlines like 'The Global People Platform'
Additional typeface
BagossStandardFont
- Weights
- 500, 600
- Sizes
- 12px, 14px, 16px
- Line height
- 1.50–1.70
- Letter spacing
- 0.015em
- Features
- "ss02" on, "ss01" on
UI labels, badge text, small captions — the workhorse standard cut at utility sizes
Additional typeface
BagossStandardVF
- Weights
- 500
- Sizes
- 15px
- Line height
- 1.60
- Letter spacing
- 0.025em
- Features
- "ss02" on, "ss01" on
Navigation items and button labels — variable-font version allows optical tuning at this critical interactive size
Additional typeface
Inter
- Weights
- 400, 460, 500, 560, 600, 700
- Sizes
- 10px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 60px
- Line height
- 1.40–1.60
- Letter spacing
- varies: -0.01em at large sizes, +0.006em to +0.025em at small sizes, +0.06em for all-caps labels
- Fallback
- Inter (Google Fonts)
- Features
- "ss01" on, "ss02" on
All body copy, subheadings, stats, footer text, input values — Inter handles everything below headline level. The wide weight range (400–700) creates internal hierarchy without switching families. ss01/ss02 features keep it feeling designed rather than default.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80-120px
- Card padding
- 24px
- Element gap
- 8-16px
Border radius
tags
200pxcards
24pxchips
100pxicons
5pxinputs
200pxpanels
12pxbuttons
200pxbuttonsMedium
16pxSpacing scale
1px2px4px5px6px7px8px10px11px12px14px16px20px24px25px28px32px40px48px57px60px64px80px96px128pxGuidelines
Do
- Use BagossCondensedFont at 44-60px weight 500 with -0.005em letter-spacing for all primary hero headlines inside dark (#201547) sections.
- Apply 200px border-radius to all pill buttons, search inputs, and currency chips — this is the system's defining shape token.
- Use #fffbf4 (Warm Cream) as the page body background, never pure white (#ffffff), for all light-theme content sections below the hero.
- Accent the single most emotionally charged word in each hero headline with #a98df6 (Lavender Pulse) — one word only, never a phrase.
- Pair dark (#141414 or #201547) section backgrounds with Inter body text in #d9d0ca (Linen) — not pure white — for softer contrast on extended reading.
- Use rgba(27,27,27,0.16) as the standard border color for inputs and card outlines in light sections — never a solid opaque gray.
- Reserve #ffcf25 (Electric Lime) strictly for product screenshots and graphic accents — never apply it as a button or text color.
Don’t
- Don't use BagossCondensedFont below 16px — at small sizes switch to BagossStandardFont or Inter for legibility.
- Don't use 8px or 16px border-radius on primary CTA buttons — those radii belong only to secondary badges and icon containers.
- Don't use #5938b7 (Violet Mid) or any saturated violet in light (cream) body sections — violet is hero-zone-only.
- Don't apply box shadows to feature product cards — the system uses border (1px #dbdbdb) as the only card boundary in light sections; shadows appear only on floating overlays.
- Don't mix BagossExtendedFont and BagossCondensedFont in the same heading — choose one cut per section based on available width.
- Don't use pure white (#ffffff) as the page background — the system's warm cream (#fffbf4) distinguishes Deel's light theme from generic white-page SaaS.
- Don't apply letter-spacing to BagossCondensedFont display headlines — the -0.005em is already set; adding positive tracking breaks the compressed silhouette.
Components
Hero CTA Button Group
Feature Product Cards
Dark Stat Callout Row
Dark Hero CTA Button
Primary call-to-action within the dark hero panelPill-shaped button (200px radius), background #5938b7, white text, Inter or BagossStandardVF 15px weight 500, padding 8px 16px. Small right-facing arrow icon. On #201547 backgrounds only.
Ghost Pill Navigation Button
Nav items with dropdown indicatorsTransparent background, #1b1b1b text, 200px border-radius, padding 8px 12px, BagossStandardVF 15px weight 500, letter-spacing 0.025em. Includes chevron icon at 12px. No border in default state.
Dark Filled Pill Button
'Book a demo' CTA in the top navBackground #1b1b1b, white text, 200px border-radius, padding 8px 16px, BagossStandardVF 15px weight 500. The highest-contrast nav element — only solid-fill nav button.
Ghost Underline Button
Text-level inline CTAs like 'Learn more →'Transparent background, #1b1b1b text, no border-radius (0px), padding 8px 0px, no horizontal padding. Arrow character appended. Signals navigation without visual weight.
Pill Input with Search
Search and email capture fieldsBackground #ffffff, border rgba(27,27,27,0.16) 1px, border-radius 200px, padding 1px 54px 1px 24px. Right-side icon or button inset at 54px. Inter 14px weight 400 placeholder text in #767676.
Feature Product Card
Product feature cards (Deel Payroll, Deel HR, Deel IT)Background #fffbf4 (warm cream), border-radius 24px, no shadow, padding 24px. Contains a bold label in BagossCondensedFont 24px weight 500, descriptor in Inter 16px weight 400 #5f5f5f, and a product screenshot cropped at bottom. Border: 1px solid #dbdbdb.
Dark Stats Panel
Stat callout panels on dark background sectionsBackground rgba(255,255,255,0.05) — frosted white tint at 5% on dark surfaces. Border-radius 24px. No shadow. Contains bold stat in BagossCondensedFont 44px weight 500, descriptor in Inter 15px #d9d0ca.
Currency Selection Chip
Illustrative UI chips showing selectable options (ARS, CAD, USD, etc.)Background #ffffff or rgba(255,255,255,0.9), border 1px solid #dbdbdb, border-radius 200px, padding 8px 16px. Flag emoji + currency code in Inter 16px weight 500 #1b1b1b. Active state adds green checkmark badge (#53a945).
Customer Logo Badge
Testimonial attribution chip (e.g. Robinhood badge on carousel)Background #ffffff, border-radius 16px, padding 6px 12px, contains company logo image at 16px height + company name in Inter 13px weight 500 #1b1b1b. Subtle box-shadow: rgba(27,27,27,0.16) 0px 16px 32px.
Trust Logo Strip
Social proof logo row below heroFlat company wordmarks rendered in #a4a4a4 or #dbdbdb on #ffffff background. 16px vertical spacing between label ('TRUSTED BY 40,000+...') and logos. Labels use Inter 10px weight 600 letter-spacing 0.06em in Slate. Logos at approximately 80px wide, 24px tall.
Section Eyebrow Label
Pre-heading category label (e.g. 'WHAT DEEL DOES')Inter 12px weight 600, letter-spacing 0.06em, all-caps, color #5f5f5f. No background. Left-aligned above the section heading. Creates category context without visual mass.
Stat Callout Row
Three-column feature stat blocks in dark sectionsDark background (#141414 or #1b1b1b), three equal columns each with bold lead text in BagossCondensedFont 24px weight 500 #ffffff, body in Inter 15px weight 400 #d9d0ca. 'Learn more →' or 'Book a demo →' ghost links at bottom of each column.
Hero Split Panel
Primary homepage hero containerLeft panel: background #201547, padding 64px 48px. Right panel: background vivid product image with #ffcf25 accent border elements, no padding. Two-column 50/50 split at viewport width. Left contains BagossCondensedFont 60px headline in #ffffff with 'anywhere.' in #a98df6.
Surfaces & elevation
Level 1
Warm Cream Page
#fffbf4Base page background for all light-theme content sections
Level 2
Pure White Card
#ffffffCard surfaces, nav bar, input backgrounds elevated above cream
Level 3
Deep Cosmos Hero
#201547Hero left panel — deepest dark surface, maximum brand presence
Level 4
Dark Feature Band
#141414Near-black bands for stat/feature sections on dark alternating zones
Level 5
Frosted Glass
#ffffffrgba(255,255,255,0.05) overlay tint on dark surfaces for card differentiation without opacity loss
Deel uses borders, not shadows, as the primary card boundary language in light sections — 1px solid #dbdbdb or rgba(27,27,27,0.16) defines card edges. The single shadow value (16px/32px spread with dual-layer rgba(27,27,27)) is reserved exclusively for floating UI elements like testimonial badges and product chips that need to appear physically lifted above a photo background.
Floating Overlay Card (testimonial badge, currency chip group)
rgba(27, 27, 27, 0.16) 0px 16px 32px 0px, rgba(27, 27, 27, 0.05) 0px 2px 32px 0px
Layout & imagery
Layout
Max-width approximately 1280px centered, but the hero breaks this rule — it runs full viewport width as a 50/50 split: left panel (#201547) contains text + CTA, right panel is full-bleed product imagery with no padding. Below the hero, content resets to max-width contained with 80-120px vertical section gaps. Sections alternate: white/cream light bands with card grids (3-column feature cards), then full-width dark (#141414) bands with 3-column stat rows, then a full-bleed photo section with floating UI chips overlaid. Navigation is a fixed top bar — pure white background, logo left, dropdown nav center, language + log in + CTA pill right. Hero is not full-viewport-height but a defined panel (~480px). The brand logo section (trust strip) uses a horizontal scrolling row of gray logos on white, 2 rows, separated by a light rule. Feature product cards use a 3-column equal grid with 16px gaps.
Imagery
Deel mixes two distinct image registers: dark-panel graphic design (geometric yellow-green forms as abstract background shapes on the right hero panel, pure graphic, no photography) and real-world lifestyle photography (hands holding a purple iPhone over a table with an orange mug — warm, candid, slightly editorial). Product screenshots are rendered as phone mockups or flat UI crops embedded in cards, contained with 24px radius. The hero right panel uses a dramatic high-contrast shot — black angular shapes over electric yellow-green (#ffcf25), iPhone floating in front — this is purely product showcase, not human context. Below the hero, photography shifts to warm, natural-light scenes that feel ambient rather than staged. Icons are outlined, monochrome (#1b1b1b or white depending on surface), consistent 16-20px stroke-weight SVGs. Customer logos are rendered as flat gray silhouettes at reduced opacity to avoid visual competition. The overall ratio is approximately 40% imagery, 60% text+UI.
Design notes
Agent Guide
**Quick Color Reference** - Text (primary): #1b1b1b - Page background (light): #fffbf4 - Hero background: #201547 - CTA button (dark): #1b1b1b - CTA button (violet, hero): #5938b7 - Accent headline: #a98df6 - Border / divider: rgba(27,27,27,0.16) - Secondary text: #5f5f5f **Example Component Prompts** 1. **Hero Section (dark left panel):** Full-viewport-width, 50/50 split. Left: #201547 background, padding 64px 48px. Headline in BagossCondensedFont 60px weight 500, #ffffff, line-height 1.00, letter-spacing -0.005em — final word 'anywhere.' in #a98df6. Subtext Inter 17px weight 400 #d9d0ca. Pill CTA: background #5938b7, white text, 200px radius, padding 8px 16px, BagossStandardVF 15px. Right: full-bleed product photo, no padding. 2. **Feature Product Card (3-column grid):** Background #fffbf4, border 1px solid #dbdbdb, border-radius 24px, padding 24px. Title: BagossCondensedFont 24px weight 500 #1b1b1b. Description: Inter 16px weight 400 #5f5f5f. Product screenshot image cropped at card bottom. 3. **Dark Stat Row Section:** Background #141414, full width. Three equal columns, 48px vertical padding, 80px horizontal. Each column: stat headline BagossCondensedFont 44px weight 500 #ffffff, descriptor Inter 15px weight 400 #d9d0ca, ghost CTA 'Learn more →' Inter 14px #a98df6 below. 4. **Top Navigation Bar:** Background #ffffff, height 64px, 1280px max-width centered. Logo left (Deel wordmark, #1b1b1b). Center: Ghost pill nav items (200px radius, 8px 12px padding, BagossStandardVF 15px #1b1b1b) with chevron. Right: 'Log in' ghost button + 'Book a demo' filled dark pill (#1b1b1b bg, #ffffff text, 200px radius, 8px 16px padding). 5. **Currency Selector Chip:** Background #ffffff, border 1px solid #dbdbdb, border-radius 200px, padding 8px 16px. Flag icon 20px + currency code Inter 16px weight 500 #1b1b1b. Active state: green badge (#53a945) checkmark at trailing edge.
Bagoss Typeface System
Deel uses a proprietary 4-cut type family (BagossCondensedFont, BagossExtendedFont, BagossStandardFont, BagossStandardVF) as its typographic identity. Each cut has a defined role: Condensed at 44-60px for compressed hero headlines; Extended at 64px for wide-spread section banners; Standard at 12-16px for UI labels and badges; StandardVF for interactive elements (nav, buttons) where variable-font optical sizing matters. All cuts share ss01/ss02 OpenType features that enable stylistic alternate glyphs — these must remain active for authentic brand rendering. Do NOT substitute Bagoss with a condensed system font at headline sizes — the proportions are distinct enough to visually break the design. If Bagoss is unavailable, use Barlow Condensed (Google Fonts, weight 500) as a structural proxy while noting it lacks the custom OpenType personality.
Similar brands
Rippling
Same deep-purple dark hero panel with white condensed headline typography, cream body sections below, and dual-tone split hero
Stripe
Custom typeface with multiple optical cuts (Stripe's StripeS has Condensed/Display variants like Bagoss), paired with Inter for body
Remote.com
Global HR/payroll SaaS with identical pill-button system (200px radius), violet brand accent against white/cream backgrounds
Workday
Enterprise HR platform using alternating dark/light section banding with full-width dark stat panels
Gusto
Warm off-white body background (not pure white) with rounded pill forms as the primary shape language across buttons and chips
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
