What is monday.com's primary brand color?

monday.com's primary brand voltage is the purple at '#6161ff', mapped to the `--purple` and `--_agents---agent-03` CSS variables. It appears only 8 times across the page — 3 as background fill (the primary pill CTA), 4 as border, 1 as text — making it the rarest non-trivial brand value on the marketing canvas. The dominant ink is near-black ('#1c1d21' on dark canvas, '#323338' on white), body copy runs in '#676879' (`--secondary`), and large structural surfaces are either pure white ('#ffffff') or pure black ('#000000'). The purple stays scarce so the single CTA reads as the only place to click.

What typography does monday.com use?

monday.com runs Poppins across every UI surface — every typography signature captured from 5,343 scanned elements uses Poppins as the first family (fallback chain: Poppins, Arial, sans-serif). The scale spans weights 300, 400, 500, and 600 only; weight 700 is absent. The hero display lands at 128px / weight 500 / -5.12px tracking — a deliberately loud gesture against a system that otherwise stays at 14px / 400 for body and 13px / 300 for nav links. Section headings (`h2`) sit at 52px / weight 500 / -2.08px tracking. The system has no italic, no monospace, and no serif companion.

What is the agent color spectrum?

Eight tints, indexed as CSS variables `--_agents---agent-01` through `--_agents---agent-08`: sky '#c6dfff' (01), yellow '#ffe100' (02), purple '#6161ff' (03 — the brand voltage doubles as an agent channel), cyan '#3ac9ff' (04), orange '#fdab3d' (05), pink '#fed4f5' (06), magenta '#fe81e4' (07), and blue '#0074fd' (08). The spectrum lives on the black 'Meet your new teammates' canvas, where each agent tile uses one channel as its accent dot. Marketing CTAs ignore the spectrum entirely — the purple pill is the only place agent-03 surfaces outside the dark band.

Why does monday.com use such large corner radii?

Two reasons. First, every interactive element on the marketing canvas — buttons, agent tile cards, board mockup frames — uses 16px or larger rounding ('{rounded.md}'), with the primary pill landing at fully-rounded '{rounded.full}' (160px in the extraction). Second, two decorative pills round to 1600px to read as 'circles cropped by the viewport' — those frame the agent carousel and the context-window grid. Combined with the 12px standard padding rhythm and 24px section padding ('{spacing.lg}'), the geometry signals 'consumer-friendly work platform' rather than 'enterprise dashboard rectangle'.

Does monday.com use a dark theme?

Not as a togglable theme — as a band-scoped canvas. The marketing surface alternates: white canvas for the 'You lead. Agents act.' hero and the trust-logo wall, then full black ('#000000') for both 'Meet your new teammates' and 'Work in context', then back to white. The dark canvas pairs with white text ('#ffffff' on '#000000'), with muted secondary text dropping to '#7c7b7b'. The product app itself (the actual kanban board) has a full dark theme, but the DESIGN.md captured here documents the marketing homepage where dark is band-scoped, not global.

Can I use this DESIGN.md to build my own React work platform?

Yes. Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens — the agent will reproduce monday.com's specific discipline (purple pill held to one CTA, black agent canvas for AI-team sections, Poppins at weight 500 for display, eight-tile agent spectrum) instead of a generic SaaS theme. You can also paste tokens directly into Tailwind config or CSS variables: every hex value, type style, radius, and spacing measurement in the spec is a quoted token ready to copy.

monday.com Design System

monday.com's design system as a DESIGN.md file.

About monday.com DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source monday.com

Project Management

monday.com's homepage runs on two canvases stacked vertically. The first is white: a small "An monday AI work platform" tagline above a 128px Poppins headline reading "You lead. Agents act.", a single purple-pill CTA at "#6161ff", and a board mockup tiled with agent avatar cards. The second is full black ("#000000"): the "Meet your new teammates" section, a horizontally-scrolling row of dark agent tiles where each tile carries the muted version of the kanban board mockup behind a header in white text. Then comes "Work in context" — a 64px headline over the same black canvas, decorated with floating chat-bubble UI mockups scattered like sticky notes across the section, with a centered hooded-figure illustration anchoring the composition.

This DESIGN.md packages the system into one machine-readable file built on the Google Labs spec. Inside: 24 color tokens grouped into a purple-led brand layer, the eight-tile agent spectrum, three product-line sub-palettes (CRM, Dev, Service), and structural canvas/ink/hairline tokens; 10 typography tokens running Poppins from the 128px hero down to a 13px nav-link, with the entire scale staying within weights 300 / 400 / 500 / 600; 6 corner radii from 8px chips to a 1600px decorative pill; 9 spacing tokens; and 22 components covering the purple pill, agent tile cards, the dark teammate carousel, floating context windows, the trust logo wall, body copy at "#676879", and the dark cta-band.

A working developer feeds the file to Claude, Cursor, or Copilot and gets components that match monday.com's specific moves — purple pill not gradient, black agent canvas not navy, Poppins not Inter, agent spectrum tinted instead of neutral. Reference the tokens directly inside Tailwind config or CSS variables. The system is worth studying for one reason: it shows how a project-management brand can lay an AI-agent identity over an existing kanban product without compromising either — the agents get their own canvas and their own eight-color taxonomy; the work boards keep the warm `#676879` body copy and the rounded 16px radius they already had.

What makes it distinct

Two-canvas systemwhite marketing canvas for purple-CTA hero, full black ('#000000') canvas for the agent teammate carousel
128px hero display at weight 500Poppins set to -5.12px tracking, the loudest single typographic gesture on the page
Eight-channel agent spectrumsky '#c6dfff', yellow '#ffe100', purple '#6161ff', cyan '#3ac9ff', orange '#fdab3d', pink '#fed4f5', magenta '#fe81e4', blue '#0074fd' indexed as `_agents---agent-01` through `_agents---agent-08`
Purple voltage held to one button'#6161ff' appears as bg in just 3 places, never as body text or background fill on a major surface
Three product sub-palettesCRM turquoise '#00d2d2', Dev green '#00c875', Service red '#ff3a5d' coexist with the agent spectrum without bleeding into marketing CTAs

Live at monday.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

monday.com

Explore monday.com

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

monday.com design system FAQ

Common questions about monday.com's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

monday.com homepage

Live reference for the purple-pill CTA on white canvas and the black agent-tile carousel in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use monday.com in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→