Style Terminal

Terminal — Style Tokens + Row Template

Dark backgrounds, neon text, sharp corners. Each row is a dark card that looks like terminal output. Status values render like CLI flags. The progress bar glows neon green.

Layout philosophy: Dark card with terminal aesthetic. The entire card has a dark background (#0f172a). All text is bright colored on dark. Status renders like a CLI flag in brackets. The prompt character > appears before the document name. Everything feels like you're reading ls -la output.

Badge Tokens

• padding: 4px 12px
• border-radius: 2px
• font-size: 11px
• font-weight: 700
• text-transform: uppercase

status_colors

Row Card Tokens

• card_background: #0f172a (near-black navy)
• card_border: 1px solid #1e293b
• card_border_radius: 4px (slightly rounded — terminals have some softness)
• card_margin_bottom: 4px (tight spacing — dense like terminal output)
• card_shadow: none
• card_padding: 14px 18px
• prompt_char: >
• prompt_color: #4ade80
• filename_color: #e2e8f0
• separator_color: #334155
• overdue_border: 1px solid #ef4444
• overdue_glow: 0px 0px 8px #ef444433 (subtle red glow for overdue)

Row Template Layout

Dark card with terminal-style content. Single row of data like CLI output.

Copy code
┌──────────────────────────────────────────────────────────┐
│                                                          │
│  > API Guide.docx     [IN REVIEW]   ████░░ 72%  5/15   │
│                                                          │
└──────────────────────────────────────────────────────────┘
  ↑ dark bg (#0f172a), neon text, overdue cards get red glow

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.

jsonCopy code
{
  "$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": "8px",
      "padding": "14px 18px",
      "background-color": "#0f172a",
      "border": "=if([$Deadline] < @now, '1px solid #ef4444', '1px solid #1e293b')",
      "border-radius": "4px",
      "margin-bottom": "4px",
      "box-shadow": "=if([$Deadline] < @now, '0px 0px 8px #ef444433', 'none')",
      "min-height": "60px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "14px",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": ">",
            "style": {
              "font-size": "14px",
              "font-weight": "700",
              "color": "#4ade80"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex": "2",
              "font-size": "14px",
              "font-weight": "600",
              "color": "#e2e8f0"
            },
            "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
          },
          {
            "elmType": "span",
            "txtContent": "[$Status]",
            "style": {
              "display": "inline-block",
              "padding": "4px 12px",
              "border-radius": "2px",
              "font-size": "11px",
              "font-weight": "700",
              "text-transform": "uppercase",
              "white-space": "nowrap",
              "color": "=if([$Status] == 'Draft', '#9ca3af', if([$Status] == 'In Review', '#38bdf8', if([$Status] == 'Revising', '#fb923c', if([$Status] == 'Approved', '#4ade80', if([$Status] == 'Published', '#34d399', '#6b7280')))))",
              "background-color": "=if([$Status] == 'Draft', '#374151', if([$Status] == 'In Review', '#1e3a5f', if([$Status] == 'Revising', '#422006', if([$Status] == 'Approved', '#052e16', if([$Status] == 'Published', '#022c22', '#1f2937')))))",
              "border": "=if([$Status] == 'Draft', '1px solid #4b5563', if([$Status] == 'In Review', '1px solid #0ea5e9', if([$Status] == 'Revising', '1px solid #f97316', if([$Status] == 'Approved', '1px solid #22c55e', if([$Status] == 'Published', '1px solid #10b981', '1px solid #374151')))))"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "14px",
              "font-weight": "700",
              "color": "#4ade80",
              "min-width": "40px",
              "text-align": "right"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=toLocaleDateString([$Deadline])",
            "style": {
              "font-size": "12px",
              "font-weight": "=if([$Deadline] < @now, '700', '400')",
              "color": "=if([$Deadline] < @now, '#ef4444', '#64748b')"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Deadline] < @now, '[OVERDUE]', '')",
            "style": {
              "font-size": "11px",
              "font-weight": "700",
              "color": "#ef4444"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "4px",
          "background-color": "#1e293b",
          "border-radius": "0px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "=toString([$Progress]) + '%'",
              "height": "100%",
              "background-color": "=if([$Progress] < 30, '#ef4444', if([$Progress] < 66, '#38bdf8', '#4ade80'))"
            }
          }
        ]
      }
    ]
  }
}

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

• ✅ Full rowFormatter — NOT default column grid
• ✅ DARK BACKGROUND (#0f172a) on every card — this IS the style
• ✅ Neon green > prompt character before every document name
• ✅ Light text on dark (#e2e8f0) for filenames
• ✅ Status badges have dark bg + neon colored text (inverted from normal)
• ✅ Progress percentage is neon green (#4ade80)
• ✅ Progress bar track is dark (#1e293b), fills glow neon (red → cyan → green)
• ✅ Zero border-radius on progress bar — hard edges
• ✅ Overdue shows [OVERDUE] in brackets like a CLI flag
• ✅ Overdue cards get a subtle red glow (box-shadow)
• ✅ Tight 4px spacing between cards — dense like terminal output
• ✅ No emoji anywhere — terminals don't have emoji
• ✅ Only style with dark cards — immediately distinguishable from everything else

Responsive / mobile

• ≤ 600 px: collapse the secondary metadata column under the terminal prompt icon. Keep the > prompt visible at every breakpoint — it carries the identity.
• ≤ 480 px: hide the bracketed flags except [OVERDUE]; status colour does the work.
• Hero text: monospace 14 px on desktop — do not step down further. Mono fonts at < 13 px become unreadable on small screens.
• Touch targets: ≥ 44 × 44 px. Tight 4 px row spacing satisfies density but the row card itself stays tappable.

Implementation notes

Neon contrast on dark (pinned)

The terminal palette is genuinely AAA on its dark background — the neon isn't decorative, it's measured.

Re-verify in WebAIM if any neon token is changed.

Audience scope (also in README)

This style is explicitly developer / technical-audience. Use it for engineering portals, dev rel sites, SRE / ops dashboards. Do not use it for general staff sites, HR / people sites, or external-facing pages — the dark + neon combination reads as "unfinished" or "broken" to a non-technical audience. If the requesting user isn't sure, default to a different style and offer Terminal as an alternative; never default into it.