---
title: "monday.com design system"
variant: extended
source: https://monday.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/monday-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# monday.com · Design System

> Bright, spacious storytelling for work powered by AI.

**Theme:** light · **Industry:** ai · **Source:** https://monday.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious, white-first homepage introduces monday.com as an AI workspace for people and agents. Oversized Poppins headlines, vivid violet calls to action, and layered product interfaces carry the story from capabilities to enterprise trust.

## North star

Keep the canvas bright and spacious, use black Poppins for confident hierarchy, and save vivid violet for clear actions.

## Overview

The page uses a predominantly white canvas, with occasional pale-gray bands to distinguish selected sections without breaking the continuous scroll. Black Poppins headlines provide strong contrast and a rounded, contemporary character; large display lines are often left-aligned or centered according to the section. Body copy and navigation stay restrained in muted gray. A saturated violet is reserved for primary calls to action and select interface accents, while pink, lavender, and warm yellow appear sparingly in badges, gradients, and product visuals. The layout alternates between broad two-column storytelling and centered showcases, with generous vertical breathing room and a compact, disciplined content density inside each block. Product screenshots, workflow diagrams, customer proof, and colorful agent illustrations make the page feel tangible. Rounded cards, pill-shaped buttons, and light media shadows soften the crisp typography and keep the interface approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and primary background for most content sections. |
| Action Violet | `#6161ff` | `--color-action-violet` | brand | Primary Get Started buttons and selected interface or text accents. |
| Workspace Ink | `#000000` | `--color-workspace-ink` | neutral | Headlines, prominent text, and inverse surfaces within product visuals. |
| Soft Fog | `#f3f4f5` | `--color-soft-fog` | surface | Pale section bands, cards, and subtle product-media backgrounds. |
| Quiet Graphite | `#7c7b7b` | `--color-quiet-graphite` | neutral | Muted supporting copy and subdued descriptive text. |
| Slate Link | `#585965` | `--color-slate-link` | neutral | Navigation and link text, including secondary menu items. |
| Warm Spark | `#feaa2f` | `--color-warm-spark` | accent | Small warm highlights inside decorative gradients and product visuals. |
| Playful Pink | `#ff94e8` | `--color-playful-pink` | accent | Pink gradient highlights and colorful details inside product illustrations. |
| Silver Hairline | `#cacbcd` | `--color-silver-hairline` | semantic | Fine outlines around cards, controls, and media. |
| Media Mist | `#e9ebed` | `--color-media-mist` | surface | Subtle borders or pale edges within product media. |
| Lavender Gray | `#c3c6d4` | `--color-lavender-gray` | semantic | Occasional low-emphasis text detail in interface and visual content. |
| Muted Periwinkle | `#b6b9ce` | `--color-muted-periwinkle` | semantic | Soft control borders and understated interface accents. |
| Lilac Haze | `#ded4fc` | `--color-lilac-haze` | accent | Light lavender fills in occasional cards and button-like product details. |
| Candy Lavender | `#f4cdff` | `--color-candy-lavender` | accent | Decorative card accent and colorful product-story detail. |
| Vanilla Glow | `#fff0c8` | `--color-vanilla-glow` | accent | Warm decorative card highlight rather than a core page surface. |
| Deep Violet | `#4b00d7` | `--color-deep-violet` | accent | Occasional strong purple accent within colorful cards and product illustrations. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f4f5` (Soft Fog) · `--color-surface-2` → `#000000` (Workspace Ink) · `--color-text` → `#000000` (Workspace Ink) · `--color-text-muted` → `#7c7b7b` (Quiet Graphite) · `--color-text-subtle` → `#585965` (Slate Link) · `--color-border` → `#cacbcd` (Silver Hairline) · `--color-accent` → `#6161ff` (Action Violet) · `--color-accent-2` → `#f4cdff` (Candy Lavender) · `--color-accent-3` → `#4b00d7` (Deep Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f4f5` | 19.07:1 | AAA |
| `#7c7b7b` | `#ffffff` | 4.22:1 | AA-large |
| `#7c7b7b` | `#f3f4f5` | 3.83:1 | AA-large |
| `#7c7b7b` | `#000000` | 4.98:1 | AA |
| `#585965` | `#ffffff` | 6.93:1 | AA |
| `#585965` | `#f3f4f5` | 6.29:1 | AA |
| `#585965` | `#000000` | 3.03:1 | AA-large |
| `#6161ff` | `#ffffff` | 4.5:1 | AA |
| `#6161ff` | `#f3f4f5` | 4.09:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(243, 244, 245), rgba(243, 244, 245, 0))`
- `linear-gradient(270deg, rgb(243, 244, 245), rgba(243, 244, 245, 0))`
- `radial-gradient(circle closest-side, rgba(254, 155, 11, 0.85) 0%, rgba(255, 129, 228, 0.85) 50%, rgba(97, 97, 255, 0) 100%)`
- `linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 400, 300, 500, 600, 700 | Used throughout for navigation, headings, body copy, buttons, and captions. | Outfit |

- **Poppins:** Use weight and scale for hierarchy; display and major headings use tight negative tracking, with mostly sentence-case text.

### Type scale — Perfect Fifth (ratio ≈ 1.557, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 500 | 1.3 | -0.04em | — | Poppins | Oversized campaign-style display headlines in prominent storytelling moments. |
| h1 | 56px | 400 | 1.2 | -0.03em | — | Poppins | Primary page and hero headline. |
| h2 | 52px | 500 | 1.1 | -0.04em | — | Poppins | Major section headlines, often centered or left-aligned. |
| h3 | 44px | 400 | 1.1 | -0.02em | — | Poppins | Subsection and feature headlines. |
| h4 | 24px | 400 | 1.4 | -0.02em | — | Poppins | Supporting feature titles and card headings. |
| body | 14px | 400 | 1.6 | 0 | — | Poppins | Explanatory copy, product descriptions, and customer stories. |
| caption | 13px | 300 | 3.08 | 0 | — | Poppins | Compact supporting labels and secondary explanatory text. |
| button | 13px | 400 | 1 | 0 | — | Poppins | Text inside primary and secondary action buttons. |
| nav | 14px | 300 | 1 | 0 | — | Poppins | Top-level navigation labels and menu items. |
| link | 13px | 300 | 3.08 | 0 | — | Poppins | Inline links and lightweight secondary actions. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 3, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 px.
- Section rhythm 40px · element gap 8px · card padding 12px · max content width 1360px.

A centered page frame reaches a measured maximum width of 1360px, with the opening hero and several feature stories arranged in two columns. Other sections shift to centered headings, multi-column feature grids, or wide product showcases. Measured section spacing uses a 40px section gap and a compact 4px-based spacing system; keep internal content orderly while allowing broad vertical breathing room between stories. Most sections remain white, with selected full-width pale-gray bands. Align text to the story: left for split features, centered for showcase and proof sections.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `16px` · badge `4px` · nav `8px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `14px` · xl `16px` · 2xl `24px` · pill `9999px`
- Shadow `sm` (media): `rgba(0, 0, 0, 0.1) 0px 1.5px 8px 0px`
- Shadow `sm-2` (media): `rgba(0, 0, 0, 0.1) 0px 2px 7px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 0px 20px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.1) 0px 20px 40px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The overall treatment is mostly flat, with section bands and clean whitespace doing most of the separation. Product media receives subtle shadows, and some feature cards use soft elevation. Hairline borders define selected controls and card edges. Rounded media frames and cards create depth without heavy outlines or strong drop shadows.

## Imagery

Product UI screenshots and interface mockups dominate, showing boards, task views, agent interactions, dashboards, and workflow diagrams. They are arranged as floating or layered panels, with small human portraits and bright category colors appearing inside the mockups. The page also uses customer and compliance visuals, plus occasional illustrated agent artwork. Keep visuals crisp and lightly framed; colorful details inside mockups should not overwhelm the white canvas.

## Components

### Primary CTA

Violet #6161ff pill button with white text; the measured Get Started variants use rounded ends and compact Poppins labels.

### Top navigation

Lightweight horizontal header on white, with black navigation text, muted links, and right-aligned contact and signup actions.

### Hero split

Large left-aligned headline and concise copy sit beside a layered marketing-workspace product visual.

### Feature showcase

Centered section titles introduce product media, agent cards, and interface examples, often with supporting feature text.

### Pale section band

Full-width #f3f4f5 background distinguishes control, integration, and customer-proof sections.

### Product card

Rounded UI panels and cards present agent capabilities or workflows; cards may use white or pale-gray surfaces and gentle shadows.

### Customer proof card

A broad pale-gray story area contains colorful customer evidence, metrics, quotation text, and navigation controls.

### Measured component styles

- **Primary button** (“Get Started”): background #6161ff · text #ffffff · border 1px solid #6161ff · radius 160px · padding 12px 16px · 300 13px Poppins
- **Secondary button** (“Operations”): background #f3f4f5 · text #323338 · border 1px solid #f3f4f5 · radius 32px · padding 8px 12px · 400 14px Poppins
- **Link** (“Pricing”): transparent background · text #585965 · radius 0px · padding 0px · 300 13px Poppins
- **Card** (“Market Analyzer Scans industry news and ”): background #ffffff · text #ffffff · radius 24px · padding 12px · 400 16px Poppins
- **Badge** (“Retail and CPG”): background #ffffff · text #000000 · radius 4px · padding 8px 12px · 400 14px Poppins
- **Navigation item** (“AI platform Solutions Resources Enterpri”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Poppins

## Do

- Use white as the dominant page canvas.
- Set headings and body copy in Poppins or a close substitute.
- Reserve #6161ff for primary actions and selected accents.
- Use #f3f4f5 bands to separate key content chapters.
- Pair large headlines with concise supporting copy.
- Present product UI in rounded, clearly layered panels.

## Don't

- Do not fill every section with saturated color.
- Do not use heavy shadows as the main source of hierarchy.
- Do not make every heading centered; follow the section story.
- Do not let decorative mockup colors define the page palette.
- Do not crowd the broad section transitions with extra content.
- Do not style secondary navigation as primary CTAs.

## Agent prompt

Build a new page in the monday.com homepage style: use a bright #ffffff canvas and Poppins throughout, with oversized black #000000 headlines and restrained gray supporting text. Use #6161ff for the primary CTA, keeping other bright colors limited to accents inside product visuals. Separate selected chapters with pale #f3f4f5 bands. Compose a clear editorial rhythm: split text-and-product layouts, centered showcase headings, and occasional multi-column proof or feature grids. Show the product through crisp interface panels, workflow diagrams, and layered screenshots rather than generic decoration. Use rounded cards and pill actions, fine #cacbcd borders where needed, and subtle shadows only on media. Preserve generous whitespace between sections while keeping copy and controls compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: headline and CTA on the left, product interface visual on the right. | Primary signup CTA, Category shortcuts | Large headline, Pill action buttons, Layered product mockup |
| 2 | logo-cloud | Centered trust statement above a horizontal row of customer logos. | Social proof | Centered label, Monochrome logo row |
| 3 | feature-split | Centered section heading followed by a two-column feature story and product screenshot. | Feature tabs, Get Started link | Centered heading, Tab row, Product UI panel |
| 4 | feature-grid | Centered title above a broad showcase combining a side list and agent cards. | Selectable use cases, Carousel controls | Multi-card showcase, Compact list controls |
| 5 | feature-split | Two-column text and product story with interface panels distributed around the central visual. | Context explanation, Get Started action | Large left headline, Floating product panels |
| 6 | feature-grid | Pale-gray band with a large left-aligned title and a three-column set of safeguards. | Security capability scan | Section band, Icon-led feature grid |
| 7 | integrations | White single-column story with a large headline and supporting integration content. | Get Started action, Provider connectivity | Oversized headline, Small integration icons |
| 8 | feature-split | Pale-gray wide feature panel combining explanatory text with a workflow interface visual. | Connect external agents | Wide rounded media card, Text-and-interface split |
| 9 | feature-split | Pale-gray wide feature panel with explanatory copy beside a dark AI-tool interface mockup. | Use external assistant | Wide rounded media card, Dark embedded product mockup |
| 10 | how-it-works | Centered headline and supporting statement above a vertically presented workflow diagram. | Get Started action, Workflow explanation | Large centered title, Flowchart cards |
| 11 | testimonials | Pale-gray proof section with a title, a customer quotation card, and a metric-led story card. | Customer story, Carousel navigation, Contact sales | Quote panel, Metric card, Rounded controls |
| 12 | feature-grid | Centered enterprise headline above a row of security and industry-recognition cards. | Explore trust information, Learn more links | Multi-column cards, Certification marks |
| 13 | cta | Wide closing message with two side-by-side actions beneath it. | Get Started, Contact sales | Large display text, Pill CTA pair |
| 14 | footer | Multi-column sitemap above a lower utility row of locale, social, legal, and app-store links. | Site navigation, Locale selection, Social links | Dense link columns, Partner banner, Bottom utility bar |

## Source CSS custom properties (selected)

```css
--text-color--white: #fff;
--crm--primary: #00d2d2;
--secondary: #676879;
--radius--16: 1rem;
--grey-background-color: #f6f7fb;
--text-color--black: #000;
--primary-green: #00c875;
--dev--primary: #00c875;
--radius--8: .5rem;
--products--service-bg-001: #f5eff1;
--crm--surface: #e7f4f6;
--dev--surface: #e2f0e7;
--_font-sizes---fw1-font-48: 3rem;
--surface-light: #f3f4f5;
--elements-webflow-library--accent--primary-1: #4a3aff;
--radius--ai-60: 3.75rem;
--flowui-component-library--primary-lighter: #f7f5ff;
--_text-styles---line-height: 1.5;
--_text-styles---font-size: 1rem;
--_typography---text-main: 1rem;
--crm-surface: #e7f4f6;
--dev-surface: #e2f0e7;
--elements-webflow-library--general--shadow-01: #14142b0f;
--elements-webflow-library--secondary--color-1: #281ca5;
--elements-webflow-library--secondary--color-2: #f2f1ff;
--flowui-component-library--primary-base: #642eff;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/monday-com