zrosenfield/style-monochrome

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