Monday Mobile — design system & UI screens
A task/project management list with row-based items showing task names, assigned owners (avatars), and status indicators (colored badges). Filter controls and a three-dot menu are visible at the top. The layout uses a clean table pattern with horizontal rows and color-coded status columns. Official Google Play listing screenshot.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/monday-mobile.
Decoded design system
Monday Mobile's decoded design system: background #FFFFFF, text #E13F57, accent #00C875, link #00C875, primary #00C875; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #00C875 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #FDF3F4 |
| border | #FAE2E5 |
| text | #E13F57 |
| text_muted | #EC8796 |
| primary | #00C875 |
| accent | #00C875 |
| link | #00C875 |
| button_bg | #00C875 |
| button_text | #FFFFFF |
Using these colors
- Action color
#00C875— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#00C875— one role, not several (the action color).- accent
#00C875— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- card:
rgba(0, 0, 0, 0.1) 0px 0px 20px 0px - overlay:
rgba(0, 0, 0, 0.1) 0px 20px 40px 0px
Motion
Micro-interactions run at 300ms (dominant) with ease.
- durations: 300ms · 250ms · 400ms
- easings:
ease·linear - animated properties: transform, opacity, background-color
Native design tokens
| Token | Value |
|---|---|
--black | #000 |
--purple | #6161ff |
--light | #f0f3ff |
--dark-green | #025231 |
--green | #00ca72 |
--white | #fff |
--text-color--white | #fff |
--dev--light | #bcfe90 |
--dark-blue-crm | #0c86ab |
--turquoise | #00d2d2 |
…and 66 more measured on the page.
Button states (measured)
- primary hover: background
#452AEA - primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- nav: 72px sticky
Motion choreography (measured)
Load order: img.hero-sbs-cm → img.hero-sbs-cm → a.m_button → a.m_button → a.m_button → a.m_button
Scroll reveal: 17 elements rest at opacity 0, animate in over 0.5s ease.
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 20px
Responsive (measured)
- breakpoints: 479px · 768px · 991px · 1230px · 1600px · 1919px
- mobile (390px): hero 56px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →