A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
1radius steps
10pxspacing base
Monday, in one page
monday.com's iOS app is a loud, color-coded work operating system whose entire personality is the colorful board. The default canvas is white (#FFFFFF) in light mode and a deep indigo (#181B34) in dark mode — distinctly blue-tinted, NOT neutral black. The app opens to a board: a table of item rows grouped into colored sections ("This week", "Next sprint"), where each row is a thin leading group-color stripe + an item name + a series of column cells (Status, Person, Priority, Date, Numbers, Timeline, Battery). The board IS the product. The Kanban, Timeline, Calendar, and Chart views are alternate renderings of the same item objects.
The signature visual element is the full-bleed status cell — a solid, fully-saturated rounded rectangle that fills its entire grid cell with a label inside. "Done" is solid green (#00C875), "Working on it" solid orange (#FDAB3D), "Stuck" solid red (#E2445C), "Not started" a muted navy. Unlike Asana's restrained tint chips, monday.com leans into saturated color slabs — the board reads at a glance because color carries the meaning. The other signature is the group-color stripe: every group has an assigned hue, and every item in it wears a 6pt vertical stripe of that color on its leading edge, so the eye instantly buckets work.
The color system is monday.com's famous multicolor palette. The brand triad is red (#E2445C) / orange (#FDAB3D) / green (#00C875) — the three dots in the logo. Around them: a primary action blue (#0073EA), plus purple (#A25DDC), yellow (#FFCB00), teal (#00D2D2), pink (#FF158A), and a deep navy chrome (#333D6E / #181B34). Every status, label, group, and tag column can use any of these. Status columns ship with a default green/orange/red set; users remap freely. Color is never decorative — it is the data.
Typography is Figtree — the geometric, friendly sans monday.com adopted for its product and brand (a Poppins-class face). On iOS it falls back to SF Pro. Hierarchy is bold and confident: 32pt extrabold screen titles, 26pt board titles, 22pt extrabold group headers (each in its group color), 14pt medium item names, 11pt bold status labels (often uppercased). Headings push to weight 800; the type has personality without shouting over the color.
Key Characteristics:
- White canvas (
#FFFFFF) light / deep indigo (#181B34) dark — blue-tinted, NOT neutral black - The colorful board IS the product — grouped item rows × column cells (Status / Person / Priority / Date / Battery)
- Full-bleed status cells — solid saturated slabs (green
#00C875/ orange#FDAB3D/ red#E2445C) carry the meaning - Group-color stripe — a 6pt leading vertical stripe in the group's hue on every item row
- Colored group headers — "This week" rendered in the group's color, extrabold, with an item count
- Multicolor palette — red / orange / green triad + blue / purple / yellow / teal / pink, fully remappable
- Primary blue (
#0073EA) — the FAB and primary CTAs (the only "action" color amid the data colors) - View switcher — Main Table / Kanban / Timeline / Calendar / Chart / Form — same items, different renderings
- Person column — circular assignee avatars inline in a cell
- Battery column — a segmented rollup bar (green/orange/red proportions) summarizing a group's status
- Minimal chrome — bottom tab bar (Home / Boards / Inbox / Search) + per-board view tabs
Do's and don'ts
Do
- Use full-bleed saturated status cells (green
#00C875/ orange#FDAB3D/ red#E2445C) — color carries the meaning - Give every item a 6pt leading group-color stripe, flush to the edge, full row height
- Render group headers in the group's own color, extrabold, with an item count
- Use the deep indigo
#181B34for dark canvas — blue-tinted, NOT neutral black - Reserve blue
#0073EAfor actions only (FAB, CTAs, active tab) amid the data colors - Keep status/priority cells loud: 11pt/700 white text (or
#323338on yellow), often uppercased - Offer the view switcher (Main Table / Kanban / Timeline / Calendar / Chart) over the same items
- Use the Battery segmented bar as the group-health rollup
- Use tabular numerals for the Numbers column, dates, and percentages
- Let users remap any status/label/group color from the full multicolor palette
Don't
- Don't use small tint chips for status — monday.com is full-bleed solid, not Asana-style 16% tints
- Don't drop the group-color stripe — it's the structural spine of the board
- Don't render group headers in plain black — they wear the group color
- Don't use pure black (
#000000) for the dark canvas —#181B34indigo is correct - Don't use a data color (green/red/orange) as a primary CTA — blue
#0073EAis the only action color - Don't dim status cells in dark mode — they stay fully saturated; meaning must never wash out
- Don't use heavy shadows on board rows — only floating / dragged elements get shadow
- Don't use gray as the FAB shadow — it's a soft blue glow
- Don't make item names bold — 14pt/500 is correct; group headers are the 800-weight moment
- Don't constrain the palette — any column color can be any of the multicolor set
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Monday design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Primary Blue: #0073ea
- Primary Blue Pressed: #0060c2
- Blue Tint: #0073ea
- Canvas White: #ffffff
- Surface Gray: #f6f7fb
- Surface Pressed: #edeff5
- Divider: #e6e9f0
- Cell Border: #d0d4e4
- Night Canvas: #181b34
- Night Surface 1: #20243f
Type:
- families: Figtree, Numeric, Fallback Stack
- scale: 9, 10, 11, 13, 14, 15, 16, 18, 22
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 8
- elevation: Shadow: `rgba(0,115,234,0.45) 0 8px 20px` | Drag a card to another column = change its status; lift shadow + 200ms settle | Don't use gray as the FAB shadow — it's a soft blue glow
Spacing: 10, 12, 13
Rules:
- Use full-bleed saturated status cells (green `#00C875` / orange `#FDAB3D` / red `#E2445C`) — color carries the meaning
- Give every item a 6pt leading group-color stripe, flush to the edge, full row height
- Render group headers in the group's own color, extrabold, with an item count
- Use the deep indigo `#181B34` for dark canvas — blue-tinted, NOT neutral black
- Reserve blue `#0073EA` for actions only (FAB, CTAs, active tab) amid the data colors
- Keep status/priority cells loud: 11pt/700 white text (or `#323338` on yellow), often uppercased
Avoid:
- Don't use small tint chips for status — monday.com is full-bleed solid, not Asana-style 16% tints
- Don't drop the group-color stripe — it's the structural spine of the board
- Don't render group headers in plain black — they wear the group color
- Don't use pure black (`#000000`) for the dark canvas — `#181B34` indigo is correct
- Don't use a data color (green/red/orange) as a primary CTA — blue `#0073EA` is the only action color
- Don't dim status cells in dark mode — they stay fully saturated; meaning must never wash out
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Primary Blue (
#0073EA): The action color — FAB, primary CTAs, active view tab, links. The one "UI" color amid the data colors. - Primary Blue Pressed (
#0060C2): Pressed state. - Blue Tint (
#0073EA1F): 12% blue behind selected rows / focused cells.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas, board background. - Surface Gray (
#F6F7FB): Grouped surfaces, sidebar, hovered rows. - Surface Pressed (
#EDEFF5): Pressed/selected rows. - Divider (
#E6E9F0): Hairline grid lines between item rows and columns. - Cell Border (
#D0D4E4): Inner cell separators in the table grid.
Canvas & Surfaces (Dark Mode)
- Night Canvas (
#181B34): Primary dark canvas — deep indigo, NOT pure black. - Night Surface 1 (
#20243F): Cards, grouped surfaces. - Night Surface 2 (
#292F4C): Elevated chips, hovered rows, board chrome. - Night Divider (
#353B5C): Hairline grid lines. - Night Cell Border (
#3D436A): Inner cell separators in dark. - Night Navy Chrome (
#333D6E): "Not started" status, neutral chips.
Text
- Text Primary Light (
#323338): Primary item names, body — monday.com's near-black gray. - Text Secondary Light (
#676879): Metadata, counts, placeholders. - Text Tertiary Light (
#9699A6): Disabled, low-emphasis. - Text Primary Dark (
#F5F6F8): Primary text on night. - Text Secondary Dark (
#A7AFC6): Metadata on night. - Text Tertiary Dark (
#6B7394): Disabled on night. - On-Color Text (
#FFFFFF): Text inside saturated status/priority cells (yellow/light cells flip to#323338).
Multicolor Data Palette
The core monday.com palette — any status, label, group, tag, or color-picker uses these. They appear as full-bleed solid fills with white (or dark) text, NOT tints.
| Role | Color | On-Color Text |
|---|---|---|
| Status Red / Stuck | #E2445C | #FFFFFF |
| Status Orange / Working | #FDAB3D | #FFFFFF |
| Status Green / Done | #00C875 | #FFFFFF |
| Primary Blue | #0073EA | #FFFFFF |
| Bright Blue | #579BFC | #FFFFFF |
| Purple | #A25DDC | #FFFFFF |
| Dark Purple | #401694 | #FFFFFF |
| Indigo | #5559DF | #FFFFFF |
| Yellow | #FFCB00 | #323338 |
| Teal | #00D2D2 | #323338 |
| Pink | #FF158A | #FFFFFF |
| Bright Green | #9CD326 | #323338 |
| Navy (Not started) | #333D6E | #FFFFFF |
| Stuck Dark | #BB3354 | #FFFFFF |
Semantic
- Success Green (
#00C875): "Done" status, success toast, positive battery segment. - Error / Stuck Red (
#E2445C): "Stuck" status, error toast, delete, negative battery segment. - Working Orange (
#FDAB3D): "Working on it", warning, mid battery segment. - Selection Blue (
#0073EA): Selected-cell ring, multi-select checkboxes.
Type scaleRead the full spec
Font Family
- Primary:
Figtree(by Erik Kennedy, 2022, SIL OFL) — geometric, friendly sans; the Poppins-class face monday.com uses across product & brand. (monday.com's brand font is "Poppins"/"Figtree"-family; Figtree is the closest OFL-licensed match for free distribution.) - Numeric: Figtree tabular figures for the Numbers column, counts, and dates (
font-feature-settings: "tnum"). - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - iOS Note: falls back to SF Pro Text/Display when Figtree isn't bundled.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Figtree | 32pt | 800 | 1.15 | -0.5pt | "My Work", "Home" — large nav title |
| Board Title | Figtree | 26pt | 700 | 1.2 | -0.3pt | Board name in board header (+ color dot) |
| Group Header | Figtree | 22pt | 800 | 1.2 | -0.2pt | "This week" — rendered in the group's color |
| Section | Figtree | 18pt | 700 | 1.3 | -0.1pt | "Board updates", subsection titles |
| Body | Figtree | 16pt | 400 | 1.5 | 0pt | Update posts, descriptions |
| Item Name | Figtree | 14pt | 500 | 1.35 | 0pt | The item/row name (most-read text) |
| Column Header | Figtree | 13pt | 600 | 1.2 | 0.2pt | "Status", "Person", "Priority" headers |
| Meta | Figtree | 14pt | 400 | 1.35 | 0pt | "Updated 2h ago", item counts |
| Status Label | Figtree | 11pt | 700 | 1.1 | 0.2pt | Text inside a status/priority cell |
| Button | Figtree | 15pt | 600 | 1.0 | 0pt | Primary / secondary buttons |
| Text Action | Figtree | 14pt | 600 | 1.0 | 0pt | "Add item", "Add column" |
| Person Initials | Figtree | 9pt | 700 | 1.0 | 0.2pt | Initials inside a person avatar |
| Tab Label | Figtree | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Update Author | Figtree | 14pt | 700 | 1.3 | 0pt | Update / post author name |
Principles
- Bold and confident: headings push to 800; monday.com's voice is energetic — the type is part of the brand, not neutral.
- Group headers wear the group color: the "This week" title is colored, not just black — color is structural.
- Weight concentrated at 400 / 500 / 600 / 700 / 800: regular body, medium item names, semibold UI, bold/extrabold headings & status labels. No thin.
- Tabular numerals for the data: Numbers column, dates, counts, battery percentages must not jitter.
- Status labels are tight & loud: 11pt/700, often uppercased, white on a saturated fill — legible at board scale.
- Dynamic Type first-class: screen/board/group titles, body, item names, updates scale; status labels, tab labels, person initials, column headers stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button (New item / Save / Send update)
- Shape: Rounded rectangle, 8pt corner radius
- Background:
#0073EA(Primary Blue) — identical light & dark - Text:
#FFFFFF, Figtree 15pt weight 600 - Padding: 13pt vertical, 26pt horizontal
- Pressed:
#0060C2+ scale 0.98 - Disabled:
#0073EAat 40% opacity
Secondary / Outline Button (Invite / Filter)
- Background: transparent
- Text:
#323338light /#F5F6F8dark, Figtree 14pt weight 600 - Border: 1pt
#E6E9F0light /#353B5Cdark - Corner radius: 8pt
- Padding: 12pt vertical, 20pt horizontal
- Pressed: background
#EDEFF5/#292F4C
Pill Button (Filter / Sort / Group by / Person)
- Background:
#F6F7FBlight /#292F4Cdark - Border: 1pt
#E6E9F0/#353B5C - Corner radius: 999pt
- Text:
#323338/#F5F6F8, Figtree 14pt weight 600 - Padding: 10pt vertical, 18pt horizontal
Text Button (Add item / Add column)
- Font: Figtree 14pt weight 600
- Color:
#676879/#A7AFC6(or#0073EAfor primary actions) - Leading
+icon 14pt - Pressed: 60% opacity
Floating Action Button (Create)
- Size: 56pt circle
- Background:
#0073EA - Icon: white
plus24pt, stroke 2.5 - Shadow:
rgba(0,115,234,0.45) 0 8px 20px - Position: 18pt from trailing edge, 16pt above the tab bar
- Pressed: scale 0.94 +
#0060C2
Board Item Row (the core atom)
Every item in any board view is a row:
- Height: ~48pt
- Leading: 6pt vertical group-color stripe (full row height)
- Item name: Figtree 14pt w500
#323338/#F5F6F8, truncates with ellipsis - Column cells (right-aligned sequence): Person (24pt avatar), Status (full-bleed cell), Priority (full-bleed cell), Date, Numbers
- Cell separators: 1pt
#D0D4E4/#3D436A - Row divider: 1pt
#E6E9F0/#353B5C - Tap row: opens the item detail panel (updates, activity, columns)
- Swipe-left: Delete (red) + Duplicate (gray)
Status / Priority Cell
- Full-bleed: fills the entire grid cell, 4pt corner radius (or 0 inside a tight grid)
- Background: the assigned solid color (e.g.,
#00C875) - Text: white (or
#323338on yellow/light), Figtree 11pt w700, centered, often uppercased - Tap: opens the label picker (a grid of colored options)
- Empty: muted navy
#333D6E"Not started" / blank gray
Person Cell
- One or more 24pt circular avatars (photo or colored-initials)
- Overlapping by -6pt when multiple; "+N" chip for overflow
Battery Column (group rollup)
- A horizontal segmented bar (24pt tall, 4pt radius)
- Segments proportional to the group's status distribution: green
#00C875/ orange#FDAB3D/ red#E2445C/ navy - Sits in the group footer summarizing all items
Group
- Group header bar: a caret (in group color), the group name (Figtree 22pt w800 in the group color), and an item count
#9699A6 - Tap caret: collapse/expand items with 200ms ease-out
- Footer: "+ Add item" text action + the Battery rollup
- Each item in the group carries the 6pt group-color stripe
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#FFFFFF/#181B34with 1pt top border#E6E9F0/#353B5C - Tabs (4): Home, Boards (My Work), Inbox (Notifications), Search
- Icon size: 22pt; active filled, inactive stroked
- Active color:
#0073EA; inactive#9699A6/#6B7394 - Labels: Figtree 10pt w600, always shown
View Switcher Tabs (per board)
- Below the board title: Main Table, Kanban, Timeline, Calendar, Chart, Form
- Active tab:
#323338/#F5F6F8text with a 2.5pt blue#0073EAunderline - Inactive:
#676879/#A7AFC6 - Figtree 13pt w600, 20pt gap
Top Nav (board / item detail)
- Height: 44pt + safe area
- Leading: back chevron / close X
- Center: compact board/item title
- Trailing: ⋯ board actions / share / automation
Input Fields
Search Bar
- Height: 40pt
- Background:
#F6F7FB/#292F4C - Border: none
- Corner radius: 8pt
- Leading icon
magnifyingglass16pt#9699A6 - Placeholder: "Search this board" 14pt
#9699A6 - Focus: 1.5pt
#0073EAborder
Inline Cell Edit
- Tapping a text/number cell turns it into an inline field with a 1.5pt
#0073EAfocus ring - Status/label cells open a colored-option picker grid instead of a text field
- Update composer:
#F6F7FB/#292F4Cfill, 8pt radius, "Write an update" placeholder
Distinctive Components
Full-Bleed Status Cell + Label Picker
- The signature — see Board Item Row. Tapping opens a picker: a grid of solid colored option buttons; selecting one fills the cell.
Colorful Grouped Board
- The default screen: groups with colored headers, item rows with stripes + cells, FAB bottom-right.
Kanban View
- Columns = one status value each; cards carry their group-color stripe + person + key columns
- Drag a card to another column = change its status; lift shadow + 200ms settle
Battery / Progress Rollup
- Segmented bar summarizing a group's status mix — the at-a-glance health indicator.
Item Detail Panel
- Slides up: item name, all column values as editable rows, an Updates feed (posts + reactions + files), an Activity log
Inbox Notification Row
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Fewer columns visible; horizontal scroll for the rest |
| iPhone 13/14/15 | 390pt | Standard layout — name + person + status visible |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | One extra column visible without scroll |
| iPad (portrait) | 768pt | Master-detail: board list (320pt) + board/item detail |
| iPad (landscape) | 1024pt+ | Full multi-column grid; three-pane with sidebar |
Dynamic Type
- Screen/board/group titles, body, item names, updates: full scale
- Status labels, tab labels, person initials, column headers: FIXED (cell-layout-sensitive)
- Numbers / dates / percentages: scale but stay tabular
Orientation
- All screens support rotation
- iPad landscape unlocks the three-pane (sidebar / board / item detail)
- Kanban & Timeline scroll horizontally in both orientations
Touch Targets
- Status / priority cell: full-cell tap (≥ 44pt tall row)
- Tab bar icons: 22pt glyph, 44pt hit
- Item row: full-row tap opens detail
- Group caret: 16pt glyph, 44pt hit
- FAB: 56pt (exceeds minimum)
- Person avatar: 24pt glyph, 44pt hit
Safe Area Handling
- Top: board title & top nav respect safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; FAB 16pt above the tab bar
- Keyboard: inline cell edit & update composer rise above the keyboard
- Sides: 18pt content inset (stripe flush to the leading edge)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-monday {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #181b34;
--heading-color: #181b34;
--link-color: #0073ea;
--link-hover-color: #005ab7;
--border-color: #d5d6da;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(24,27,52,0.06);
--card-hover-shadow: 0 6px 18px rgba(24,27,52,0.12);
--header-bg: #181b34;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #696b7b;
--button-bg: #0073ea;
--button-text-color: #000000;
--button-hover-bg: #005ab7;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f3;
--button-secondary-text-color: #181b34;
--button-secondary-hover-bg: #e3e4e7;
--button-secondary-border: 1px solid #d5d6da;
--prompt-bg: #f3f4f5;
--prompt-text-color: #181b34;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- zalo 95.1%
- pluto tv 88.9%
- vercel 87.5%
- paramount plus 83.2%
- plenty of fish 81.6%
Where this came from
- Source document
ios/design-md/productivity/monday/DESIGN.md· 25.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.