---
version: alpha
name: monday.com
website: "https://monday.com"
description: >-
  monday.com presents itself as the AI Work Platform through a two-canvas brand voice — a white marketing canvas anchored by a purple primary pill ("#6161ff") that opens with "You lead. Agents act.", then a deep-black agent canvas ("#000000") that hosts the "Meet your new teammates" carousel of tinted agent tiles. The display sits at 128px in weight 500 with -5.12px tracking, Poppins runs every token from the 128px hero down to 13px nav links, and an eight-color agent spectrum (sky, yellow, purple, cyan, orange, pink, magenta, blue) classifies the avatar palette across the dark band. The system covers homepage, agent tile carousel, and the "Work in context" floating-window grid.

seo:
  title: "monday.com Design System for React — Purple #6161ff, Poppins, 22 components"
  metaDescription: "monday.com's design system as a DESIGN.md file. Purple #6161ff CTA, Poppins, agent-tile palette, 22 components. For React, Next.js, and AI tools."
  highlights:
    - "Two-canvas system — white marketing canvas for purple-CTA hero, full black ('#000000') canvas for the agent teammate carousel"
    - "128px hero display at weight 500 — Poppins set to -5.12px tracking, the loudest single typographic gesture on the page"
    - "Eight-channel agent spectrum — sky '#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-palettes — CRM turquoise '#00d2d2', Dev green '#00c875', Service red '#ff3a5d' coexist with the agent spectrum without bleeding into marketing CTAs"
  tags:
    - "Project Management"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://monday.com"
      title: "monday.com homepage"
      description: "Live reference for the purple-pill CTA on white canvas and the black agent-tile carousel in production."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is monday.com's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typography does monday.com use?"
      answer: "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."
    - id: "agent-spectrum"
      title: "What is the agent color spectrum?"
      answer: "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."
    - id: "shape-language"
      title: "Why does monday.com use such large corner radii?"
      answer: "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'."
    - id: "dark-mode"
      title: "Does monday.com use a dark theme?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React work platform?"
      answer: "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."

colors:
  primary: "#6161ff"
  primary-deep: "#642eff"
  primary-darker: "#4b00d7"
  on-primary: "#ffffff"
  agent-sky: "#c6dfff"
  agent-yellow: "#ffe100"
  agent-cyan: "#3ac9ff"
  agent-orange: "#fdab3d"
  agent-pink: "#fed4f5"
  agent-magenta: "#fe81e4"
  agent-blue: "#0074fd"
  crm-turquoise: "#00d2d2"
  crm-bright: "#24c4e6"
  dev-green: "#00c875"
  service-red: "#ff3a5d"
  status-purple: "#9d50dd"
  canvas: "#ffffff"
  canvas-dark: "#000000"
  canvas-dark-soft: "#1c1d21"
  surface: "#f3f4f5"
  surface-soft: "#f6f7fb"
  ink: "#323338"
  ink-deep: "#1c1d21"
  secondary: "#676879"
  steel: "#585965"
  stone: "#7c7b7b"
  muted: "#8f8a8a"
  hairline: "#e6e7ea"
  hairline-strong: "#c3c6d4"
  on-dark: "#ffffff"
  on-dark-muted: "#7c7b7b"

typography:
  hero-display:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 128px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: "-5.12px"
  display-lg:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: "-1.92px"
  heading-1:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: "-2.08px"
  heading-2:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: "-0.88px"
  heading-3:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: "-0.48px"
  subtitle-lg:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: "-0.4px"
  body-md:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
  body-md-medium:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.30
  body-md-semibold:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.50
  body-sm:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
  nav-link:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.40
  caption:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.00

rounded:
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  pill: "160px"
  full: "9999px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "10px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  section: "48px"
  section-lg: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md-medium}"
    rounded: "{rounded.pill}"
    padding: "14px 32px"
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
  button-primary-pressed:
    backgroundColor: "{colors.primary-darker}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-medium}"
    rounded: "{rounded.pill}"
    padding: "14px 32px"
    border: "1px solid {colors.hairline-strong}"
  button-on-dark:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md-medium}"
    rounded: "{rounded.pill}"
    padding: "14px 32px"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md-medium}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "12px 24px"
    border: "0 0 1px {colors.hairline} solid"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-band-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.hero-display}"
    padding: "96px 0px"
  hero-band-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-lg}"
    padding: "96px 0px"
  agent-tile:
    backgroundColor: "{colors.canvas-dark-soft}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: "16px"
    border: "1px solid {colors.canvas-dark-soft}"
  agent-tile-header:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md-semibold}"
    padding: "8px 12px"
  context-window:
    backgroundColor: "{colors.canvas-dark-soft}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "12px"
    border: "1px solid {colors.canvas-dark-soft}"
  board-mockup-card:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.lg}"
    padding: "0"
    border: "1px solid {colors.hairline}"
    shadow: "rgba(20, 20, 43, 0.06) 0px 12px 32px -4px"
  logo-wall-item:
    backgroundColor: "transparent"
    textColor: "{colors.stone}"
    typography: "{typography.body-md-medium}"
    padding: "24px"
  tagline-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-md-medium}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    typography: "{typography.subtitle-lg}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "10px 12px"
    border: "1px solid {colors.hairline-strong}"
    height: 44px
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.primary}"
  badge-status-purple:
    backgroundColor: "{colors.status-purple}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: "2px 8px"
  badge-agent:
    backgroundColor: "{colors.canvas-dark-soft}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "4px 10px"
    border: "1px solid {colors.on-dark-muted}"
  promo-dot-agent-03:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 12px
    width: 12px
---

## 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