--- version: alpha name: Deel description: A white-canvas global HR platform where a custom condensed grotesque (Bagoss) drives large-format headlines, Inter handles everything operational, and a rich purple-violet accent anchors every primary action against a deliberately airy background. colors: # Surface / canvas background: "#ffffff" # page canvas — pure white surface: "#faf4ee" # warm off-white panel / section background surface-dark: "#1b1b1b" # dark footer and inverted sections surface-purple: "#201547" # deep brand purple — hero section, contrast panels # Text / ink ink: "#1b1b1b" # near-black primary text ink-secondary: "#404040" # supporting copy (--color-neutral-700) ink-muted: "#8a827e" # captions, metadata (--color-border-highlight-dark) ink-faint: "#b3aba4" # placeholder, disabled (--color-border-highlight-mid) on-dark: "#ffffff" # text on dark / purple sections on-accent: "#ffffff" # text on primary purple CTA # Brand accent — Deel purple primary: "#7d5bc9" # primary CTA and active state (--color-chip-neutral) primary-light: "#a98df6" # lighter purple hover / tinted surface (--color-surface-brand-purple-03) primary-container: "#c4b1f9" # tinted purple background, badges (--color-surface-brand-purple-02) primary-deep: "#5938b7" # pressed / deep accent (--color-purple-750) # Secondary accents accent-yellow: "#ffcf25" # highlight / callout yellow (--color-cornbread-400) accent-yellow-light: "#ffeba6" # yellow tinted surface (--color-surface-brand-yellow-01) accent-green: "#3f9532" # success, positive states (--color-green-600) accent-green-light: "#8cca82" # success tint (--color-green-375) # Semantic success: "#3f9532" # green confirmation error: "#e30004" # error (--color-border-error) error-light: "#f95250" # error secondary (--color-red-600) info: "#2187cf" # informational (--color-blue-600) # Borders border: "#d6d6d6" # hairline dividers and card edges (rgb 214,214,214) border-strong: "#1b1b1b" # was rgba(27,27,27,0.16) × 2px — flattened to opaque near-black # Shadow tints shadow-soft: "#1b1b1b" # was rgba(27,27,27,0.05–0.16) — Google format requires hex shadow-mid: "#000008" # was rgba(0,0,8,0.08) — Google format requires hex typography: display-hero: fontFamily: "BagossExtendedFont, 'BagossExtendedFont Fallback', Arial, Helvetica, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.32px fontFeature: "\"ss02\"" display: fontFamily: "BagossCondensedFont, 'BagossCondensedFont Fallback', Arial, Helvetica, sans-serif" fontSize: 60px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.3px heading-section: fontFamily: "BagossCondensedFont, 'BagossCondensedFont Fallback', Arial, Helvetica, sans-serif" fontSize: 44px fontWeight: 500 lineHeight: 1.05 letterSpacing: -0.22px fontFeature: "\"ss02\"" heading-sub: fontFamily: "BagossCondensedFont, 'BagossCondensedFont Fallback', Arial, Helvetica, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.14px body-large: fontFamily: "BagossExtendedFont, 'BagossExtendedFont Fallback', Arial, Helvetica, sans-serif" fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0px body: fontFamily: "Inter, 'Inter Fallback', Arial, Helvetica, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.6 letterSpacing: -0.09px body-small: fontFamily: "Inter, 'Inter Fallback', Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Inter, 'Inter Fallback', Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "BagossStandardFont, 'BagossStandardFont Fallback', Arial, Helvetica, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.375px fontFeature: "\"ss01\"" label: fontFamily: "BagossStandardFont, 'BagossStandardFont Fallback', Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.21px caption: fontFamily: "Inter, 'Inter Fallback', Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 14px lg: 21px xl: 24px 2xl: 32px 3xl: 48px 4xl: 80px rounded: sm: 5px md: 8px lg: 14px xl: 24px 2xl: 70px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-accent}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-light}" textColor: "{colors.on-accent}" button-primary-active: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-accent}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-deep}" button-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-dark-hover: backgroundColor: "{colors.surface-purple}" textColor: "{colors.on-dark}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-warm: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-deep}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-yellow: backgroundColor: "{colors.accent-yellow-light}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 14px 24px nav-link: textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" padding: 8px 14px nav-link-hover: textColor: "{colors.ink}" tag: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.label}" rounded: "{rounded.lg}" padding: 4px 10px --- # Deel Design System ## Overview Deel sells global payroll, HR, and compliance from one platform, and its marketing site behaves like a product that wants you to feel the scale — not intimidate you with it. The canvas is pure white (`{colors.background}`), and it stays white across most of the page. Contrast is introduced in deliberate punches: a deep brand-purple hero section (`{colors.surface-purple}`) that opens the page and dominates the fold, warm off-white panels (`{colors.surface}`) for alternating content zones, and a near-black footer (`{colors.surface-dark}`). The design earns its whitespace rather than filling it. The headline system runs on **Bagoss**, a custom geometric grotesque family deployed in three optical widths — Extended for the biggest display moments (64px, weight 600, ss02 feature on), Condensed for section headings and sub-heads, and Standard for button labels and UI text. It's a confident decision: Bagoss is wider and more characteristic than Inter at large sizes, giving headlines a brand stamp that plain Inter would never achieve. Then **Inter** takes over entirely below the decorative layer — body, captions, nav labels, and table data. The split is clean: Bagoss commands attention, Inter delivers information. Color in the Deel system is not a free element. The brand owns a purple-violet family (`{colors.primary}` through `{colors.primary-deep}`) and a warm yellow-gold family (`{colors.accent-yellow}`) — and both are spent as accents, not wallpaper. The primary CTA is a medium-weight purple pill button. The hero tints the "anywhere" in the headline with the same purple. A yellow callout badge surfaces a key benefit. Most of the surface stays white or off-white, which makes each chromatic hit land. Elevation comes from a gentle two-layer shadow system (`{colors.shadow-soft}`), not from heavy-handed depth — the page floats rather than stacks. **Key Characteristics:** - Pure-white canvas (`{colors.background}`) punctuated by full-width deep-purple hero (`{colors.surface-purple}`) and warm off-white content bands (`{colors.surface}`) - **Bagoss Extended** (`{typography.display-hero}`) for marquee headlines; **Bagoss Condensed** (`{typography.display}`) for section heads; **Inter** for all operational/body copy - Pill-shaped CTAs (`{rounded.pill}`) — the dominant interactive shape — in mid-weight purple (`{colors.primary}`) - Purple-violet family (`{colors.primary}` → `{colors.primary-container}`) for brand accent, interactive states, and badge fills - Yellow-gold (`{colors.accent-yellow}`) as a secondary callout accent — highlight badges, metric callouts - 14px as the dominant border-radius (`{rounded.lg}`) on cards and containers — rounded but not soft - Generous spacing rhythm: `{spacing.lg}` (21px) as the core unit, `{spacing.4xl}` (80px) between major sections - Soft two-layer card shadows (`{colors.shadow-soft}`) — depth suggested, not imposed - 1px hairline borders in `{colors.border}` (#d6d6d6) for card edges and row dividers - Wide 1280–1510px container; 7-breakpoint responsive system with sub-600px and sub-95px mobile stops ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The page canvas — pure white, used by default for the majority of page surfaces. - **Warm Off-White** (`{colors.surface}`): Alternating content band background — a biscuity warm neutral that distinguishes sections without abandoning the light palette. - **Near-Black** (`{colors.surface-dark}`): Footer and inverted sections. Matches the dark logo-on-light in reverse. - **Deep Brand Purple** (`{colors.surface-purple}`): The hero section canvas and high-contrast panel color. A dense, almost navy-adjacent violet — Deel's visual anchor. ### Ink / Text - **Near-Black** (`{colors.ink}`): Primary headings and body text — warm near-black that avoids pure `#000000` harshness. - **Dark Gray** (`{colors.ink-secondary}`): Supporting paragraphs and secondary labels. - **Medium Warm Gray** (`{colors.ink-muted}`): Captions, metadata rows, muted helper text. - **Faint Warm Gray** (`{colors.ink-faint}`): Placeholder text, disabled fields. - **On-Dark / On-Accent** (`{colors.on-dark}`, `{colors.on-accent}`): White, for text on purple or dark-section backgrounds. ### Brand Accent - **Deel Purple** (`{colors.primary}`): The mid-weight violet (--color-chip-neutral) used for primary CTAs, active pill-button fill, and inline text accent. Not a neon — a considered, desaturated violet. - **Purple Light** (`{colors.primary-light}`): Hover state for primary actions and surface tints. - **Purple Container** (`{colors.primary-container}`): Badge fills, tinted backgrounds for feature callouts. - **Purple Deep** (`{colors.primary-deep}`): Active/pressed state for the primary button — the darkest violet in the ladder. ### Secondary Accents - **Yellow Gold** (`{colors.accent-yellow}`): A bright warm yellow (--color-cornbread-400) for highlight badges and metric callouts — used sparingly. - **Yellow Tint** (`{colors.accent-yellow-light}`): Softened version for yellow badge fills. - **Green** (`{colors.accent-green}`): Success and positive-state signals. ### Semantic - **Success** (`{colors.success}`): Confirmation and pass states. - **Error** (`{colors.error}`): Destructive states and validation errors (--color-border-error). - **Info** (`{colors.info}`): Informational chips and links. ### Borders & Shadows - **Hairline** (`{colors.border}`): 1px card edges and row dividers — the principal structural device at `rgb(214,214,214)`. - **Strong Border** (`{colors.border-strong}`): 2px solid near-black focus and selected-input ring (flattened from rgba). - **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the `rgba(27,27,27,0.05–0.16)` layered shadow system. Flattened per Google spec. ## Typography ### Font Family - **Primary Display**: `BagossExtendedFont` (extended grotesque) and `BagossCondensedFont` (condensed grotesque) — Deel's custom typeface family. Not available on Google Fonts; closest Google substitute is **Barlow Condensed** or **DM Sans**. Fallbacks: `Arial, Helvetica, sans-serif`. - **UI / Standard**: `BagossStandardFont` — used for button labels and functional UI text; closest substitute **DM Sans**. - **Body / Operational**: `Inter`, with `Arial, Helvetica, sans-serif` fallbacks. The workhorse for all paragraph copy, tables, captions, and data. - **OpenType Features**: `ss02` on Extended and some Condensed variants; `ss01` on Standard — these unlock the Bagoss alternate character set. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 64px / Bagoss Extended 600 / ss02 — marquee hero headline | | `display` | 60px / Bagoss Condensed 500 / -0.3px — hero sub-display | | `heading-section` | 44px / Bagoss Condensed 500 / ss02 — section headings | | `heading-sub` | 28px / Bagoss Condensed 500 — sub-section and card headlines | | `body-large` | 30px / Bagoss Extended 600 — lead feature copy | | `body` | 18px / Inter 400 / lh 1.6 — standard paragraph | | `body-small` | 16px / Inter 400 — dense supporting copy | | `nav-link` | 16px / Inter 500 — navigation and tab labels | | `button-ui` | 15px / Bagoss Standard 500 / ls 0.375px — button labels, tracked-out | | `label` | 14px / Bagoss Standard 500 / ls 0.21px — UI labels, eyebrows | | `caption` | 12px / Inter 500 — tags, metadata, footnotes | ### Principles - **Bagoss for brand moments, Inter for work:** the custom grotesque makes headlines unmistakably Deel; Inter takes over anywhere a user is reading or inputting data. - **Letter-spacing splits by register:** display text tracks slightly positive on Extended (+0.32px) and slightly negative on Condensed (-0.3px); button labels carry a deliberate +0.375px optical-size tracking. - **Weight is binary:** headlines live at 500–600, body at 400. There is no 700 in the brand display stack. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 7px (the dominant computed spacing from extraction), normalized to 8px conventions for the system. The rhythm is generous — `{spacing.4xl}` (80px) separates major sections, `{spacing.xl}` (24px) governs card internals, and `{spacing.lg}` (21px) acts as the loose intra-component unit throughout. ### Grid & Container - Max content width: 1280–1510px, centered (7 responsive breakpoints) - Common pattern: headline centered above a row of 3–4 feature tiles - Hero occupies full viewport width with the deep-purple (`{colors.surface-purple}`) panel split against product imagery on the right - Warm off-white (`{colors.surface}`) content bands alternate with white for rhythm without borders ### Whitespace Philosophy - **Let white breathe:** the majority of the page is white, and that whitespace is load-bearing — it makes the purple hero and colored callouts land harder. - **Section-level cadence:** alternating surface tones (white → warm off-white → white) replace heavy dividers. - **Cards float at the grid:** content cards are set in generous surrounding space; padding is `{spacing.xl}` inside. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` hairline only | Most cards, input resting state, row dividers | | Subtle (Level 1) | `0 2px 32px` at ~5% near-black (`{colors.shadow-soft}`) | Feature tiles and product cards | | Card (Level 2) | `0 16px 32px` at ~16% near-black (`{colors.shadow-soft}`) | Modal cards, dialog surfaces | | Deep (Level 3) | 7-layer progressive shadow (0.6px → 12px) | High-priority overlays | | Focus Ring | `0 0 0 2px` solid near-black (`{colors.border-strong}`) | Input and button keyboard focus | **Shadow Philosophy**: Deel's elevation system layers two ambient shadows — a wider, softer `32px` spread at low opacity, combined with a tighter `16px` lift. The result reads as "floating panel" rather than "lifted card." Most surfaces at rest carry only a hairline border (`{colors.border}`), so even the Level 1 shadow feels like a meaningful state change. Nothing competes with the page's structural color zoning. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 5px | Small inline elements, img crops | | `md` | 8px | Dialog corners, button sub-elements | | `lg` | 14px | Cards, containers — the dominant surface radius | | `xl` | 24px | Large feature panels, media blocks | | `2xl` | 70px | Decorative large rounded containers | | `pill` | 9999px | All CTA buttons, badges, status chips | The shape vocabulary is bi-modal: interactive elements (buttons, badges, chips) are always full-pill, while containers (cards, panels) use 14px as the default workhorse radius. The `70px` large-rounded is an art-direction value for oversized feature containers. There are no sharp rectangles for cards — the system stays rounded throughout. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — Deel purple (`{colors.primary}`) fill, white label, full-pill radius. The primary action. Hover lifts to `{colors.primary-light}`, active presses to `{colors.primary-deep}`. - **`button-secondary`** — White fill, near-black text, hairline border, pill radius. The neutral companion action. - **`button-ghost`** — White fill, purple text, pill radius. Tertiary or low-emphasis action; hover adds a `{colors.primary-container}` tint. - **`button-dark`** — Near-black fill, white text, pill radius. Used in dark / inverted sections. ### Cards - **`card`** — White surface, 1px hairline border (`{colors.border}`), 14px radius, layered shadow. The standard feature tile. - **`card-warm`** — Warm off-white (`{colors.surface}`) surface, same geometry. Used in alternating content bands. ### Inputs - **`input`** — White fill, hairline border, 8px radius, 12px 16px padding. On focus, a 2px near-black ring (`{colors.border-strong}`) marks the active field. ### Navigation - **`nav-bar`** — White, flush top, no shadow at rest. Nav links are dark-gray (`{colors.ink-secondary}`), darkening to near-black (`{colors.ink}`) on hover. A "Book a demo" pill in near-black (`{components.button-dark}`) anchors the right end. ### Badges & Tags - **`badge`** — Purple-container fill (`{colors.primary-container}`), deep-purple text, full-pill. The default metadata chip. - **`badge-yellow`** — Yellow-light fill (`{colors.accent-yellow-light}`), near-black text. Used for benefit callouts and feature highlights. - **`tag`** — Warm off-white fill, gray text, 14px radius. Inline content categories. ## Do's and Don'ts ### Do - Open feature pages with a full-bleed deep-purple (`{colors.surface-purple}`) hero — it's the brand's first impression and strongest identity signal - Use Bagoss Extended (`{typography.display-hero}`) at 64px for marquee moments, Bagoss Condensed for all other heading tiers - Apply pill radius (`{rounded.pill}`) to every CTA button and badge — the round-pill is the interactive shape signature - Keep the canvas white (`{colors.background}`); alternate with warm off-white (`{colors.surface}`) panels for rhythm — do not reach for colored backgrounds outside the hero - Spend `{colors.primary}` on the primary CTA, active nav states, and inline brand text only - Use `{colors.accent-yellow}` sparingly — one highlight badge per feature block maximum - Layer two shadow depths for modal surfaces: a wide 32px ambient and a tighter 16px lift - Pair Bagoss button labels with +0.375px letter-spacing (`{typography.button-ui}`) — the tracked spacing is part of the brand voice ### Don't - Don't use Inter for headline copy — Bagoss headlines are the brand's most distinctive typographic decision; swapping them for Inter makes the page look generic - Don't spread the deep purple (`{colors.surface-purple}`) beyond the hero or a single contrast panel — it's a dramatic device that works because it's rare - Don't use pill shapes on cards or content containers — the pill is reserved for interactive elements only; cards stay at `{rounded.lg}` (14px) - Don't stack multiple colored backgrounds in sequence — the rhythm is white → warm off-white, not a rainbow of sections - Don't rely on shadow alone to separate cards; start with the hairline border (`{colors.border}`), add shadow for elevation - Don't introduce mid-range typography weights (600–700) into Inter body copy — the body stack is 400 for reading, 500 for labels; bold weight in Inter reads as an error state - Don't use `{colors.accent-yellow}` as a button color — it fails contrast on white and looks unbranded at button scale --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Micro | <95px | Near-zero-width extreme edge case | | Mobile Small | <494px | Single column; hero headline drops to ~28px Bagoss Condensed; nav collapses to hamburger | | Mobile | 494–599px | Single column; compressed hero padding; logo cloud wraps | | Mobile Wide | 600–1199px | Two-column grids begin; hero regains some padding; pill buttons maintain size | | Tablet / Desktop | 1200–1279px | Full layout minus wide gutters; 3–4 column feature grids | | Desktop | 1280–1509px | Standard full-width layout; max-width container active | | Large Desktop | ≥1510px | Wide container at max; additional gutter whitespace either side | ### Touch Targets - Pill buttons carry 12px vertical padding — comfortable tap height (~44px+ on most labels) - Nav links and card tap areas have generous padding; no small sub-14px touch targets in the primary nav ### Collapsing Strategy - **Navigation**: full desktop nav → hamburger toggle below ~1200px; the "Book a demo" pill CTA persists at every breakpoint - **Feature grids**: 4-up → 2-up → single column following the 601px and 494px stops - **Hero**: Bagoss headline scales from 64px down toward ~28px Bagoss Condensed at mobile; the deep-purple panel shifts from 60/40 horizontal split to stacked vertical - **Spacing**: section padding compresses from `{spacing.4xl}` (80px) toward `{spacing.3xl}` (48px) and `{spacing.xl}` (24px) on mobile ### Image Behavior - Product UI screenshots sit in media containers with 14px–24px radius clips; they reflow within the grid or stack below headline copy on mobile - Customer logo clouds wrap to 2–3 rows on mobile viewports --- ## Agent Prompt Guide ### Quick Color Reference - Background: Pure White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Brand accent: Deel Purple (`{colors.primary}`) - Secondary text: Dark Gray (`{colors.ink-secondary}`) - Border: Hairline Gray (`{colors.border}`) - Primary CTA: Purple pill (`{colors.primary}` fill, `{colors.on-accent}` label) - Hero canvas: Deep Brand Purple (`{colors.surface-purple}`) ### Example Component Prompts - "Create a hero section on deep brand purple (`{colors.surface-purple}`) with a 64px Bagoss Extended headline (weight 600, letter-spacing 0.32px, ss02 feature) in white (`{colors.on-dark}`); accent the key word in `{colors.primary-light}`; place a white-fill pill CTA button (`{components.button-secondary}`) and a feature product screenshot cropped with `{rounded.xl}` radius on the right half" - "Build a feature card on white (`{colors.background}`) with a 1px hairline border (`{colors.border}`), `{rounded.lg}` radius, 24px padding, a Bagoss Condensed 28px sub-heading, Inter 18px body (`{typography.body}`), and a two-layer shadow: `0 16px 32px rgba(27,27,27,0.16), 0 2px 32px rgba(27,27,27,0.05)`" - "Render a primary CTA button: `{colors.primary}` fill, white label in Bagoss Standard 15px weight 500 letter-spacing 0.375px, full-pill radius, 12px 24px padding; hover to `{colors.primary-light}`" - "Design a benefit badge: `{colors.accent-yellow-light}` fill, near-black text, Bagoss Standard 12px weight 500, full-pill radius, 4px 12px padding — use this as a callout chip above a section headline" - "Create a nav bar on white with Inter 16px weight 500 nav links in `{colors.ink-secondary}` that darken to `{colors.ink}` on hover, a Deel wordmark on the left, and a near-black pill 'Book a demo' button (`{components.button-dark}`) on the right at 14px 21px padding" - "Design an input field: white fill, 1px `{colors.border}` outline, 8px radius, Inter 18px body, 12px 16px padding; on focus, switch border to a 2px `{colors.border-strong}` ring" ### Iteration Guide 1. Start on white canvas (`{colors.background}`). Open with a full-bleed deep-purple hero (`{colors.surface-purple}`) — it's the brand's first move and must read bold and chromatic against the white that follows. 2. Alternate sections between white and warm off-white (`{colors.surface}`). This is the rhythm engine; don't reach for additional colors. 3. All CTAs are pill-shaped (`{rounded.pill}`) in `{colors.primary}`. If your button has hard corners or a non-purple accent, it's off-brand. 4. Headlines in Bagoss; Inter below the headline fold. Every time an Inter headline sneaks in above 24px, the design loses its brand stamp. 5. Shadow is two-layer: wide ambient (32px) + tight lift (16px), both at low near-black opacity. Avoid single-layer or heavy shadows. 6. Purple (`{colors.primary}`) is the interactive signal, yellow (`{colors.accent-yellow}`) is the spotlight callout — use both sparingly so they retain charge. 7. Keep border-radius binary: cards stay at `{rounded.lg}` (14px), interactive elements at `{rounded.pill}`. No in-between values on primary surfaces. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Deel. Brand names and trademarks belong to their respective owners.