name: monday-design
version: alpha
description: >
  monday.com is a high-contrast, high-energy Work OS brand that alternates pure-white
  and pure-black full-bleed sections, set in a tight bold neo-grotesque carried at
  enormous display sizes. The identity color is the three-bar logo trio (red, yellow,
  green); the interactive voltage is a periwinkle/indigo used on primary CTAs and the
  active tab. A secondary "status" palette — done-green, working-orange, stuck-red,
  plus blues and purples — comes straight from the product's board columns. Shapes are
  fully-pill; the personality is bold, colorful, confident.
colors:
  # Brand logo trio (identity, not UI fills)
  brand-red: '#FF3D57'
  brand-yellow: '#FFCB00'
  brand-green: '#00CA72'
  # Action voltage
  primary: '#5C5CFF'        # periwinkle/indigo primary CTA (on light)
  primary-strong: '#6C38FF' # vivid purple active tab pill (on dark)
  on-primary: '#FFFFFF'
  # Surface (the black/white duotone system)
  surface: '#FFFFFF'        # light sections
  surface-inverse: '#000000' # full-bleed black sections
  surface-card-dark: '#1C1C1E' # cards on black
  surface-secondary: '#F6F7FB'
  # Text
  on-surface: '#000000'     # ink on white
  on-surface-secondary: '#676879' # monday's signature muted grey body
  on-inverse: '#FFFFFF'     # text on black
  on-inverse-secondary: '#B0B0B8'
  # Hairlines
  hairline: '#E6E9EF'
  hairline-dark: '#2C2C2E'
  # Status palette (from the Work OS board columns)
  status-done: '#00C875'
  status-working: '#FDAB3D'
  status-stuck: '#E2445C'
  status-blue: '#579BFC'
  status-purple: '#A25DDC'
  status-yellow: '#FFCB00'
typography:
  display:
    fontFamily: '"Poppins", "Figtree", system-ui, -apple-system, sans-serif'
    fontSize: 96px # "You lead. Agents act." / "Work in context"
    fontWeight: 600
    lineHeight: 96px
    letterSpacing: -2px
  headline-lg:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 56px # "Get more done with agents and people..."
    fontWeight: 600
    lineHeight: 60px
    letterSpacing: -1px
  headline-md:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 28px
    fontWeight: 600
    lineHeight: 34px
    letterSpacing: -0.25px
  eyebrow:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 18px # "Collaborate as one team", "Custom agents to fit your needs"
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  body-lg:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 24px # hero subhead
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: normal
  body-md:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  label:
    fontFamily: '"Poppins", "Figtree", sans-serif'
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: normal
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px   # large feature cards
  full: 9999px # CTA pills, tab pills, chips, carousel arrows
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 80px
components:
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '16px 32px'
    iconRule: 'trailing arrow →'
  button-on-dark:
    background: '{colors.surface}'    # white pill on black sections
    textColor: '{colors.on-surface}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '16px 32px'
  button-outline-dark:
    background: 'transparent'
    textColor: '{colors.on-inverse}'
    border: '1px solid {colors.on-inverse}'
    rounded: '{rounded.full}'
    padding: '14px 28px'
  tab-pill:
    activeBackground: '{colors.primary-strong}' # vivid purple on dark
    activeTextColor: '{colors.on-primary}'
    inactiveBackground: '{colors.surface-card-dark}'
    inactiveTextColor: '{colors.on-inverse}'
    rounded: '{rounded.full}'
    padding: '14px 28px'
  feature-card-dark:
    background: '{colors.surface-card-dark}'
    textColor: '{colors.on-inverse}'
    rounded: '{rounded.xl}'
    padding: '32px'
  cookie-pill:
    primary: '{colors.primary}'
    rounded: '{rounded.full}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150ms
  duration-standard: 300ms
icons:
  library: lucide # outline set; monday ships its own product glyphs
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'inherit current text color; status dots use the status palette'

monday.com

Design spec — version alpha. Surfaces studied via Playwright: homepage (logged-out) — full-page screenshots + representative element probes. Brand/status hexes reconciled from captures and monday's known Work OS palette.

Overview

monday.com's marketing is built on high-contrast duotone: full-bleed pure-white ({colors.surface} #FFFFFF) and pure-black ({colors.surface-inverse} #000000) sections stacked alternately, with type doing almost all the work. Headlines are a tight bold neo-grotesque (Poppins/Figtree-family) carried at enormous display sizes — "You lead. Agents act.", "Work in context" — at 600 weight with strongly negative tracking. The brand identity color is the three-bar logo trio: red {colors.brand-red}, yellow {colors.brand-yellow}, green {colors.brand-green} — used as identity, not as UI fills.

The interactive voltage is a periwinkle/indigo {colors.primary} #5C5CFF on the light "Get Started" pill, which intensifies to a vivid purple {colors.primary-strong} #6C38FF for the active tab on black sections. Behind it all sits monday's beloved status palette — done-green, working-orange, stuck-red, plus blues and purples — lifted straight from the product's board columns, surfacing in chips, dots, and accents. Every interactive shape is a full pill. The personality is loud, colorful, and confident — but disciplined: color lives in the logo and status system; the layout itself is stark black-and-white.

Colors

Brand trio. The logo's {colors.brand-red} #FF3D57, {colors.brand-yellow} #FFCB00, {colors.brand-green} #00CA72 are identity marks. Use them for the logo and brand moments — not as button or text colors.

Action voltage. Primary CTA periwinkle {colors.primary} #5C5CFF (white label, trailing arrow) on light sections; the active tab pill on dark sections is the more saturated {colors.primary-strong} #6C38FF. On black sections, the primary action becomes a white pill (button-on-dark) for maximum contrast.

Duotone surfaces. White {colors.surface} and black {colors.surface-inverse} alternate full-bleed; cards on black use {colors.surface-card-dark} #1C1C1E; light wells use {colors.surface-secondary} #F6F7FB.

Text. Ink {colors.on-surface} #000000 on white; monday's signature muted {colors.on-surface-secondary} #676879 for body; white {colors.on-inverse} on black with #B0B0B8 secondary.

Status palette. From the Work OS columns: {colors.status-done} #00C875, {colors.status-working} #FDAB3D, {colors.status-stuck} #E2445C, plus {colors.status-blue} #579BFC, {colors.status-purple} #A25DDC, {colors.status-yellow} #FFCB00. Use for status dots, chips, and data accents — the colors users already associate with monday boards.

Typography

One family does it all: a bold neo-grotesque (Poppins / Figtree as the practical substitute). Weight strategy: 600 for every display/headline (enormous, tightly tracked), 400 for eyebrows and body, 600 for button labels. Display tracking is aggressively negative (-1 to -2px) at large sizes.

Token	Size	Weight	Tracking	Usage
display	96px	600	-2px	Hero ("You lead. Agents act.")
headline-lg	56px	600	-1px	Section headers
headline-md	28px	600	-0.25px	Card titles ("Meeting Scheduler")
eyebrow	18px	400	normal	Muted section eyebrows
body-lg	24px	400	normal	Hero subhead
body-md	16px	400	normal	Default body
label	16px	600	normal	Buttons, tabs

Layout

Base unit 8px, xxxl 80px section rhythm. The page is a stack of alternating full-bleed white and black sections, each centered to ~1280px. Patterns: giant centered headline → subhead → pill CTA; a horizontal chip/tab row (PMO & Ops, Marketing, IT…) with one purple-active pill; and dark feature cards in a carousel with circular prev/next arrows. Logo walls and stat lines anchor proof. Whitespace is generous; the black sections feel cinematic.

Elevation & Depth

Mostly flat, contrast-driven. On white, cards are subtle; on black, cards are a hair lighter (#1C1C1E) with soft radii and faint shadows. There's no heavy elevation ladder — the black/white jump between sections is the depth cue. Pills and cards carry gentle shadows at most.

Shapes

Radius vocabulary: {rounded.sm} 8px, {rounded.md} 12px, {rounded.lg} 16px, {rounded.xl} 24px (large feature cards), {rounded.full} for every interactive element — CTAs, tabs, chips, carousel arrows. monday is emphatically a pill brand; rectangles are only for big content cards.

Components

• button-primary — periwinkle #5C5CFF pill, white 600 label, trailing arrow ("Get Started →").
• button-on-dark — white pill with ink label, used as the primary action on black sections.
• button-outline-dark — transparent pill with white 1px border, white label, on black.
• tab-pill — pill row; active pill is vivid purple #6C38FF, inactive are dark grey on black.
• feature-card-dark — #1C1C1E, white text, 24px radius (e.g. "Research Agents", "Market Analyzer").
• status dot/chip — uses the status palette (done-green/working-orange/stuck-red…).

Motion

Snappy and confident: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 300ms for larger transitions and carousel slides, standard ease. Section transitions rely on the stark white↔black cut rather than scroll animation. No parallax; motion is crisp and product-like.

Iconography

Outline glyphs (Lucide as substitute for monday's product set), 2px stroke, 16/20/24px, inheriting the current text color (ink on white, white on black). Status dots are the exception, carrying their status-palette color.

Do's and Don'ts

• Do alternate full-bleed white and black sections for the signature high-contrast rhythm.
• Do keep the logo trio (red/yellow/green) as identity only — not as buttons or body color.
• Do carry primary actions on periwinkle #5C5CFF (light) and white pills (dark); use vivid purple #6C38FF for active tabs.
• Do reach for the status palette when showing states/data — users already know those colors.
• Do set headlines enormous, 600 weight, tightly tracked.
• Don't round less than a pill on interactive elements.
• Don't scatter the brand trio across the UI as accents — it dilutes the identity.
• Don't use monday's muted #676879 body grey for headings — keep headings pure ink/white.

Known Gaps

• The white/black duotone sections, bold neo-grotesque display, periwinkle primary + purple active tab, pill-everything shapes, and the muted #676879 body grey were observed directly. Exact hexes (logo trio, #5C5CFF/#6C38FF, status palette) are reconciled from captures and monday's documented Work OS palette — verify against brand tokens.
• Poppins/Figtree stand in for monday's brand face; confirm the exact licensed family.
• The authenticated Work OS app (boards, columns, dashboards) was not probed; the status palette is sourced from product knowledge.