Vibe Design System

# Vibe Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by monday.com. "Vibe Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Vibe Design System
**Owner:** monday.com
**Official documentation:** https://vibe.monday.com/
**Visual character:** Work-OS exuberance: status colors as the interface language, Figtree roundness, and boards that look like candy but bill like SaaS.

---

## Summary

monday.com's design system for work management platform with accessible components.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary Blue | `#0073ea` | `--primary-color` | Primary actions and links |
| Text | `#323338` | `--primary-text-color` | Primary text |
| Secondary Text | `#676879` | `--secondary-text-color` | Secondary text |
| White | `#ffffff` | `--primary-background-color` | Surfaces |
| Grey Background | `#f6f7fb` | `--secondary-background-color` | App background |
| Border | `#c3c6d4` | `--ui-border-color` | Borders |
| Negative Red | `#d83a52` | `--negative-color` | Errors and stuck status |
| Positive Green | `#00854d` | `--positive-color` | Done status |
| Warning Yellow | `#ffcb00` | `--warning-color` | Working-on-it status |
| Purple Accent | `#a25ddc` | `--color-purple` | Board accents |

## Typography

- **Body:** Figtree — weights 400, 500, 600, 700 — `Figtree, Roboto, 'Noto Sans', 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `32px` | `40px` |
| h2 | `24px` | `32px` |
| h3 | `18px` | `24px` |
| text1 (body) | `16px` | `24px` |
| text2 | `14px` | `20px` |

## Spacing

Base unit: `8px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| big | `16px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| medium | `0 6px 20px rgba(0,0,0,0.2)` |

## Motion

| Name | Value |
| --- | --- |
| productive-short | `100ms` |
| expressive | `250ms cubic-bezier(0, 0, 0.35, 1)` |

## Quick start (CSS)

```css
/* Vibe Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://vibe.monday.com/ */

:root {
  /* Color */
  --primary-color: #0073ea; /* Primary actions and links */
  --primary-text-color: #323338; /* Primary text */
  --secondary-text-color: #676879; /* Secondary text */
  --primary-background-color: #ffffff; /* Surfaces */
  --secondary-background-color: #f6f7fb; /* App background */
  --ui-border-color: #c3c6d4; /* Borders */
  --negative-color: #d83a52; /* Errors and stuck status */
  --positive-color: #00854d; /* Done status */
  --warning-color: #ffcb00; /* Working-on-it status */
  --color-purple: #a25ddc; /* Board accents */

  /* Typography */
  --font-body: Figtree, Roboto, 'Noto Sans', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-h1: 32px /* line-height 40px */;
  --text-h2: 24px /* line-height 32px */;
  --text-h3: 18px /* line-height 24px */;
  --text-text1-body-: 16px /* line-height 24px */;
  --text-text2: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-big: 16px;

  /* Elevation */
  --shadow-medium: 0 6px 20px rgba(0,0,0,0.2);

  /* Motion */
  --motion-productive-short: 100ms;
  --motion-expressive: 250ms cubic-bezier(0, 0, 0.35, 1);
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Vibe Design System by monday.com — monday.com's design system for work management platform with accessible components. Character: Work-OS exuberance: status colors as the interface language, Figtree roundness, and boards that look like candy but bill like SaaS. Use a primary colour near #0073ea, the typeface "Figtree" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Vibe Design System documentation](https://vibe.monday.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/monday-vibe) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._