monday.com Design System

Overview

monday.com's marketing surface is a two-canvas system — a discipline rarer than the navy-hero / white-body alternation that dominates B2B SaaS. The first canvas is pure white; the second is pure black ("#000000"). On the white canvas, a small purple eyebrow reads "An monday AI work platform", the 128px Poppins hero reads "You lead. Agents act.", a single purple-pill primary CTA at "#6161ff" sits centered beneath, and a kanban-board mockup tiled with agent-avatar cards anchors the bottom. Then the page drops into full black for "Meet your new teammates" — a horizontally-scrolling row of dark agent tiles, each shrouding a muted version of the same kanban board behind a white-text header — and the canvas stays black for the "Work in context" section that follows, decorated with floating chat-bubble windows scattered like sticky notes around a centered hooded-figure illustration.

Poppins carries every token. There is no companion serif, no monospace, no italic, and no weight 700 — the scale runs 300 / 400 / 500 / 600 only, with weight 500 doing the heavy lifting on display ("You lead. Agents act." sits at 128px / weight 500 / -5.12px tracking) and weight 300 reserved for the 13px top-nav links. Loud display, restrained weight: where most enterprise platforms reach for 700+ at the hero, monday holds at 500 and lets the 128px gesture do the work instead of the weight. Where most project-management brands lay AI-agent identity on top of their existing UI as a tinted overlay, monday gives the agents their own canvas and their own eight-channel spectrum — sky "#c6dfff", yellow "#ffe100", purple "#6161ff" (the brand voltage doubles as agent-03), cyan "#3ac9ff", orange "#fdab3d", pink "#fed4f5", magenta "#fe81e4", blue "#0074fd" — keyed as --_agents---agent-01 through --_agents---agent-08 in the CSS.

The purple voltage is held to one button. "#6161ff" appears as a background fill in just 3 places across the entire homepage — every one a primary pill CTA. Body copy stays in "#676879" (--secondary), structural ink lives at "#323338" and "#1c1d21", and the trust-logo wall renders Coca-Cola, Vistra, Carrefour, and VML at "#7c7b7b" — saturated brand logos rendered in monochrome stone so the purple stays the only saturated mark below the fold.

Key Characteristics:

• Two-canvas alternation: white marketing canvas → black agent canvas ("#000000") → black "Work in context" canvas
• 128px Poppins hero at weight 500 / -5.12px tracking — the loudest single gesture on the page
• Single purple pill ("#6161ff") as the only primary CTA, only appearing 3 times as background fill
• Eight-channel agent spectrum mapped to _agents---agent-01..08 CSS variables
• Three product sub-palettes — CRM turquoise "#00d2d2", Dev green "#00c875", Service red "#ff3a5d"
• Trust logo wall in monochrome stone ("#7c7b7b") so brand colors stay scarce on the marketing surface
• Floating context-window cards scattered like sticky notes around centered hooded-figure illustration

Colors

• Stripe Purple Voltage (#6161ff) — frequency 8. Used as bg (3), border (4), text (1). Mapped to --purple and --_agents---agent-03. The single primary-pill voltage; the brand color doubles as agent channel 03 inside the dark canvas teammate carousel.
• Brand Primary Deep (#642eff) — frequency 0 (referenced only in --flowui-component-library--primary-base). Reserve for hover/pressed state on the primary pill; the deeper purple absorbs the chromatic step down from "#6161ff" without breaking palette unity.
• Brand Primary Darker (#4b00d7) — frequency 1 as background. Even darker pressed-state purple; pairs with focus rings inside the white-canvas hero.
• Agent-01 Sky (#c6dfff) — agent channel 1 — never appears on the white canvas; reserved for the avatar dot on the first agent tile inside the dark band.
• Agent-02 Yellow (#ffe100) — agent channel 2 — second tile avatar accent.
• Agent-04 Cyan (#3ac9ff) — agent channel 4 — third tile avatar accent.
• Agent-05 Orange (#fdab3d) — agent channel 5 — fourth tile avatar; also doubles as the CRM --orange token in the product palette.
• Agent-06 Pink (#fed4f5) — agent channel 6 — pastel pink for tile 6.
• Agent-07 Magenta (#fe81e4) — frequency 8. Used as text (4), border (4). The hottest accent on the dark band — strong enough to read against "#000000" at small avatar sizes.
• Agent-08 Blue (#0074fd) — agent channel 8 — pure blue for the eighth tile.
• CRM Turquoise (#00d2d2) — product-line accent for the CRM sub-brand inside the platform; lives in --turquoise and --crm--primary.
• Dev Green (#00c875) — product-line accent for the Dev sub-brand; --dev--primary and --primary-green.
• Service Red (#ff3a5d) — product-line accent for the Service sub-brand; --products--service.
• Status Purple (#9d50dd) — frequency 0 (board mockup only) — status badge color used inside the kanban mockup, not on marketing chrome.
• Canvas White (#ffffff) — frequency 1756. Used as text on dark (884), border (855), bg (14). The dominant marketing canvas; carries the white "You lead. Agents act." hero.
• Canvas Dark (#000000) — frequency 806. Used as text on light (395), border (370), shadow (18), bg (23). The full-black agent canvas; the deliberate choice over navy or near-black distinguishes monday from every competitor in the project-management category.
• Canvas Dark Soft (#1c1d21) — frequency 40. Used as bg (16), gradient (10), text (7), border (7). The subtle gray-black for agent tile interiors against the "#000000" canvas — the only place a "near-black" appears anywhere.
• Ink (#323338) — frequency 87. Used as bg (62), border (20), text (5). Mapped to --dark-grey. The dominant text color on white surfaces — warmer than gray and cooler than charcoal.
• Secondary Body (#676879) — frequency 2. Mapped to --secondary. The body-paragraph color: "Where people and agents drive results together on one secure work platform" renders at exactly this token.
• Steel (#585965) — frequency 145. Used as border (74), text (71). The hairline accent that runs through nav-link separators and card borders on the white canvas.
• Stone (#7c7b7b) — frequency 6. Used as border (6). The trust-logo wall color; saturated brand marks rendered in monochrome stone so they don't compete with the purple CTA.
• Hairline Soft (#e6e7ea) — frequency 20. Used as border (20). The standard divider color on white surfaces.
• Hairline Strong (#c3c6d4) — frequency 107. Used as border (50), text (47), bg (10). The bolder hairline for cards and form inputs on the white canvas.
• Surface (#f3f4f5) — frequency 4. Used as bg (3), border (1). The off-white card-surface color, mapped to --surface-light and --crm--surface.
• Grey Background (#f6f7fb) — referenced via --grey-background-color; the alternate page-section background tint.

Typography

monday.com runs Poppins as the single typographic family across every captured surface — every signature from the 5,343 scanned elements lists Poppins as the first family, with Arial then sans-serif as fallbacks. The scale spans weights 300, 400, 500, and 600 only; weight 700 is absent. There is no italic, no companion serif, and no monospace.

The scale spans 128px at the top to 13px at the bottom. The hero display ({typography.hero-display}) sits at 128px / weight 500 / 1.30 line-height / -5.12px tracking — calibrated to make "You lead. Agents act." land as four discrete typographic gestures over the white canvas. The dark-band display ({typography.display-lg}) drops to 64px / weight 400 / -1.92px for "Work in context" — a quieter weight that lets the floating chat-window decoration carry visual weight instead of the type. Section headings (heading-1) come in at 52px / weight 500 / -2.08px for "Get more done with agents and people working side by side". Body paragraphs run at 20px / weight 400 / 1.50 line-height with -0.4px tracking — generous for a B2B marketing surface. The 13px nav-link at weight 300 is the lightest text on the page — Poppins' weight 300 reads as quiet authority for top-nav rather than the gymnastics most enterprise nav bars use.

Layout

The page alternates two band widths. Light bands (hero, logo wall) center content inside a ~1200px column on a "#ffffff" canvas with 96px vertical section padding ({spacing.section-lg}). Dark bands (agent carousel, "Work in context") fill viewport-edge to viewport-edge on a "#000000" canvas, with the carousel breaking out horizontally beyond the column to imply infinite scroll. Internal element spacing settles at 12px ({spacing.md}) for control-to-control rhythm, 8px ({spacing.xs}) for tight pairs, 16px ({spacing.base}) for card interior gutters, and 24px ({spacing.lg}) between card and section header. The frequent 16px-vertical / 0-horizontal padding signature (16px 0px, 46 occurrences in the extraction) is the canonical card-section pattern.

Elevation & Depth

Shadows are scarce on the marketing canvas — the board-mockup card carries a single diffuse drop shadow (rgba(20, 20, 43, 0.06) 0px 12px 32px -4px) to lift it out of the hero band, and that's it. The dark canvas has zero shadows; depth comes from the soft-black "#1c1d21" agent-tile interior reading as a panel one step above the "#000000" canvas — surface-ladder elevation instead of cast shadows. The result: a system that feels weightless on the white canvas and tactile on the dark canvas, without crossing into the heavy gradient mesh that fintech brands use.

Shapes

The radius scale runs 8px → 12px → 16px → 24px → 160px → 9999px. Buttons render at the 160px pill ({rounded.pill}) — large enough to qualify as fully-rounded at every realistic button width. Cards, agent tiles, and the board mockup use 16px ({rounded.lg}). Inputs and small chips drop to 12px ({rounded.md}). Two decorative containers around the agent carousel use a 1600px radius to read as "circles cropped by the viewport edge" — those are not in the regular scale and stay scoped to one composition. Pills for everything you press, 16px for everything you read.

Components

• button-primary — the single purple pill at "#6161ff" with white text, 14px medium Poppins, 14px×32px padding, 160px radius
• button-primary-hover / button-primary-pressed — deeper-purple states stepping through "#642eff" and "#4b00d7"
• button-secondary — transparent fill with 1px "#c3c6d4" hairline; same pill geometry, ink text
• button-on-dark — white pill against the black agent canvas for "Get Started >" inside the carousel header
• top-nav — white surface, 13px weight-300 nav-link Poppins, 12px×24px padding, 1px hairline-bottom
• hero-band-light / hero-band-dark — the two canvas modes; 96px section padding either way
• agent-tile — "#1c1d21" interior on "#000000" canvas, 16px rounded, agent-channel accent dot
• agent-tile-header — 16px / weight 600 white Poppins inside the dark tile
• context-window — small floating chat-bubble panel scattered around the "Work in context" composition; "#1c1d21" surface with 12px rounded corners
• board-mockup-card — the kanban tile-board screenshot with 16px rounded corners and the only diffuse drop shadow on the page
• logo-wall-item — Coca-Cola, Vistra, Carrefour, VML rendered in stone "#7c7b7b"
• tagline-eyebrow — the small purple "An monday AI work platform" tagline above the hero
• body-paragraph — 20px / weight 400 Poppins in "#676879" with -0.4px tracking
• text-input — 12px rounded, "#c3c6d4" hairline, 44px height
• badge-status-purple — the "#9d50dd" status badge that lives inside the kanban mockup
• badge-agent — small dark-canvas chip with hairline outline used on agent tiles

Do's and Don'ts

Do reserve "#6161ff" for the primary pill CTA — it appears as background fill in just 3 places across the entire homepage. Multiplying its uses dilutes the single-CTA discipline.

Do drop to "#000000" canvas (not navy, not near-black) when introducing an agent-related section. The pure-black choice is what differentiates monday from competitors that use navy bands for the same purpose.

Do use the _agents---agent-XX spectrum only inside the dark band. The eight agent channels are bound to the carousel — surfacing yellow "#ffe100" or magenta "#fe81e4" on the white marketing canvas would override the purple-pill discipline.

Don't push Poppins to weight 700 — the scale stops at 600. The 128px hero at weight 500 is the loudest gesture on purpose; promoting it to 700 collapses the contrast between display and body.

Don't apply the 1600px decorative pill radius outside the carousel framing. Use {rounded.pill} (160px) for buttons and {rounded.lg} (16px) for cards; the 1600px value is composition-specific cropping, not a general token.

Don't use "#676879" for primary CTAs or large background fills — it's the body-paragraph token (--secondary) and reading-only. For dim large-area fills on white, use surface "#f3f4f5" instead.

Don't mix the three product sub-palettes (CRM turquoise "#00d2d2", Dev green "#00c875", Service red "#ff3a5d") on the marketing homepage. Each lives on its own product sub-page; surfacing all three on the master marketing canvas would dissolve the platform/sub-brand hierarchy.

Known Gaps

• Specific dark-mode token values are scoped to the two dark bands ("#000000" + "#1c1d21" surface); the full product-app dark theme is not captured
• Animation and transition timings were not extracted; recommend 150–200ms ease
• Form validation success state not explicitly captured beyond the focused-input purple border
• The eight-channel agent spectrum is read off the captured carousel; the brand's internal agent library may have more channels or alternate naming
• Three product sub-palettes (CRM, Dev, Service) are referenced via CSS variables but their full surface usage lives on sub-pages not captured here