pnp Glassmorphism — Style Tokens + Row Template
Light, floating, airy. Soft shadows, no hard borders, pills, thin bars. Each row is a floating card with centered stacked content — no sidebar.
Layout philosophy: Single-column stacked card. No sidebar split. Glassmorphism is about floating surfaces and negative space. The card is a single panel with content flowing vertically — name at top, metadata in a horizontal row, progress bar spanning full width. Everything breathes.
Badge Tokens
- padding:
5px 16px - border-radius:
14px - font-size:
12px - font-weight:
600 - text-transform:
none
status_colors
| Value | bg | text | border |
|---|---|---|---|
| Draft | #6b7280 |
#ffffff |
0px |
| In Review | #3b82f6 |
#ffffff |
0px |
| Revising | #f97316 |
#ffffff |
0px |
| Approved | #22c55e |
#ffffff |
0px |
| Published | #16a34a |
#ffffff |
0px |
| _fallback | #9ca3af |
#ffffff |
0px |
Progress Bar Tokens
- progress_track_height:
6px - progress_track_bg:
#e5e7eb - progress_track_border:
0px - progress_track_radius:
3px - progress_fill_radius:
3px - progress_color_low:
#ef4444 - progress_color_mid:
#3b82f6 - progress_color_high:
#22c55e - progress_label_font_size:
12px - progress_label_font_weight:
500 - progress_label_color:
#6b7280
Deadline Tokens
- deadline_icon: `` (none — too heavy for glass)
- date_font_size:
13px - date_normal_color:
#6b7280 - date_normal_weight:
400 - date_overdue_color:
#ef4444 - date_overdue_weight:
600 - date_sublabel_color:
#9ca3af - overdue_label:
overdue(lowercase — whispered, not shouted)
Row Card Tokens
- card_border:
1px solid #e5e7eb(barely visible) - card_border_radius:
16px(very rounded — floating feel) - card_background:
#ffffff - card_margin_bottom:
12px - card_shadow:
0px 4px 20px #0000000d(soft diffused — the opposite of hard offset) - card_padding:
20px 24px - overdue_card_border:
1px solid #fecaca(soft red tint — not aggressive) - overdue_card_shadow:
0px 4px 20px #ef44441a(soft red glow)
Row Template Layout
Single-column floating card. No sidebar. Everything stacks vertically with generous spacing.
╭──────────────────────────────────────────────────╮
│ │
│ Document Name │
│ │
│ [In Review] · 📎 5/15/2026 · On Track │
│ │
│ ░░░░░░░░░░░░░░░███████████████░░░░░░ 72% │
│ │
╰──────────────────────────────────────────────────╯
↑ soft diffused shadow, 16px rounded corners, barely-there border
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",
"flex-direction": "column",
"gap": "14px",
"padding": "20px 24px",
"border": "=if([$Deadline] < @now, '1px solid #fecaca', '1px solid #e5e7eb')",
"border-radius": "16px",
"background-color": "#ffffff",
"margin-bottom": "12px",
"box-shadow": "=if([$Deadline] < @now, '0px 4px 20px #ef44441a', '0px 4px 20px #0000000d')",
"min-height": "80px"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "16px",
"font-weight": "600",
"color": "#1f2937",
"line-height": "1.3"
},
"txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"gap": "12px",
"flex-wrap": "wrap"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Status]",
"style": {
"display": "inline-block",
"padding": "5px 16px",
"border-radius": "14px",
"font-size": "12px",
"font-weight": "600",
"white-space": "nowrap",
"color": "#ffffff",
"background-color": "=if([$Status] == 'Draft', '#6b7280', if([$Status] == 'In Review', '#3b82f6', if([$Status] == 'Revising', '#f97316', if([$Status] == 'Approved', '#22c55e', if([$Status] == 'Published', '#16a34a', '#9ca3af')))))"
}
},
{
"elmType": "span",
"txtContent": "·",
"style": { "color": "#d1d5db", "font-size": "16px" }
},
{
"elmType": "span",
"txtContent": "=toLocaleDateString([$Deadline])",
"style": {
"font-size": "13px",
"font-weight": "=if([$Deadline] < @now, '600', '400')",
"color": "=if([$Deadline] < @now, '#ef4444', '#6b7280')"
}
},
{
"elmType": "span",
"txtContent": "=if([$Deadline] < @now, '· overdue', '')",
"style": {
"font-size": "12px",
"font-weight": "500",
"color": "#ef4444",
"font-style": "italic"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"gap": "10px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"flex": "1",
"height": "6px",
"background-color": "#e5e7eb",
"border-radius": "3px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=toString([$Progress]) + '%'",
"height": "100%",
"border-radius": "3px",
"background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#3b82f6', '#22c55e'))"
}
}
]
},
{
"elmType": "span",
"txtContent": "=toString([$Progress]) + '%'",
"style": {
"font-size": "12px",
"font-weight": "500",
"color": "#6b7280",
"min-width": "32px",
"text-align": "right"
}
}
]
}
]
}
}
Checklist — "I Can't Believe That's SharePoint"
- ✅ Full rowFormatter — NOT default column grid
- ✅ Single-column stacked card layout — NO sidebar (this is the layout differentiator)
- ✅ 16px rounded corners — cards feel like they're floating
- ✅ Soft diffused shadow (0px 4px 20px) — NOT hard offset
- ✅ Barely-visible 1px border — NOT bold
- ✅ Pill-shaped status badges with zero borders
- ✅ Title Case text on badges — not uppercase
- ✅ Metadata in a horizontal row with dot separators (·)
- ✅ Full-width thin progress bar (6px) — spans entire card
- ✅ Overdue is whispered ("overdue" lowercase italic) not shouted
- ✅ Overdue card gets soft red-tinted shadow and border — not aggressive
- ✅ Generous padding (20px 24px) — everything breathes
- ✅ No emoji, no icons — pure typography
- ✅ The layout is the OPPOSITE of Neobrutalism — no split, no sidebar, no heaviness
- ✅ Feels like a modern SaaS app, not SharePoint
Responsive / mobile
- ≤ 480 px: reduce card padding from
20px 24pxto12px 16px. Keep the 16 px border-radius — it carries the style identity. - Hide the deadline sublabel under 480 px; keep the date itself.
- Do not shrink the soft shadow further on mobile — it is already the lightest treatment; instead, if rendering is throttled, drop it entirely (see fallback below).
- Touch targets: ≥ 44 × 44 px on any clickable element — the generous padding usually satisfies this naturally.
Implementation notes
Soft-shadow fallback
Older SharePoint themes and some Modern view renderers strip multi-layer box-shadow values. When that happens, the cards lose their floating effect and merge into the page.
- Detect this in QA by checking whether the shadow renders in the preview pane. If it doesn't, add a 1 px hairline border in
rgba(0,0,0,0.06)to the card — just enough to re-establish the card edge without breaking the floaty tone. - Do not switch to a hard
box-shadowoffset — that turns the style into a different style.
The lowercase "overdue" is intentional
The overdue treatment in this style is the lowercase italic word overdue, not an emoji and not a red badge. Do not "fix" it to uppercase or add a warning icon. The style's whole proposition is that nothing shouts — even bad news is whispered. A consumer who finds this too subtle should pick a different style, not edit this one.