zrosenfield/style-blueprint

Blueprint — Style Tokens + Row Template

Monochromatic blue. Technical. Precise. Every card is a spec-sheet entry on an engineering drawing. Status badges are rubber stamps with double-ring borders. This is the most compact card in the library.

Layout philosophy: Ultra-compact spec sheet with a blue left edge. No sidebar, no banner — just a clean two-line card with a 4px blue left border. Line one is the document name. Line two is the stamp, progress bar, percentage, and due date — all on one row. The only color break in the entire list is overdue red. Everything else is blue, from the darkest ink to the palest wash.

---

Color Palette

| Swatch | Hex | Semantic Role | |---|---|---| | 1 | #1e3a8a | ink — primary text, left edge, darkest blue | | 2 | #1e40af | stamp — rubber stamp borders and text | | 3 | #2563eb | date — date text, secondary info | | 4 | #3b82f6 | fill — progress bar fill | | 5 | #60a5fa | label — subtle labels like "DUE" | | 6 | #93c5fd | rule — card border, grid lines | | 7 | #dbeafe | wash — progress track, lightest blue | | 8 | #ffffff | paper — card background | | 9 | #dc2626 | alert — overdue ONLY, the single non-blue |

CRITICAL: Swatches 1–8 are ALL BLUE. Swatch 9 (red) is used ONLY for overdue states. There are no per-status color variations — every status looks the same monochromatic blue. The stamp text itself differentiates statuses. Overdue is the one dramatic break from the blueprint palette.

---

Badge Tokens (Rubber Stamp)

The stamp uses a double-ring border: an outer div with a 2px border and 1px padding, wrapping an inner span with a 1px border. This creates the classic certification/rubber-stamp impression.

• outer_border: 2px solid #1e40af
• outer_padding: 1px (gap between rings)
• inner_border: 1px solid #1e40af
• inner_padding: 2px 8px
• font-size: 10px
• font-weight: 700
• text-transform: uppercase
• color: #1e40af
• background: transparent (stamps are outlines, not fills)
• border-radius: 0px (sharp corners — technical, angular)

status_colors

| Value | stamp_border | stamp_text | background | |---|---|---|---| | Draft | #1e40af | #1e40af | transparent | | In Review | #1e40af | #1e40af | transparent | | Revising | #1e40af | #1e40af | transparent | | Approved | #1e40af | #1e40af | transparent | | Published | #1e40af | #1e40af | transparent | | _fallback | #1e40af | #1e40af | transparent | | OVERDUE (any) | #dc2626 | #dc2626 | transparent |

CRITICAL: Every status uses the SAME blue. The stamp text is the only differentiator. Overdue overrides ANY status — when a deadline has passed, the stamp turns red regardless of status value. This is intentionally monochromatic.

---

Progress Bar Tokens

• progress_track_height: 4px (ultra-thin — compact)
• progress_track_bg: #dbeafe (wash)
• progress_track_border: none
• progress_track_radius: 1px
• progress_fill_color: #3b82f6 (single blue — NO color changes by percentage)
• progress_fill_radius: 1px
• progress_label_font_size: 13px
• progress_label_font_weight: 700
• progress_label_color: #1e3a8a (ink)

CRITICAL: Progress fill is ALWAYS #3b82f6 regardless of percentage. No low/mid/high color shifts. Blueprint is monochromatic.

---

Deadline Tokens

• deadline_icon: none (no emoji — use text label "DUE" instead)
• due_label: DUE
• due_label_font_size: 10px
• due_label_color_normal: #60a5fa (label)
• due_label_color_overdue: #dc2626 (alert)
• date_font_size: 12px
• date_normal_color: #2563eb (date)
• date_normal_weight: 500
• date_overdue_color: #dc2626 (alert)
• date_overdue_weight: 700
• overdue_label: OVERDUE (text only — no emoji, no fire, no icons)
• overdue_label_font_size: 10px
• overdue_label_color: #dc2626

CRITICAL: No emoji anywhere in the blueprint style. No 🔥, no 🗓️, no ✨. Text labels only. This is a technical drawing, not a party.

---

Row Card Tokens

• card_border: 1px solid #93c5fd (rule)
• card_border_left: 4px solid #1e3a8a (ink — the blue left edge)
• card_border_radius: 2px (barely rounded — sharp, technical)
• card_background: #ffffff (paper)
• card_margin_bottom: 4px (tight stacking)
• card_padding: 8px 14px (compact)
• card_shadow: none (clean, flat — no shadows on a blueprint)
• gap_between_lines: 4px
• overdue_border: 1px solid #dc2626
• overdue_border_left: 4px solid #dc2626

CRITICAL: No shadows. Blueprints are flat technical drawings. The 4px left edge is the ONLY structural accent — it's a thin spec-sheet margin line, not a sidebar.

---

Row Template Layout

Ultra-compact two-line spec sheet with blue left edge.

┌──────────────────────────────────────────────────────┐
▌ API Guide.docx                                       │
▌ ╔═APPROVED═╗  ━━━━━━━━━━━░░░░  75%   DUE 5/15/26   │
└──────────────────────────────────────────────────────┘

Overdue variant:
┌──────────────────────────────────────────────────────┐  ← red border
▌ API Guide.docx                                       │
▌ ╔═APPROVED═╗  ━━━━━━━━━━━░░░░  75%   DUE 5/15 OVERDUE│
└──────────────────────────────────────────────────────┘

Key differences from every other style:

• NO banner (unlike Retro's colored top banner)
• NO sidebar (unlike Neobrutalism's left panel)
• NO shadows (unlike both Retro and Neobrutalism)
• NO emoji (unlike every other style)
• NO per-status colors (unlike every other style)
• Two lines total — the most compact card in the library
• Double-ring stamp border — unique to Blueprint

---

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. Note: Blueprint has no per-status color expressions, so there are no status value strings to remap. 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",
      "border": "=if([$Deadline] < @now, '1px solid #dc2626', '1px solid #93c5fd')",
      "border-left": "=if([$Deadline] < @now, '4px solid #dc2626', '4px solid #1e3a8a')",
      "border-radius": "2px",
      "background-color": "#ffffff",
      "margin-bottom": "4px",
      "padding": "8px 14px",
      "gap": "4px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "13px",
          "font-weight": "700",
          "color": "#1e3a8a",
          "line-height": "1.2"
        },
        "txtContent": "=if([$FileLeafRef] == '', [$Title], [$FileLeafRef])"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "gap": "12px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "inline-flex",
              "padding": "1px",
              "border": "=if([$Deadline] < @now, '2px solid #dc2626', '2px solid #1e40af')"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Status]",
                "style": {
                  "display": "inline-block",
                  "padding": "2px 8px",
                  "border": "=if([$Deadline] < @now, '1px solid #dc2626', '1px solid #1e40af')",
                  "font-size": "10px",
                  "font-weight": "700",
                  "text-transform": "uppercase",
                  "color": "=if([$Deadline] < @now, '#dc2626', '#1e40af')",
                  "white-space": "nowrap",
                  "background-color": "transparent"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "1",
              "height": "4px",
              "background-color": "#dbeafe",
              "border-radius": "1px",
              "overflow": "hidden",
              "min-width": "60px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "=toString([$Progress]) + '%'",
                  "height": "100%",
                  "background-color": "#3b82f6",
                  "border-radius": "1px"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "txtContent": "=toString([$Progress]) + '%'",
            "style": {
              "font-size": "13px",
              "font-weight": "700",
              "color": "#1e3a8a",
              "min-width": "32px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "gap": "4px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "DUE",
                "style": {
                  "font-size": "10px",
                  "font-weight": "600",
                  "color": "=if([$Deadline] < @now, '#dc2626', '#60a5fa')",
                  "text-transform": "uppercase"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString([$Deadline])",
                "style": {
                  "font-size": "12px",
                  "font-weight": "=if([$Deadline] < @now, '700', '500')",
                  "color": "=if([$Deadline] < @now, '#dc2626', '#2563eb')"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$Deadline] < @now, 'OVERDUE', '')",
                "style": {
                  "font-size": "10px",
                  "font-weight": "700",
                  "color": "#dc2626",
                  "text-transform": "uppercase"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

---

Checklist — "Is This Actually a Blueprint?"

• ✅ Full rowFormatter — NOT default column grid
• ✅ Ultra-compact TWO-LINE layout — the shortest card in the library
• ✅ NO banner, NO sidebar, NO panel — just a clean spec sheet
• ✅ 4px blue left edge (#1e3a8a) — a margin line, NOT a sidebar
• ✅ Double-ring rubber stamp badges (outer 2px + inner 1px border)
• ✅ ALL stamps are the same monochromatic blue — no per-status color variation
• ✅ Stamp background is TRANSPARENT — outlines only, like a real ink stamp
• ✅ Progress bar is 4px thin (half the height of other styles)
• ✅ Progress fill is ALWAYS #3b82f6 — no color changes by percentage
• ✅ NO emoji anywhere — no 🔥, no 🗓️, no ✨, no 🎯
• ✅ Text labels only: "DUE" and "OVERDUE"
• ✅ NO shadows — flat, clean, technical
• ✅ Border-radius 2px — barely rounded, sharp and precise
• ✅ 4px margin between cards — tight stacking
• ✅ Entire palette is swatches 1–8 (all blue) from the blueprint palette
• ✅ Overdue is the ONLY red (#dc2626) — left edge, stamp, date, and label all flip to red
• ✅ Overdue card border turns red on ALL sides — impossible to miss
• ✅ Silhouette test: two flat lines with a left edge looks NOTHING like a banner card or sidebar card