monday.com

Overview

monday.com is an AI work platform that orchestrates collaboration between people and intelligent agents to execute, manage, and operate business processes at scale. The design system embodies 'Collaborative Minimalism'—a philosophy that prioritizes clarity and focus through generous whitespace, vibrant accent colors, and purposeful interaction patterns. The visual language conveys both technical sophistication and human-centered approachability, making complex workflows feel intuitive and achievable. The brand personality is direct, optimistic, and action-oriented: the interface celebrates progress and removes friction. Voice example: 'Get more done with agents and people working side by side'—no jargon, no hesitation, just clear intent.

Colors

The color system is anchored by a signature vibrant purple (#6161ff) that serves as the primary accent—used exclusively on call-to-action buttons, active states, links, and focus indicators. This purple is energetic and trustworthy, signaling agency and control. The surface stack ranges from pure white (#ffffff) at the brightest level to soft lavender tints (#f0f3ff, #ded4fc) in container backgrounds, creating visual hierarchy without darkness. Supporting colors include a fresh green (#00ca72) for success states and completion, turquoise (#00d2d2) for secondary actions and CRM contexts, and a vibrant error red (#ff3a5d) for destructive actions. All text on white surfaces uses true black (#000000) for maximum legibility; secondary text uses the neutral gray (#676879) at 67% opacity. The out

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances friendliness with technical credibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures page sections; Headline-md (28px, 600 weight) breaks up content areas. Body text uses 16px at 400 weight with 24px line-height for comfortable reading; smaller body (14px) is reserved for labels and metadata. All headlines receive -0.01em to -0.04em negative letter-spacing to tighten the geometric letterforms and increase visual impact. On small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. Font weights are strictly 400 (regular), 500 (medium), and 600–700 (bold); no intermediate weights

Layout

The layout uses a 12-column grid with a max-width of 1280px (container-max-width: 1280px) and 24px gutters (gutter: 24px). The design favors a fluid, breathing approach: sections use lg spacing (40px) for vertical separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element gaps. The hero section spans full-width with a 40px horizontal padding on desktop, collapsing to 24px on tablet and 16px on mobile. Cards and containers use 24px internal padding with 1rem (16px) border-radius. White-space is treated as a first-class design element—negative space around headlines and CTAs increases visual prominence and reduces cognitive load. The grid is never fully populated; key content areas occupy 6–8 columns with intentional empty columns creating visual rest. Re

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts rather than heavy drop-shadows. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Standard Cards): surface-container-low (#f3f5fb) background with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, 8px blur radius shadow that suggests gentle lift. Level 3 (Elevated/Modals): surface-container (#e4e6f1) background with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)—a larger, 40px blur for maximum separation. Interactive elements (buttons, inputs) use no shadow at rest; on hover, they receive the

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners are used consistently to soften the technical nature of work software while maintaining professional clarity. Buttons and inputs use the full radius (10rem / 160px) to create pill-shaped affordances that feel approachable and clickable. Cards and containers use lg radius (1rem / 16px) for a balanced, modern appearance. Smaller UI elements (badges, tags, checkboxes) use md radius (0.75rem / 12px) or sm radius (0.25rem / 4px) for visual hierarchy. The full radius is reserved exclusively for primary CTAs and input fields, making them th

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #6161ff background, white text, 16px Poppins 400 weight, 14px vertical padding, 32px horizontal padding, and 10rem border-radius. On hover, the background shifts to #452aea (darker purple) with a 200ms ease-out transition and receives box-shadow: 0 3px 8px rgba(97, 97, 255, 0.3). On focus, add a 3px inset ring of rgba(97, 97, 255, 0.2). The button-secondary variant uses a transparent background with a 1px solid #6161ff border, same text color, and the same hover behavior (background becomes #ded4fc). All buttons include a 4px right margin for icon spacing and use cursor: pointer. Disabled buttons use background: #e4e6f1, text-color: #c3c6d4, and cursor: not-allowed.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use the primary purple (#6161ff) exclusively on CTAs, active states, and focus indicators—never use it for backgrounds or body text.
• Do maintain 24px gutters and 40px section spacing (lg) to create breathing room and reduce cognitive load.
• Do apply the full radius (10rem) only to buttons and inputs; use lg radius (1rem) for cards to maintain visual hierarchy.
• Do use Poppins exclusively; never mix typefaces or use system fonts in the component library.
• Do add box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover for interactive elements to signal elevation and interactivity.
• Do use the surface-container stack (#f0f3ff → #ded4fc) for backgrounds instead of pure white to create subtle visual separation.

**Don't**

• Don't use the primary purple (#6161ff) on large background areas or body text—it reduces contrast and readability.
• Don't apply shadows to disabled or inactive elements; use color desaturation (e.g., #e4e6f1) instead.
• Don't mix border-radius values within a single component; stick to the defined scale (sm, DEFAULT, md, lg, xl, full).
• Don't use font weights outside the approved set (400, 500, 600, 700); avoid 300 or 800 weights.
• Don't add borders to cards or containers; use background color and shadow to convey depth.
• Don't use more than two accent colors (primary purple + one supporting color like green or turquoise) in a single view.