pnp Monochrome — Style Tokens + Row Template
Single-hue, restrained, corporate. Everything is slate blue. The progress percentage is the HERO — displayed enormous on the left, with metadata stacked to its right. Shade = stage.
Layout philosophy: Hero number + stacked metadata. The progress percentage is displayed huge (32px) on the left side of the card as the primary visual anchor. Status, name, and deadline stack vertically to its right. The big number makes each card instantly scannable.
Badge Tokens
- padding:
5px 14px - border-radius:
6px - font-size:
11px - font-weight:
600 - text-transform:
uppercase
status_colors (shade ramp — lightest = earliest)
| Value | bg | text | border |
|---|---|---|---|
| Draft | #cbd5e1 |
#334155 |
0px |
| In Review | #64748b |
#ffffff |
0px |
| Revising | #475569 |
#ffffff |
0px |
| Approved | #334155 |
#ffffff |
0px |
| Published | #1e293b |
#ffffff |
0px |
| _fallback | #e2e8f0 |
#475569 |
0px |
Row Card Tokens
- card_border:
1px solid #e2e8f0 - card_border_radius:
6px - card_background:
#ffffff - card_margin_bottom:
6px - card_shadow:
none - left_accent_width:
4px(thin left border in status shade) - hero_number_size:
32px - hero_number_weight:
800
Row Template Layout
Hero progress number on the left, metadata stacked right.
┃ ┌────────────────────────────────────────────────────┐
┃ │ │
┃ │ 72% API Guide.docx │
┃ │ [In Review] · 5/15/2026 │
┃ │ ████████████████████░░░░░░ │
┃ │ │
┃ └────────────────────────────────────────────────────┘
↑ 4px left accent in status shade color
rowFormatter JSON
Adapt before applying. The column names below ([$Status], [$Progress], [$Deadline]) are example placeholders — replace them with the actual internal column names from the user's list. Also update every status value string ('Draft', 'In Review', 'Revising', etc.) to match the user's actual Choice values. Follow list-styling Step 3.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideSelection": false,
"hideColumnHeaders": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"border": "1px solid #e2e8f0",
"border-left": "=if([$Status] == 'Draft', '4px solid #cbd5e1', if([$Status] == 'In Review', '4px solid #64748b', if([$Status] == 'Revising', '4px solid #475569', if([$Status] == 'Approved', '4px solid #334155', if([$Status] == 'Published', '4px solid #1e293b', '4px solid #e2e8f0')))))",
"border-radius": "6px",
"background-color": "#ffffff",
"margin-bottom": "6px",
"padding": "16px 20px",
"gap": "20px",
"min-height": "80px"
},
"children": [
{
"elmType": "div",
"style": {
"min-width": "72px",
"display": "flex",
"align-items": "center",
"justify-content": "center"
},
"children": [
{
"elmType": "span",
"txtContent": "=toString([$Progress]) + '%'",
"style": {
"font-size": "32px",
"font-weight": "800",
"color": "=if([$Status] == 'Draft', '#94a3b8', if([$Status] == 'In Review', '#64748b', if([$Status] == 'Revising', '#475569', if([$Status] == 'Approved', '#334155', if([$Status] == 'Published', '#1e293b', '#94a3b8')))))",
"line-height": "1"
}
}
]
},
{
"elmType": "div",
"style": {
"flex": "1",
"display": "flex",
"flex-direction": "column",
"gap": "8px"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "14px",
"font-weight": "600",
"color": "#1e293b"
},
"txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"gap": "10px"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Status]",
"style": {
"display": "inline-block",
"padding": "4px 12px",
"border-radius": "6px",
"font-size": "11px",
"font-weight": "600",
"text-transform": "uppercase",
"white-space": "nowrap",
"color": "=if([$Status] == 'Draft', '#334155', '#ffffff')",
"background-color": "=if([$Status] == 'Draft', '#cbd5e1', if([$Status] == 'In Review', '#64748b', if([$Status] == 'Revising', '#475569', if([$Status] == 'Approved', '#334155', if([$Status] == 'Published', '#1e293b', '#e2e8f0')))))"
}
},
{
"elmType": "span",
"txtContent": "·",
"style": { "color": "#cbd5e1", "font-size": "16px" }
},
{
"elmType": "span",
"txtContent": "=toLocaleDateString([$Deadline])",
"style": {
"font-size": "12px",
"font-weight": "=if([$Deadline] < @now, '700', '400')",
"color": "=if([$Deadline] < @now, '#1e293b', '#64748b')"
}
},
{
"elmType": "span",
"txtContent": "=if([$Deadline] < @now, '— overdue', '')",
"style": {
"font-size": "11px",
"font-weight": "700",
"color": "#1e293b"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "100%",
"height": "4px",
"background-color": "#e2e8f0",
"border-radius": "2px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=toString([$Progress]) + '%'",
"height": "100%",
"border-radius": "2px",
"background-color": "=if([$Status] == 'Draft', '#94a3b8', if([$Status] == 'In Review', '#64748b', if([$Status] == 'Revising', '#475569', if([$Status] == 'Approved', '#334155', if([$Status] == 'Published', '#1e293b', '#94a3b8')))))"
}
}
]
}
]
}
]
}
}
Checklist — "I Can't Believe That's SharePoint"
- ✅ Full rowFormatter — NOT default column grid
- ✅ HERO PROGRESS NUMBER (32px, 800 weight) on the left — instantly scannable
- ✅ Hero number color matches the status shade (darker = further along)
- ✅ 4px left accent border in the status shade color
- ✅ All colors from ONE slate-blue hue family — zero red, green, or amber
- ✅ Progress bar fill color matches the status shade (not traffic lights)
- ✅ Overdue is shown through bold text + "— overdue" suffix, NOT red (stays monochrome)
- ✅ No emoji, no icons — pure typography
- ✅ No shadow — flat, corporate, restrained
- ✅ Metadata flows as: name → badge + date inline → progress bar
- ✅ Most restrained style — the opposite of Retro's loudness
Responsive / mobile
- Hero progress number scales
56 px → 40 px → 32 pxacross breakpoints≥ 1024 px → ≤ 600 px → ≤ 375 px. The number must remain the dominant element at every breakpoint. - ≤ 480 px: collapse "name → badge + date inline → progress bar" to a tighter vertical stack; keep the hero number on the left.
- No emoji / no icons rule continues on mobile — do not add icons to compensate for lost color.
- Touch targets: ≥ 44 × 44 px on the row card itself.
Implementation notes
Mapping non-linear lifecycles to the shade ramp
The slate shade ramp assumes a linear progression — lightest shade for the earliest state, darkest for the final state. Real lifecycles often aren't linear (parallel branches, revert paths, holds). Map them as follows:
- Parallel branches that resolve to the same outcome (e.g.
In Review (Legal)andIn Review (Finance)): assign the same shade to both. The style is tonal — multiple states sharing one shade is fine. - Revert / paused states (e.g.
Active → Paused → Active → Closed): mapPausedto the same shade as the most recent forward state, and add a thin 1 px dashed outline only. Do not pick a brighter shade — the intent of monochrome is tonal restraint, not state-traffic-lights. - Terminal failure states (e.g.
Cancelled,Rejected): use the darkest shade and italicise the label. Still no red; the italic carries the signal.
If the list has more than five distinct states, the shade ramp will start to feel ambiguous — pick a different style (Bento or Figma-clean handle 5+ states more legibly).