zrosenfield/style-high-contrast

High Contrast — Style Tokens + Row Template

Maximum readability. Thick borders. Large text. Each row is a wide horizontal band with alternating backgrounds and a heavy left accent bar color-coded to the status. Everything is designed to be read at arm's length.

Layout philosophy: Wide bands with heavy accents. No card separation — rows are wide horizontal bands with alternating light/dark backgrounds. A thick (6px) left accent bar marks each row's status. All text is oversized. Progress percentage is the largest element. Optimized for accessibility, not aesthetics.

Badge Tokens

• padding: 6px 16px
• border-radius: 4px
• font-size: 14px
• font-weight: 700
• text-transform: uppercase

status_colors

| Value | bg | text | border | |---|---|---|---| | Draft | #1f2937 | #ffffff | 2px solid #1f2937 | | In Review | #1d4ed8 | #ffffff | 2px solid #1d4ed8 | | Revising | #b45309 | #ffffff | 2px solid #b45309 | | Approved | #047857 | #ffffff | 2px solid #047857 | | Published | #065f46 | #ffffff | 2px solid #065f46 | | _fallback | #374151 | #ffffff | 2px solid #374151 |

Row Card Tokens

• row_border: none (bands, not cards)
• row_background_even: #ffffff
• row_background_odd: #f8fafc
• accent_width: 6px (thick left accent bar)
• row_padding: 18px 24px
• row_margin: 0px (no gaps — continuous bands)
• overdue_background: #fef2f2 (light red wash over entire row)

Row Template Layout

Wide horizontal band. No card borders. Thick left accent. Alternating backgrounds.

┃█████ API Guide.docx         [IN REVIEW]       72%    5/15/2026         ┃
┃█████ ████████████████████████████████████░░░░░░░░░░░░░░               ┃
┃                                                          (white bg)    ┃
┃█████ Architecture Overview   [DRAFT]           35%    5/30/2026        ┃
┃█████ ███████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░                      ┃
┃                                                          (gray bg)     ┃
  ↑ 6px left accent in status color. Overdue rows get pink wash.

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": "10px",
      "padding": "18px 24px",
      "border-left": "=if([$Status] == 'Draft', '6px solid #1f2937', if([$Status] == 'In Review', '6px solid #1d4ed8', if([$Status] == 'Revising', '6px solid #b45309', if([$Status] == 'Approved', '6px solid #047857', if([$Status] == 'Published', '6px solid #065f46', '6px solid #374151')))))",
      "background-color": "=if([$Deadline] < @now, '#fef2f2', if(@rowIndex % 2 == 0, '#ffffff', '#f8fafc'))",
      "border-bottom": "1px solid #d1d5db",
      "min-height": "80px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "20px",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "2",
              "font-size": "16px",
              "font-weight": "700",
              "color": "#1f2937"
            },
            "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "6px 16px",
              "border-radius": "4px",
              "font-size": "14px",
              "font-weight": "700",
              "text-transform": "uppercase",
              "white-space": "nowrap",
              "color": "#ffffff",
              "background-color": "=if([$Status] == 'Draft', '#1f2937', if([$Status] == 'In Review', '#1d4ed8', if([$Status] == 'Revising', '#b45309', if([$Status] == 'Approved', '#047857', if([$Status] == 'Published', '#065f46', '#374151')))))",
              "border": "=if([$Status] == 'Draft', '2px solid #1f2937', if([$Status] == 'In Review', '2px solid #1d4ed8', if([$Status] == 'Revising', '2px solid #b45309', if([$Status] == 'Approved', '2px solid #047857', if([$Status] == 'Published', '2px solid #065f46', '2px solid #374151')))))"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "24px",
              "font-weight": "800",
              "color": "#1f2937",
              "min-width": "60px",
              "text-align": "right"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "gap": "6px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "📅",
                "style": { "font-size": "15px" }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$Deadline])",
                "style": {
                  "font-size": "15px",
                  "font-weight": "=if([$Deadline] < @now, '800', '500')",
                  "color": "=if([$Deadline] < @now, '#b91c1c', '#1f2937')"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$Deadline] < @now, '⚠ OVERDUE', '')",
                "style": {
                  "font-size": "14px",
                  "font-weight": "800",
                  "color": "#b91c1c"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "12px",
          "background-color": "#d1d5db",
          "border": "2px solid #1f2937",
          "border-radius": "2px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "=toString([$Progress]) + '%'",
              "height": "100%",
              "border-radius": "0px",
              "background-color": "=if([$Progress] < 30, '#b91c1c', if([$Progress] < 66, '#b45309', '#047857'))"
            }
          }
        ]
      }
    ]
  }
}

Checklist — "I Can't Believe That's SharePoint"

• ✅ Full rowFormatter — NOT default column grid
• ✅ Wide horizontal BANDS — not cards (no card separation, no rounded corners, no shadow)
• ✅ 6px thick left accent bar in status color
• ✅ Alternating row backgrounds (white / light gray) — even vs odd
• ✅ Overdue rows get full pink wash background
• ✅ ALL text is oversized (14-24px) — readable at arm's length
• ✅ Progress percentage is 24px and bold — second-largest element
• ✅ 12px thick progress bar with dark border — chunkiest of all styles
• ✅ Dark, high-contrast colors (WCAG AAA)
• ✅ 📅 icon + large date (15px)
• ✅ Different from ALL others: bands vs cards, no shadows, no rounded corners, maximum density