monday.com, exactly

Left: monday's own screen. Right: our copy, built only from this design system. The copies work: open one full size to point at rows, click a status, open the ⋯ menu, fold a group, or open an item's card. Each copy has a slider to compare it with the original.

1 · A board (monday's public board, captured 12 Oct 2026)

2 · The app with an item card open (monday's help-centre recording)

3 · The Marketing Plan board in dark and night (monday's help centre)

4 · Home page with the account menu and the "Change theme" menu open

monday's own pictures of the full app

More real monday screens we found (not rebuilt yet)

monday's own pictures from its help centre (public web archive copies, 2024 to 2026). They show screens a public board cannot: filters, search, dashboards, forms, automations, inbox, profile and admin. Click one to see it full size.

Advanced filters: "Where Status is Done", And / Or groups Search Everything: results across boards, files and updates Status column: the label picker open over the board Timeline column: picking a date range, many rows selected Subitems in several levels, with a Gantt-style timeline Item description: the item page with an empty-state description Board views menu: Chart, Calendar, Battery and Numbers on one dashboard Dashboard: widgets for a whole workspace Chart widget with its settings panel Calendar view with its settings panel Battery widget: how far along a project is Inbox: updates from every board in one feed WorkForms: a form built from a board Automation builder: "When status changes, then notify someone" Your profile page Administration: account settings

monday names colours by their job ("primary", "text", "border"), so one name works in all three themes. Every value below is read live from monday-tokens.css, so it is exact.

Status and label colours

These fill status cells, group strips and labels. monday puts white text on all of them, even the pale ones; the contrast check below shows where that fails. Click a colour to copy its name.

Contrast check (light / dark / black)

4.5 : 1 is the minimum for normal text, 3 : 1 for large text and icons. Worked out live from the tokens. Disabled text is allowed to be faint (it is not meant to be read as an action).

Two free fonts: Poppins (round and friendly) for titles and Figtree for everything you read. Sizes come in a short scale. One honest surprise: monday's public board does not download either font, so there the text falls back to Roboto measured.

All 277 icons from monday's open-source set (@vibe/icons). Thin line icons on a 20 px grid that take the text colour. Search, then click one to copy its name.

Small corners (4 px) on buttons and inputs, 8 px on cards and menus, 16 px on big dialogs. Space grows in steps of 4. Board rows are 36 px; buttons are 24 / 32 / 40 / 48 px tall.

Space

Four soft shadows. In dark themes they turn navy or black, and popovers also get a thin outline so they still stand out.

Every part below uses monday's own component CSS (Vibe), unchanged. Point at things, click them, use Tab: hover, pressed, focus and disabled are all real.

Buttons

Inputs & choices

Status cells & labels

Board table

Menus & tooltips

Tabs & avatars

• Main table
• Kanban
• Chart
• Gantt

EJMPLD ATOL+3

Tabs 16 px words, a 2 px blue line grows under the open tab in 100 ms, hover grey · avatars round, 32 px (28 / 20 smaller), coloured initials, a 2 px ring when they overlap · empty person monday's grey outline icon.

Toasts & dialogs

App frame & item card

A small working board made with this design system. Click a status to change it, add an item, rename one by double-clicking, fold a group. The colour battery under each group updates as you go.

Every state below was seen on monday's own board, in all three themes, and then copied. The pictures are monday's.

State	What you see	Values (light · dark · black)	monday's own picture
Row under the mouse	Row turns light grey; › and the expand button appear over the name; ⋯ appears left of the row	#F4F5F8 · #33354B · #272729; status cells at 70%
Row selected	Row turns light blue, a grey line around the name, the full name shows in a dark tooltip	#CCE5FF · #133774 · #133774
Status clicked (read-only)	"You can only view this board" in a dark tooltip	tooltip #323338 · white · #EEEEEE
⋯ menu open	Button turns light blue; a white menu card drops below	button #CCE5FF · #133774; card white · #30324E · #2C2C2C
Keyboard focus	A soft blue ring outside, a thin darker line inside	0 0 0 3px hsla(209,100%,50%,.5) + inset 0 0 0 1px #0060B9	from monday's code
Disabled	Everything at 38% strength	--disabled-component-opacity: .38	from monday's code

Movement

Click a card to feel the timing. Short ones are for hovers and small changes; long ones for things that enter the screen.

monday has three real themes: Light, Dark (deep navy) and Black (near-black). All three are in monday's own code, and we captured the same board in all three. Use the switch at the top: this whole page, both copies and every component change with it.

What makes monday feel easy, and what AltLeads can take from it.

All 29 laws from lawsofux.com, each checked against what we really saw on monday. "Not seen" means we could not see it without logging in, so we did not guess.

To build something that looks like monday, link these files and use the class names. Put dark-app-theme or black-app-theme on the page to switch theme.

<link rel="stylesheet" href="monday/monday-tokens.css">   <!-- colours, sizes, letters, movement: 3 themes -->
<link rel="stylesheet" href="monday/monday-vibe.css">     <!-- buttons, inputs, menus, tabs, toasts ... (Vibe, unchanged) -->
<link rel="stylesheet" href="monday/monday.css">          <!-- the board: groups, rows, status cells, summaries -->
<link rel="stylesheet" href="monday/monday-app.css">      <!-- the app frame and the item card -->
<script src="monday/monday-icons.js"></script>          <!-- mIcon('Search', 20) gives an icon -->

<html class="dark-app-theme">   <!-- or black-app-theme; nothing = light -->
<button class="v-Button-button v-Button-sizeMedium v-Button-kindPrimary v-Button-colorPrimary">New Item</button>
<span class="mb-status" style="--s: var(--color-done-green)">Done</span>

Only real sources. No login, no bot-check bypass. Where we could not see something, the page says so.

• monday's own design system, Vibe (open source, MIT): @vibe/style 4.1.0 (all colours, sizes, letters, movement, shadows; light, dark, black), @vibe/core 4.5.35 (component CSS), @vibe/icons 4.2.0 (277 icons). Copied 1:1.
• monday's public board view.monday.com/embed/6276056051… ("Team"), opened read-only in Chrome on 9 and 12 Oct 2026 at 1440 × 900: computed styles, every state, and all three themes. measured
• monday's help centre (support.monday.com) shows a bot check, so we did not open it. We used the public web archive's copies instead: "The Item Card" (19 Feb 2025, screen recording), "display themes: light, dark and night" (2024), "Getting started with workspaces" (Sep 2025). monday's own picture
• Fonts: Figtree and Poppins (SIL Open Font License), Roboto (Apache 2.0), from Fontsource. monday's marketing font (Sofia Pro) is not free, so it is not used.
• Ours: the white logo for dark; the dark and black versions of the item-card screen (from monday's tokens, no picture exists); the "Bicyle" colour on the item-card board is a custom colour, measured. ours
• Limits: the full logged-in app could only be seen through monday's own help pictures, not live. The recording is compressed (256 colours), which lowers its score.