Vibe (monday design system)
Definition
monday’s internal design system. Recently rebuilt by elad’s team to support themable white-labeling — colors, fonts, borders, radii, shadows can all be swapped to produce a brand-distinct product without re-implementing components. Ships with a Figma component library and a Claude Code design-system that stay in sync.
For harmony-core, Vibe is the recommended foundation: use the atoms / tokens layer (typography, color tokens, spacing, primitives) and build molecules / organisms yourself with AI tools. This avoids the trap of either (a) building everything from scratch (slow) or (b) inheriting a heavy ready-made system that constrains the brand (e.g. MUI lock-in pain).
Related decisions
(No formal DEC yet — adoption is being validated via AI-027 experiment.)
Sources
- ai-first-design-setup-2026-04-20 — origin of the recommendation; Elad demoed the theming flow
Related entities
Related concepts
- designer-as-developer — Vibe’s themable Figma + Claude Code handoff makes this practical
- claude-code — Vibe ships skills/components for it
- bring-your-own-agent — Vibe-as-foundation gives harmony.ai brand independence while staying within monday’s ecosystem
- wedge-strategy — Vibe theming supports the “operate as independent startup, can’t use monday branding directly” constraint
Tradeoffs
- Pro: instant Figma library + Claude Code design system, accessibility built-in, the Vibe team will support harmony.ai as a real consumer (positive feedback loop).
- Pro: Vibe-the-product can’t move fast publicly (sits on a $1B+ deployed product that can’t suddenly look different), but Vibe-the-system is already moving fast internally for theming use cases.
- Con: the new Figma MCP currently produces broken components for some shapes (e.g. dropdowns) — atoms work, complex components don’t. So adopt atoms only for now; build complex components yourself.