Monday Violet
#6161ffPrimary CTA buttons, brand backgrounds, active states, gradient stops — saturated indigo reads as confident but approachable, not corporate
monday.com
monday.com
Website preview
The design language
monday.com runs a white-canvas productivity language with violet as its singular brand voice. The page breathes through generous whitespace, near-black typography, and pastel-colored card surfaces that borrow from a crayon-box palette — soft green, powder blue, peach, lavender, mint — creating a playful, human feeling that contrasts the serious SaaS market. Violet (#6161ff) owns the primary action and brand surfaces, while gradient text (pink→orange, cyan→violet) carries the hero's emotional charge. Components are pill-shaped and generously rounded: 160px buttons, 24px cards, 6px tags. The visual rhythm alternates between flat text-heavy sections and elevated product/board mockups that peek above the page edge, blurring the boundary between marketing and product.
Color palette
brand
Prism
#8181ffSupporting palette color for small decorative accents when the core palette needs contrast.
accent
Mint
#bcfe90Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Sky
#abf0ffBlue wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Apricot
#ff8940Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content; Hero headline gradient stop, warm accent in pink-to-orange text
Lavender
#eddff7Decorative card background, soft category surface
Periwinkle
#e7ecffDecorative card background, light brand-tinted surface
Cornflower
#93beffDecorative card background, secondary brand surface
Aqua
#d1faffDecorative card background, cyan accent surface
Cotton Candy
#e98dfeCard border accent, playful highlight stroke
Ultra Violet
#9450fdSaturated button alternative, deep brand accent
Electric Cyan
#3ac9ffSaturated button alternative, AI/feature highlight
Forest
#2a5c4eTeal action color for filled buttons, selected navigation states, and focused conversion moments
Peony
#fcd0f8Saturated button alternative, soft pink fill
Periwinkle Wash
#dbdbffBadge and tag background — tints pill elements with brand warmth
neutral
Ink
#333333Primary body text, headings, button labels — near-black with a hint of warmth avoids the harshness of pure #000
Slate
#535768Secondary text, nav links, icon fills, footer copy — cool gray supports hierarchy without competing with headings
Iron
#808080Muted helper text, disabled icon strokes, tertiary borders
Fog
#cacbcdCard and container borders, subtle dividers between content blocks
Mist
#d0d4e4Light card borders, the standard outline color for elevated card surfaces
Pebble
#dddfebBadge borders, pill-button outlines, input borders
Cloud
#f5f6f8Page canvas, section backgrounds, neutral button fills — the floor color everything floats on
Snow
#ffffffCard surfaces, button text, nav background, input fields
Shadow Dust
#e6e7eaBox-shadow tint, barely-there surface lifts
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
64px · 400 · 1.15 · -2.56px trackingThe quick brown fox jumps
text-56
56px · 400 · 1.3The quick brown fox jumps
text-52
52px · 400 · 1.2The quick brown fox jumps
heading-lg
48px · 500 · 1.15 · -0.96px trackingThe quick brown fox jumps
text-40
40px · 400 · 1.3The quick brown fox jumps
heading
36px · 400 · 1.2 · -0.54px trackingThe quick brown fox jumps
text-32
32px · 400 · 1.3The quick brown fox jumps
text-28
28px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Poppins
- Weights
- 300, 400, 500, 700
- Sizes
- 8, 12, 13, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 48, 52, 56, 64
- Line height
- 1.15–2.46
- Letter spacing
- Negative tracking tightens large display: -0.04em at 64px, -0.02em at 48–56px, -0.015em at 28–40px, -0.01em at body sizes. Positive +0.2em appears for small uppercase labels (likely 8–12px tracking for eyebrow text).
- Fallback
- Manrope, DM Sans, Plus Jakarta Sans
Sole typeface — used for all nav, body, headings, buttons, badges, and product UI. Geometric humanist sans with friendly rounded terminals; the rounded forms harmonize with the pill buttons and 24px card radii, making the whole UI feel approachable. Weight 300 for display headlines creates a soft, modern presence; weight 700 for nav and button labels carries authority without heaviness.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 8px
Border radius
nav
6pxcards
24pxbadges
6pximages
12pxinputs
6pxbuttons
160pxSpacing scale
1px2px3px4px6px8px10px12px13px14px15px16px20px24px25px32px38px40px44px48px64px80px96px173px182px285pxGuidelines
Do
- Use 160px border-radius for all buttons and CTAs — the pill shape is non-negotiable and defines the brand's friendly tone
- Reserve #6161ff for primary actions and brand panels; let it carry the most important decision on every screen
- Apply pastel accent backgrounds (Mint, Sky, Apricot, Lavender) to feature cards, not to buttons or text
- Set display headlines at 48–64px Poppins weight 300 with negative letter-spacing (-0.04em to -0.02em) — thin geometric headlines distinguish this from typical 700-weight SaaS heroes
- Use 24px radius for cards and 6px for badges/inputs — keep these two tiers consistent
- Apply the conic-gradient prism (#8181ff → teal → green → yellow → pink → back to violet) to brand dividers, the logo mark, and loading states only
- Use gradient text (pink→orange or cyan→violet) exclusively on hero headlines to inject warmth into the white canvas
Don’t
- Don't use square or 4px-radius buttons — the pill shape is the signature
- Don't apply pastel accent colors to body text, borders, or icons — they are surface treatments only
- Don't set type below weight 400 for body or below 500 for UI labels — weight 300 is reserved for display headlines
- Don't use pure #000000 for large text blocks — #333333 is warmer and reads as the system's true black
- Don't stack more than 3-4 pastel colors in adjacent cards — pick a 2-3 color accent set per section
- Don't use heavy drop shadows on cards — the system uses a single soft 48px-blur lavender-tinted shadow at 40% opacity
- Don't introduce new chromatic CTA colors — #6161ff is the single action color; saturated button alternatives exist for product UI, not marketing
Components
Primary Pill Button
Main CTA — the most prominent action on any pageFilled violet #6161ff background, white text in Poppins 16px weight 500, 160px border-radius (full pill), 13px vertical / 24px horizontal padding, inline arrow icon. Drives the hero 'Get Started' and any conversion moment.
Outlined Pill Button
Secondary CTA — paired with the primary to offer a lower-commitment pathTransparent background, 1px #535768 border, 160px border-radius, 13px vertical / 20px horizontal padding, Ink text. Used for 'Contact sales' next to the primary CTA.
Text Link Button
Tertiary action in nav and inline textNo background or border, Slate (#535768) text weight 500, often paired with a dropdown chevron. 8–10px horizontal padding for nav items.
Pastel Feature Card
Icon-and-text card used in feature grids and exploration menusSoft-tinted background (one of the accent palette: Mint, Sky, Apricot, Lavender, Periwinkle, Aqua), 24px border-radius, 24px internal padding, small monochrome icon, Poppins 16px weight 500 label. The 2:3 aspect ratio card is the system's workhorse tile.
Board Mockup Card
Product showcase — embedded board UI that floats above the page edgeWhite #ffffff surface, Mist (#d0d4e4) 1px border, 16–24px radius, soft shadow rgba(205,208,223,0.4) 0 2px 48px. Contains monday.com board rows with colored status pills and avatar stacks.
AI Prompt Card
Interactive AI input card for the Sidekick featureWhite surface, 6px radius, 12–16px padding, with a left brand-color icon, placeholder text in Slate, mic and send icons on the right. Hovers with subtle shadow lift.
Brand Gradient Panel
Full-bleed brand-colored section that frames product mockupsViolet #6161ff background fills the entire right column, white card sits on top with 24px radius. Used in the AI section to create a 50/50 split with visual contrast against the white left column.
Status Pill
Inline metadata badge in board rows and listsSmall pill (6px radius), tinted background matching status color (green/mint for done, orange for working, blue for stuck, red for stuck). Poppins 12–13px weight 500 label, 2px vertical / 8px horizontal padding.
Avatar Stack
Social/collaboration indicator in board rowsCircular avatars (full radius), 24–32px diameter, white 2px border separating overlapping members, slight negative margin between them.
Logo Strip
Social proof — 'Trusted by Fortune 500' rowSingle-row horizontal layout of monochrome black wordmarks at ~60% opacity, centered, generous horizontal spacing. No card backgrounds or dividers between logos.
Exploration Grid Card
'What would you like to explore?' category pickerWhite card, Mist 1px border, 6px radius, small square icon, 2-line Poppins label. Arranged in a 3-column grid on white panel with subtle shadow.
Navigation Bar
Top-level site navigationWhite #ffffff background, sticky top, 8px vertical / 16px horizontal padding for nav items, monday.com wordmark on left, primary actions ('Contact sales' outlined, 'Get Started' filled) on right. Logo uses full-color spectrum conic gradient mark.
Surfaces & elevation
Level 0
Canvas
#f5f6f8Page background — the soft warm-gray floor that sections sit on
Level 1
Card
#ffffffStandard card and component surface — the dominant elevated plane
Level 2
Brand Panel
#6161ffFull-bleed brand-colored section creating visual contrast for embedded product
Level 3
Tinted Accent
#bcfe90Pastel category surface for feature cards and exploration tiles
Card / Board Mockup
rgba(205, 208, 223, 0.4) 0px 2px 48px 0px
Elevated Card (hover/featured)
rgba(0, 0, 0, 0.15) 0px 5px 45px 0px
AI Prompt Card (active)
rgba(0, 0, 0, 0.15) 0px 4px 40px 0px
Layout & imagery
Layout
Max-width ~1200px centered content with full-bleed product mockups that break the container. Hero is a centered single-column headline with gradient text and one CTA. Below: social-proof logo strip, then alternating 2-column text+product sections. The AI feature uses a 50/50 split with a violet brand panel on the right housing a product mockup. Vertical rhythm is generous (64px section gaps) with soft gray bands (#f5f6f8) breaking up white sections. Navigation is a single sticky white top bar with logo left, links center, dual CTAs right. No sidebar, no mega-menu visible on this page.
Imagery
Visuals are dominated by product UI mockups — actual monday.com board screens with colored status pills, avatar stacks, and AI sidebar panels — rather than photography or illustration. The product IS the hero: boards peek above section edges at skewed angles, creating a 'leaking into the marketing page' effect. Logo strip uses monochrome black wordmarks. No lifestyle photography, no human portraits, no stock imagery. The only decorative visual is the conic-gradient prism mark in the logo.
Design notes
Agent Guide
primary action: #6161ff (filled action) Create a Primary Action Button: #6161ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. ## Quick Color Reference - Primary text: #333333 - Secondary text: #535768 - Page background: #f5f6f8 - Card surface: #ffffff - Card border: #d0d4e4 - Brand accent: #6161ff ## 5 Example Component Prompts 2. **Pastel Feature Card**: Background #abf0ff (or one of the accent palette: #bcfe90, #ff8940, #eddff7, #93beff, #d1faff). 24px border-radius. 24px internal padding. Small monochrome icon top-left, Poppins 16px weight 500 label below in #333333. 3. **Board Mockup Card**: White #ffffff surface, 1px #d0d4e4 border, 24px border-radius, soft shadow rgba(205,208,223,0.4) 0 2px 48px. Contains rows with colored status pills (6px radius, tinted backgrounds like #bcfe90, #ff8940) and circular avatar stacks. 4. **AI Prompt Card**: White surface, 6px border-radius, 16px padding, brand-color icon left, placeholder text 'Analyze sales pipeline' in Poppins 16px weight 500 #333333, mic and send icons right. 5. **Logo Trust Strip**: Centered eyebrow text 16px Poppins weight 400 #535768 reading 'Trusted by over 60% of the Fortune 500'. Below: single horizontal row of 7–8 monochrome black wordmarks (Holt Renfrew, Universal, Coca-Cola, Lionsgate, Carrefour, BD, Glossier style) at ~60% opacity, generous 32–48px gap between logos, no dividers.
Gradient System
Gradients serve three roles: (1) **Hero headline text** — linear pink-to-orange #fe81e4 → #fda900 injected into display copy to create emotional warmth against the white canvas. (2) **Brand prism** — conic gradient cycling violet → teal → green → yellow → pink → violet, used only for the logo mark and divider lines, never as a surface fill. (3) **CTA and illustration accent gradients** — short 2-stop linear gradients (cyan→violet, orange→pink) used sparingly on dark product panels and feature illustrations. Gradients are never applied to body text or button backgrounds.
Component Visual Language
The system follows a **flat-with-soft-shadow** approach: components are mostly flat-shaded with surfaces distinguished by pastel background tints rather than borders or heavy elevation. The single soft lavender-tinted shadow (rgba(205,208,223,0.4) 0 2px 48px) lifts cards just enough to read as elevated without introducing the 'skeuomorphic card stack' look. Buttons are fully filled (no outline-first patterns) and rely on the pill radius for personality. The visual density is low — generous internal padding (24px in cards, 13–16px in buttons) and 64px between sections — making the system feel like a spacious workshop rather than a dense dashboard.
Similar brands
Asana
Same product-as-hero pattern with embedded UI mockups and generous whitespace, though Asana leans warmer/coral while monday.com owns violet
Notion
Both use soft pastel card surfaces and playful multi-color category tiles, though Notion is more text-dense and monday.com is more visually bold
ClickUp
Similar feature-rich SaaS marketing with product screenshots breaking the page boundary, though ClickUp's palette is more saturated and monday.com stays pastel
Linear
Shared single-accent-color brand strategy (Linear's purple = monday.com's violet) with minimal chrome and geometric sans typography
Airtable
Comparable 'friendly enterprise' positioning with colored record-type cards, though Airtable uses sharper corners and a wider accent palette
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
