---
version: alpha
name: monday.com
description: "A bright white stage, black display type, one purple pulse, a rainbow of products."
colors:
  on-surface-variant: "#676879"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#CACBCD"
  primary: "#6161FF"
  graphite-grey: "#7C7B7B"
  nav-grey: "#535768"
  whisper-grey: "#F3F4F5"
  cloud-grey: "#F6F7FB"
  lavender-line: "#EFF0F6"
  deep-indigo: "#181B34"
  crm-turquoise: "#00D2D2"
  dev-green: "#00C875"
  service-red: "#FF3A5D"
  digital-pink: "#E271FF"
  sunny-yellow: "#fc0"
typography:
  caption:
    fontFamily: Poppins
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  meta:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Poppins
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Poppins
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  section:
    fontFamily: Poppins
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  hero:
    fontFamily: Poppins
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  display:
    fontFamily: Poppins
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  mega:
    fontFamily: Poppins
    fontSize: 128px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
rounded:
  small-controls-links: 8px
  cards-panels: 16px
  large-cards-media: 24px
  chips-small-pills: 28px
  ai-feature-blocks: 60px
  buttons: 160px
spacing:
  xs: 8px
  sm: 12px
  md: 16px
  lg: 32px
---
# monday.com — Style Reference
> A bright white stage, black display type, one purple pulse, a rainbow of products.

**Theme:** light

monday.com runs on maximum contrast and minimum chrome: a pure `#FFFFFF` canvas, oversized black Poppins headlines set in medium weight ("You lead. Agents act." lands near 64px), and one electric periwinkle `#6161FF` that carries every real action. The signature move is the fully-rounded button — a 160px pill radius that turns even a small CTA into a lozenge. Underneath the calm monochrome shell sits a deliberately loud secondary system: each product line owns its own hue (turquoise for CRM, green for Dev, red-pink for Service, plus a spread of agent accents), used for illustration and product chrome, never for body text. Type is geometric and confident, layout is airy and left-aligned, and depth is conveyed almost entirely by soft luminance and the faintest 8px shadow rather than borders. The result reads friendly, high-energy, and unmistakably SaaS.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#000000` | `--color-black` | Display headlines and primary text; the entire hero is set in black, not grey. |
| Periwinkle Purple | `#6161FF` | `--color-purple` | THE brand color and only default CTA fill; also active nav dots and outlined buttons. Reserve for actions — never body copy. |
| White | `#FFFFFF` | `--color-white` | Page canvas and card surfaces; the default ground everything floats on. |
| Slate Grey | `#676879` | `--color-secondary` | Secondary text and supporting labels; the calm mid-tone under black headlines. |
| Graphite Grey | `#7C7B7B` | `--color-grey-ink` | Muted captions and card sub-labels ("14px" meta lines). |
| Nav Grey | `#535768` | `--color-nav-ink` | Top-nav link text and inactive persona tabs. |
| Whisper Grey | `#F3F4F5` | `--color-surface-light` | Ghost/secondary button fills and inset panels; the lightest usable surface step. |
| Cloud Grey | `#F6F7FB` | `--color-grey-background` | Alternating section background — a barely-there wash to separate stripes. |
| Graphite Line | `#CACBCD` | `--color-grey-graphite` | Default hairline borders and dividers. |
| Lavender Line | `#EFF0F6` | `--color-neutral-300` | Softest borders, table row rules, input outlines. |
| Deep Indigo | `#181B34` | `--color-dark-blue` | Deep footer / dark inversion ground; near-black with a blue cast. |
| CRM Turquoise | `#00D2D2` | `--color-turquoise` | Product accent (CRM) for illustration and chips; never a text color. |
| Dev Green | `#00C875` | `--color-primary-green` | Product accent (Dev / status "done"); the classic monday green. |
| Service Red | `#FF3A5D` | `--color-service` | Product accent (Service) for illustration and badges. |
| Digital Pink | `#E271FF` | `--color-digital-purple` | Agent / AI illustration accent, paired with the purples. |
| Sunny Yellow | `#fc0` | `--color-yellow` | Highlight accent for tips and agent motifs; sparing, decorative only. |

Larger vivid families exist in the source (multiple purple, green, turquoise, and per-agent steps) — the table above features the identity + load-bearing roles; the full set is frozen intact in Quick Start.

## Tokens — Typography
### Poppins — the entire voice: geometric sans for display, UI, and body · `--font-poppins`
- **Substitute:** Montserrat, Gothic A1, ui-sans-serif
- **Weights:** 300 (light — nav/small buttons), 400 (regular — body), 500 (medium — ALL headlines), 600, 700
- **Sizes:** 13, 14, 16, 18, 20, 24, 44, 48, 52, 64, 96, 128 px
- **Line height:** 1.0 (huge display) → 1.1 → 1.3 → 1.5 (body)
- **Letter spacing:** near-neutral; Poppins' wide geometric forms do the work, no tightening needed
- **Role:** One family carries everything. Headlines never go heavier than 500 — monday relies on *size*, not weight, for hierarchy.

### Playfair Display — rare editorial italic accent · `--font-playfair`
- **Substitute:** Georgia italic, "Times New Roman" italic
- **Weights:** 400 italic only
- **Sizes:** used inline within headlines
- **Line height:** inherits the headline
- **Letter spacing:** default
- **Role:** A single serif-italic word dropped into an otherwise geometric headline for emphasis. Use once per headline, never as a system font.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 13px | 1.5 | normal | `--text-caption` |
| Meta | 14px | 1.5 | normal | `--text-meta` |
| Body | 16px | 1.5 | normal | `--text-body` |
| Body Large | 18px | 1.5 | normal | `--text-body-lg` |
| Subheading | 20px | 1.3 | normal | `--text-subheading` |
| Heading | 24px | 1.3 | normal | `--text-heading` |
| Section | 44–52px | 1.1 | normal | `--text-section` |
| Hero | 64px | 1.0 | normal | `--text-hero` |
| Display | 96px | 1.0 | normal | `--text-display` |
| Mega | 128px | 1.0 | normal | `--text-mega` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Small controls / links | 8px (`--radius--8`) |
| Cards / panels | 16px (`--radius--16`) |
| Large cards / media | 24px |
| Chips / small pills | 28px |
| AI feature blocks | 60px (`--radius--ai-60`) |
| Buttons (pill) | 160px |
| Full round / avatars | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Rest | `rgba(0, 0, 0, 0.1) 0px 1.5px 8px 0px` | `--shadow-rest` |
| Raised | `rgba(0, 0, 0, 0.1) 0px 2px 7px 0px` | `--shadow-raised` |
| Float | `rgba(0, 0, 0, 0.1) 0px 20px 40px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** contained, generous side gutters; hero splits ~50/50 copy-left, product-visual-right
- **Section gap:** large vertical rhythm between full-width stripes
- **Card padding:** 12–20px
- **Element gap:** 8–16px

## Components
### Primary Button (pill CTA)
**Role:** The one high-intent action — "Get Started."
Fill `#6161FF`, text `#FFFFFF`, radius `160px` (fully rounded), padding `14px 32px`, Poppins 400/16px. In the hero this pill also reads as a subtle purple-to-violet gradient; the measured base fill is the solid `#6161FF`. No border, no shadow — the color alone signals the action.

### Small Button (compact pill)
**Role:** Secondary CTAs in dense areas (nav-adjacent, cards).
Fill `#6161FF`, text `#FFFFFF`, radius `160px`, padding `12px 16px`, Poppins 300/13px. Same lozenge shape, downshifted for tight rows.

### Outline Button
**Role:** "Contact sales" — a quieter parallel action.
Transparent fill, text and 1px border in `#6161FF`, radius `80px`, padding `12px 16px`, Poppins 300/13px. The purple outline keeps it in-brand without competing with the solid CTA.

### Ghost Button
**Role:** Tertiary control on light surfaces.
Fill `#F3F4F5`, text `#000000`, 1px `#B6B9CE` border, radius `28px`. A soft grey chip for low-emphasis toggles.

### White Chip Button
**Role:** Floating control over imagery/product visuals.
Fill `#FFFFFF`, text `#000000`, radius `28px`, padding `8px`. Rides on top of colorful product art with the rest shadow.

### Nav Link
**Role:** Top navigation ("AI platform", "Solutions", "Resources", "Enterprise").
Text `#535768`, Poppins 300/14px, radius `8px`, padding `8px 12px`. Understated grey with dropdown carets; the logotype "monday" stays lowercase black beside the tri-color rainbow mark.

### Text Link
**Role:** Inline links in body copy.
Text `#000000`, Poppins 400/16px, no underline at rest. monday leans on weight and color shift over decoration.

### Card
**Role:** Content and product tiles on the white canvas.
Fill `#FFFFFF`, radius `24px`, padding `12px`, rest shadow `rgba(0,0,0,0.1) 0px 1.5px 8px`. Title `#000000` at 20px, meta `#7C7B7B` at 14px. Depth comes from the soft shadow, not a border.

### Display Headline
**Role:** The hero statement.
`#000000`, Poppins **500** (never heavier), ~64px, line-height 1.0. Short declarative lines ("You lead. / Agents act.") stacked tight. Optionally one Playfair Display italic word for accent.

### Persona Tab Row
**Role:** Segmented filter under the hero visual (Marketing · Operations · IT · Product · Sales · HR · PMO).
Inactive tabs `#535768` with a grey dot; the active tab goes black with a filled dot. No pill, no box — just a color/weight state change.

### Section Wash
**Role:** Alternating full-width stripe.
Background `#F6F7FB` against the `#FFFFFF` default, centered heading in `#000000`. Separation by luminance step alone.

## Do's and Don'ts
### Do
- Keep the canvas pure `#FFFFFF` and let oversized black Poppins do the talking.
- Cap headline weight at **500** — scale up the size, not the weight, for emphasis.
- Use `#6161FF` for actions only: CTAs, active states, outlined buttons.
- Make every button a full pill (`160px`, or `80px`/`28px` for smaller variants).
- Reserve the product hues (`#00D2D2`, `#00C875`, `#FF3A5D`, `#E271FF`, `#fc0`) for illustration, chips, and product chrome.
- Convey depth with soft luminance and the faint `0 1.5px 8px` shadow before reaching for a border.

### Don't
- Don't set body or headline copy in the product colors — they are decorative, never text.
- Don't add heavy 700 headlines; that breaks the calm-medium display voice.
- Don't square off the buttons — the pill radius is the brand's signature.
- Don't scatter more than one purple as "the" action color; `#6161FF` owns the CTA role.
- Don't crowd the layout — the airy white gutters are part of the identity.
- Don't use Playfair Display for more than a single accent word.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default page and card ground. |
| 1 | Section Wash | `#F6F7FB` | Alternating stripe to separate content bands. |
| 2 | Inset Panel | `#F3F4F5` | Ghost buttons, inset controls, muted fills. |
| 3 | Deep Invert | `#181B34` | Dark footer / high-contrast inversion. |

## Elevation
Depth is almost entirely luminance- and shadow-driven, not border-driven. Cards sit on white with a whisper-soft `rgba(0,0,0,0.1) 0px 1.5px 8px` at rest, stepping to `0px 2px 7px` when raised and a dramatic `0px 20px 40px` for floating overlays (the "Processing… / Generating assets" popover in the hero). Section separation uses a single luminance step (`#FFFFFF` → `#F6F7FB`). Borders (`#CACBCD`, `#EFF0F6`) are the last resort, reserved for tables and inputs.

## Imagery
Bright, product-forward UI illustration: live-looking board screenshots (the "Marketing campaigns" table with status pills), floating AI-agent cards mid-task, and playful character avatars. The color comes from the product hues and gradient washes, not from photography. Icons are simple line glyphs in the left rail. Overall: clean, colorful, optimistic, and always demonstrating the product rather than staging a scene.

## Layout
Contained-width with generous gutters. The hero is a left-aligned copy column (eyebrow "AI work platform", giant black headline, sub-paragraph, purple pill CTA, fine-print reassurance) beside a right-side product visual that breaks its bounds with floating overlay cards. Below, a centered "Trusted by…" logo wall and full-width alternating stripes. Navigation is a light top bar: rainbow logomark + lowercase "monday" wordmark, grey dropdown links, and a right cluster ending in the purple "Get Started" pill. Everything is left- or center-aligned with lots of breathing room.

## Typography Signature
monday runs a near-single-family system: Poppins for display, UI, and body, distinguished only by size and a 300/400/500 weight ladder. The defining choice is **restraint at the top end** — hero headlines hold at weight 500 while ballooning to 64–128px with line-height 1.0, so the type feels big and friendly rather than shouty and bold. Small UI (nav, compact buttons) drops to Poppins 300, giving the chrome a light, unobtrusive touch. The lone flourish is a Playfair Display italic accent word, dropped sparingly into an otherwise geometric headline for a beat of editorial warmth. Body settles at 16px/1.5 in `#676879` or black — high legibility, zero ornament.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#000000` / secondary text: `#676879` / surface: `#F3F4F5` / section wash: `#F6F7FB` / border: `#CACBCD` / accent + primary action: `#6161FF`

## Example Component Prompts
1. **Primary CTA**: A fully-rounded pill button, `#6161FF` fill, white Poppins 400 text at 16px, padding 14px 32px, radius 160px, no border, no shadow. Label "Get Started."
2. **Hero block**: Left-aligned column on pure `#FFFFFF`. Small grey eyebrow "AI work platform" (Poppins, `#676879`), then a two-line black headline in Poppins 500 at 64px, line-height 1.0 ("You lead. / Agents act."), a 16px `#676879` sub-paragraph, then the purple pill CTA, then fine print "No credit card needed."
3. **Product card**: White card, radius 24px, padding 12px, shadow `rgba(0,0,0,0.1) 0px 1.5px 8px`. 20px black title, 14px `#7C7B7B` meta line, a colored status chip using a product hue (`#00C875` green or `#FF3A5D` red).
4. **Persona tab row**: Horizontal row of labels (Marketing, Operations, IT, Product, Sales, HR, PMO). Inactive = `#535768` text with a grey dot; active = black text with a filled dot. No boxes, Poppins 400.
5. **Outline button**: Transparent fill, `#6161FF` text and 1px border, radius 80px, padding 12px 16px, Poppins 300 at 13px. Label "Contact sales."

## Similar Brands
- **Asana** — kindred bright-white SaaS canvas with a single saturated brand accent and playful product illustration.
- **Notion** — same restraint of near-monochrome type with color reserved for accents, though monday runs far more saturated.
- **ClickUp** — shares the multi-hued per-product palette and colorful, dense board imagery.
- **Webflow** — comparable geometric-sans confidence and clean, airy marketing layout (monday's site is Webflow-built).
- **Pipedrive** — kindred friendly, high-energy B2B tone with rounded controls and vivid status colors.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Core */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-purple: #6161FF;
  --color-secondary: #676879;
  --color-grey-ink: #7C7B7B;
  --color-nav-ink: #535768;
  --color-surface-light: #F3F4F5;
  --color-grey-background: #F6F7FB;
  --color-grey-graphite: #CACBCD;
  --color-neutral-300: #EFF0F6;
  --color-dark-blue: #181B34;

  /* Colors — Neutrals & lines */
  --color-ink-585965: #585965;
  --color-ink-222222: #222222;
  --color-ink-8f8a8a: #8F8A8A;
  --color-grey-cccccc: #CCCCCC;
  --color-border-b6b9ce: #B6B9CE;
  --color-border-dcdfec: #DCDFEC;
  --color-border-e6e7ea: #E6E7EA;
  --color-neutral-100: #f7f7fc;
  --color-neutral-200: #f7f9fd;
  --color-gray-200: #f3f5fb;
  --color-grey-300: #e4e6f1;
  --color-light: #f0f3ff;
  --color-grey-background-alt: #f6f7fb;
  --color-primary-lighter: #f7f5ff;

  /* Colors — Deep / dark */
  --color-dark-blue-181b34: #181b34;
  --color-dark-1a242e: #1A242E;
  --color-neutral-800: #211f54;
  --color-gray-700: #282556;
  --color-gray-900: #160042;
  --color-dark-grey: #323338;
  --color-service-blue: #2f304c;
  --color-wm-contrast: #311cac;
  --color-secondary-color-1: #281ca5;
  --color-secondary-color-2: #f2f1ff;

  /* Colors — Purple family */
  --color-primary-base: #642eff;
  --color-accent-primary-1: #4a3aff;
  --color-4b00d7: #4B00D7;
  --color-bright-purple: #9450fd;
  --color-status-purple: #9d50dd;
  --color-digital-purple: #e271ff;
  --color-lavender: #DED4FC;
  --color-intelligent-blue: #97aeff;

  /* Colors — CRM (turquoise) */
  --color-turquoise: #00d2d2;
  --color-bright-blue: #24c4e6;
  --color-dark-blue-crm: #0c86ab;
  --color-crm-contrast: #006278;
  --color-crm-surface: #e7f4f6;
  --color-light-turquoise: #d1faff;

  /* Colors — Dev (green) */
  --color-primary-green: #00c875;
  --color-green: #00ca72;
  --color-bright-green: #73d5a4;
  --color-dark-green: #025231;
  --color-dev-surface: #e2f0e7;
  --color-dev-light-green: #bcfe90;
  --color-light-green: #b8fce0;
  --color-success-darker: #006638;
  --color-success-lighter: #ebfff6;

  /* Colors — Service (red/pink) */
  --color-service: #ff3a5d;
  --color-service-contrast: #b11b4a;
  --color-service-bg-001: #f5eff1;
  --color-pink-fe81e4: #FE81E4;
  --color-pink-f4cdff: #F4CDFF;

  /* Colors — Warm accents */
  --color-yellow: #fc0;
  --color-orange: #fdab3d;
  --color-warm-fff0c8: #FFF0C8;

  /* Colors — Agents */
  --color-agent-01: #c6dfff;
  --color-agent-02: #ffe100;
  --color-agent-03: #6161ff;
  --color-agent-04: #3ac9ff;
  --color-agent-05: #fda900;
  --color-agent-06: #fed4f5;
  --color-agent-07: #ff84e4;
  --color-agent-08: #0074fd;
  --color-general-shadow: #14142b0f;
  --color-swiper: #007aff;

  /* Typography — Families */
  --font-poppins: 'Poppins', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-playfair: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --text-meta: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-subheading: 20px;
  --text-heading: 24px;
  --text-section-44: 44px;
  --text-section-48: 48px;
  --text-section-52: 52px;
  --text-hero: 64px;
  --text-display: 96px;
  --text-mega: 128px;
  --leading-huge: 1;
  --leading-medium: 1.1;
  --leading-large: 1.3;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-ai-60: 60px;
  --radius-pill: 160px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-rest: rgba(0, 0, 0, 0.1) 0px 1.5px 8px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 20px 40px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Core */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-purple: #6161FF;
  --color-secondary: #676879;
  --color-grey-ink: #7C7B7B;
  --color-nav-ink: #535768;
  --color-surface-light: #F3F4F5;
  --color-grey-background: #F6F7FB;
  --color-grey-graphite: #CACBCD;
  --color-neutral-300: #EFF0F6;
  --color-dark-blue: #181B34;

  /* Colors — Product accents */
  --color-turquoise: #00d2d2;
  --color-bright-blue: #24c4e6;
  --color-crm-surface: #e7f4f6;
  --color-primary-green: #00c875;
  --color-green: #00ca72;
  --color-dark-green: #025231;
  --color-dev-surface: #e2f0e7;
  --color-service: #ff3a5d;
  --color-service-contrast: #b11b4a;
  --color-digital-purple: #e271ff;
  --color-yellow: #fc0;
  --color-orange: #fdab3d;

  /* Colors — Purple family */
  --color-primary-base: #642eff;
  --color-accent-primary-1: #4a3aff;
  --color-bright-purple: #9450fd;
  --color-status-purple: #9d50dd;
  --color-intelligent-blue: #97aeff;
  --color-lavender: #DED4FC;

  /* Colors — Agents */
  --color-agent-01: #c6dfff;
  --color-agent-02: #ffe100;
  --color-agent-04: #3ac9ff;
  --color-agent-05: #fda900;
  --color-agent-06: #fed4f5;
  --color-agent-07: #ff84e4;
  --color-agent-08: #0074fd;

  /* Typography — Families */
  --font-poppins: 'Poppins', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-playfair: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --text-meta: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-subheading: 20px;
  --text-heading: 24px;
  --text-section-44: 44px;
  --text-section-48: 48px;
  --text-section-52: 52px;
  --text-hero: 64px;
  --text-display: 96px;
  --text-mega: 128px;
  --leading-huge: 1;
  --leading-medium: 1.1;
  --leading-large: 1.3;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-ai-60: 60px;
  --radius-pill: 160px;
  --radius-round: 50%;
}
```