UI Skillbook
2

Monday.com DESIGN.md

Brands

Work management with vivid color coding, polished SaaS structure, and strong product modularity. Monday.com's public site uses bright multicolor accents, white surfaces, dark text, and highly polished work-platform…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#006bffBlue design systems
Fonts
PoppinsSF Mono

Colors in this file

  • #e7eaf3

    Unnamed

  • #006bff

    Unnamed

  • #1f2430

    Unnamed

  • #ff3d71

    Unnamed

  • #00c875

    Unnamed

  • #ffcb00

    Unnamed

  • #784bd1

    Unnamed

  • #ffffff

    Unnamed

Work management with vivid color coding, polished SaaS structure, and strong product modularity. Monday.com's public site uses bright multicolor accents, white surfaces, dark text, and highly polished work-platform demos.

1. Visual Theme & Atmosphere

Overall Aesthetic

Monday.com feels like structured work software with energetic visual coding.

Mood & Feeling

  • Productive
  • Bright
  • Modular
  • Modern
  • Team-oriented

Design Density

Medium density. Visual density comes from board states and tags, but page framing stays clean.

Visual Character

  • White layout with multicolor chips and status coding
  • Rounded product cards
  • Crisp board and workflow demos
  • Confident SaaS polish

2. Color Palette & Roles

TokenHexRole
--monday-blue#006BFFPrimary action
--monday-pink#FF3D71Accent/status
--monday-green#00C875Positive status
--monday-yellow#FFCB00Highlight/status
--monday-purple#784BD1Support accent
--monday-white#FFFFFFMain surface
--monday-ink#1F2430Text
--monday-border#E7EAF3Borders

3. Typography Rules

Font Stack

css--font-display: "Poppins", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Poppins", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 60/700, H1 42/700, H2 30/700, Body 16/400, Small 14/400

Typography Philosophy

Use a clean modern sans with friendly energy and strong work-platform hierarchy.

4. Component Stylings

css.button-primary { background:#006bff; color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:600; }
.button-secondary { background:#fff; color:#1f2430; border:1px solid #e7eaf3; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #e7eaf3; border-radius:24px; box-shadow:0 12px 24px rgba(31,36,48,.06); }
.status-pill { border-radius:999px; padding:6px 10px; font-size:12px; font-weight:600; }

Component Notes

  • Board and workflow visuals should feel polished and colorful
  • Multicolor status coding is core to the feel

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

  • Organize by workflow, role, and platform outcome
  • Use polished board demos and AI feature callouts
  • Keep visual color coding structured, not chaotic

6. Depth & Elevation

Monday uses soft SaaS elevation around dense workflow cards.

7. Do's and Don'ts

Do

  • Keep it bright, modular, and work-platform clear
  • Use status colors intentionally
  • Preserve polished board and dashboard framing

Don't

  • Don’t flatten it into monochrome SaaS
  • Don’t let colors become random decoration

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack boards and dashboards
  • Preserve status visibility and CTA clarity

9. Agent Prompt Guide

textDesign this like monday.com: white polished work-platform surfaces, strong blue CTA anchors, vivid status colors, rounded board demos, and modular productivity SaaS energy.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/monday.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "monday" })

Related Design.md files

Calendly

Brands · Inter

Scheduling product design with calm blue trust, clean booking flows, and precise availability selection.

Trello

Brands · Charlie Display

Visual task management with playful productivity and board-first clarity. Trello's public site uses a bright, approachable design language rooted in white, pale blue, bold blue gradients, rounded cards, and simple…

Zillow

Brands · Zillow Sans

Real-estate discovery with high-trust search flows and map-driven clarity. Zillow's public site uses a white and soft-blue foundation, dark text, large search-led hero areas, and the strong Zillow blue (#006AFF) to…

1Password

Brands · Inter

Identity and access security with a calm, premium SaaS frame. 1Password's public site uses deep indigo and blue gradients, white surfaces, rounded cards, and a modern sans stack to make security feel approachable and…

Coursera

Brands · Source Sans 3

Online learning with marketplace breadth, academic trust, and blue-led clarity. Coursera's public site uses a clean sans system, white and pale-blue surfaces, structured category browsing, and strong Coursera blue…

Wix

Brands · Wix Madefor

Friendly no-code web-design platform with bright utility color and high customization energy. Wix combines the custom Madefor typeface, bold brand colors, theme-driven site styling, and flexible visual tooling to…

All Design.md filesBrowse by font