pnp Bento — Style Tokens + Row Template
Warm, organized, compartmentalized. Each row is a card divided into labeled compartments like a bento box — visible dividers, each section has a header label above its content.
Layout philosophy: Horizontal compartments with dividers. Not a sidebar split, not a single stack. Four distinct compartments in a row: Name | Status | Progress | Deadline. Each compartment has a tiny uppercase label above the content. The dividers between compartments ARE the design.
Badge Tokens
- padding:
4px 10px - border-radius:
4px - font-size:
11px - font-weight:
600 - text-transform:
uppercase
status_colors
| Value | bg | text | border |
|---|---|---|---|
| Draft | #9ca3af |
#ffffff |
0px |
| In Review | #3b82f6 |
#ffffff |
0px |
| Revising | #ea580c |
#ffffff |
0px |
| Approved | #16a34a |
#ffffff |
0px |
| Published | #15803d |
#ffffff |
0px |
| _fallback | #d1d5db |
#ffffff |
0px |
Progress Bar Tokens
- progress_track_height:
8px - progress_track_bg:
#f3f4f6 - progress_track_border:
0px - progress_track_radius:
4px - progress_fill_radius:
4px - progress_color_low:
#ef4444 - progress_color_mid:
#ea580c - progress_color_high:
#22c55e - progress_label_font_size:
20px - progress_label_font_weight:
700 - progress_label_color:
#1f2937
Row Card Tokens
- card_border:
1px solid #e5e7eb - card_border_radius:
8px - card_background:
#ffffff - card_margin_bottom:
8px - card_shadow:
0px 1px 3px #0000000d - compartment_border:
1px solid #e5e7eb(dividers between sections) - compartment_label_color:
#9ca3af - compartment_label_size:
9px - compartment_label_weight:
600 - compartment_label_transform:
uppercase - compartment_label_spacing:
0.5px - overdue_accent:
2px solid #dc2626(left border accent on overdue cards)
Row Template Layout
Horizontal compartment grid. Each section is a labeled box.
┌──────────────────┬───────────┬──────────────────┬──────────────┐
│ DOCUMENT │ STATUS │ PROGRESS │ DEADLINE │
│ │ │ │ │
│ API Guide.docx │ [In Rev] │ 72% │ 📅 5/15/2026 │
│ │ │ ████████████░░░ │ DEADLINE │
│ │ On Track │ │ │
└──────────────────┴───────────┴──────────────────┴──────────────┘
↑ overdue cards get a 2px red left border accent
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",
"border": "1px solid #e5e7eb",
"border-left": "=if([$Deadline] < @now, '3px solid #dc2626', '1px solid #e5e7eb')",
"border-radius": "8px",
"background-color": "#ffffff",
"margin-bottom": "8px",
"box-shadow": "0px 1px 3px #0000000d",
"overflow": "hidden",
"min-height": "90px"
},
"children": [
{
"elmType": "div",
"style": {
"flex": "2",
"padding": "14px 16px",
"display": "flex",
"flex-direction": "column",
"gap": "6px",
"border-right": "1px solid #e5e7eb"
},
"children": [
{
"elmType": "span",
"txtContent": "DOCUMENT",
"style": {
"font-size": "9px",
"font-weight": "600",
"color": "#9ca3af",
"text-transform": "uppercase",
"letter-spacing": "0.5px"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"font-weight": "700",
"color": "#1f2937",
"line-height": "1.3"
},
"txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
}
]
},
{
"elmType": "div",
"style": {
"flex": "1",
"padding": "14px 16px",
"display": "flex",
"flex-direction": "column",
"gap": "8px",
"align-items": "center",
"justify-content": "center",
"border-right": "1px solid #e5e7eb"
},
"children": [
{
"elmType": "span",
"txtContent": "STATUS",
"style": {
"font-size": "9px",
"font-weight": "600",
"color": "#9ca3af",
"text-transform": "uppercase",
"letter-spacing": "0.5px"
}
},
{
"elmType": "span",
"txtContent": "[$Status]",
"style": {
"display": "inline-block",
"padding": "4px 10px",
"border-radius": "4px",
"font-size": "11px",
"font-weight": "600",
"text-transform": "uppercase",
"white-space": "nowrap",
"color": "#ffffff",
"background-color": "=if([$Status] == 'Draft', '#9ca3af', if([$Status] == 'In Review', '#3b82f6', if([$Status] == 'Revising', '#ea580c', if([$Status] == 'Approved', '#16a34a', if([$Status] == 'Published', '#15803d', '#d1d5db')))))"
}
},
{
"elmType": "span",
"txtContent": "=if([$Deadline] < @now, '⚠ At Risk', '✓ On Track')",
"style": {
"font-size": "10px",
"font-weight": "500",
"color": "=if([$Deadline] < @now, '#dc2626', '#16a34a')"
}
}
]
},
{
"elmType": "div",
"style": {
"flex": "1.5",
"padding": "14px 16px",
"display": "flex",
"flex-direction": "column",
"gap": "6px",
"align-items": "center",
"justify-content": "center",
"border-right": "1px solid #e5e7eb"
},
"children": [
{
"elmType": "span",
"txtContent": "PROGRESS",
"style": {
"font-size": "9px",
"font-weight": "600",
"color": "#9ca3af",
"text-transform": "uppercase",
"letter-spacing": "0.5px"
}
},
{
"elmType": "span",
"txtContent": "=toString([$Progress]) + '%'",
"style": {
"font-size": "20px",
"font-weight": "700",
"color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#ea580c', '#16a34a'))"
}
},
{
"elmType": "div",
"style": {
"width": "100%",
"height": "8px",
"background-color": "#f3f4f6",
"border-radius": "4px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"style": {
"width": "=toString([$Progress]) + '%'",
"height": "100%",
"border-radius": "4px",
"background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#ea580c', '#22c55e'))"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"flex": "1",
"padding": "14px 16px",
"display": "flex",
"flex-direction": "column",
"gap": "4px",
"align-items": "center",
"justify-content": "center"
},
"children": [
{
"elmType": "span",
"txtContent": "DEADLINE",
"style": {
"font-size": "9px",
"font-weight": "600",
"color": "#9ca3af",
"text-transform": "uppercase",
"letter-spacing": "0.5px"
}
},
{
"elmType": "span",
"txtContent": "=toLocaleDateString([$Deadline])",
"style": {
"font-size": "13px",
"font-weight": "=if([$Deadline] < @now, '700', '500')",
"color": "=if([$Deadline] < @now, '#dc2626', '#374151')"
}
},
{
"elmType": "span",
"txtContent": "=if([$Deadline] < @now, '⚠ OVERDUE', '')",
"style": {
"font-size": "10px",
"font-weight": "700",
"color": "#dc2626"
}
}
]
}
]
}
}
Checklist — "I Can't Believe That's SharePoint"
- ✅ Full rowFormatter — NOT default column grid
- ✅ Horizontal compartment layout with VISIBLE DIVIDERS between sections
- ✅ Each compartment has a tiny uppercase label (DOCUMENT, STATUS, PROGRESS, DEADLINE)
- ✅ Labels are 9px, gray, uppercase with letter-spacing — subtle but structured
- ✅ Progress percentage is LARGE (20px) and centered in its compartment
- ✅ Warm earth-tone badge colors (burnt orange, olive green)
- ✅ Overdue cards get a red left-border accent — not the whole border
- ✅ No sidebar — this is a horizontal grid, like bento box compartments
- ✅ Subtle shadow (not hard offset) — organized, not aggressive
- ✅ On Track / At Risk indicator under the status badge
- ✅ Completely different layout from Neobrutalism (compartments vs sidebar) and Glassmorphism (horizontal vs stacked)
Responsive / mobile
- ≤ 600 px: bento compartments stack vertically rather than sitting side-by-side. Set the row container to
flex-wrap: wrapand each compartment tomin-width: 0so titles ellipsis-truncate. - ≤ 480 px: hide the compartment labels (Document / Status / Progress / Deadline), keep only the values. The compartment dividers carry the structure on their own.
- Padding step-down: 16px desktop → 12px tablet → 8px mobile.
- Touch targets: any
customRowActionelement stays ≥ 44 × 44 px on mobile.
Implementation notes
The tokens + rowFormatter JSON in this file has grown large. When adapting it for a real library, treat the tokens block as the source of truth and re-derive the rowFormatter from it — do not mass-edit both halves of the file in parallel. A future iteration should split this into two reference files (tokens first, then rowFormatter that consumes them).