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

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

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

Responsive / mobile

• ≤ 720 px: the high-density inline metadata wraps to a second line under the title. Keep the blue left-edge accent at full height.
• ≤ 480 px: drop the swatch ramp from 8 swatches to ~3 in practice — primary, accent, overdue red. Hide tertiary chips entirely; never shrink chip text below 12 px on mobile.
• Hero text step-down: 16 px → 14 px on mobile. The style relies on tight stacking, not large text.

Implementation notes

Palette trim

The shipped palette ships nine blue swatches (1–9). In practice, swatches 4–6 are largely interchangeable to the eye and can be collapsed when re-skinning. A safe minimum set is swatch 1 (primary), swatch 7 (accent), and the overdue red #dc2626. Anything beyond that is connoisseur territory — use only when the list has 5+ distinct status values that genuinely need separation.

Rubber-stamp double-ring fallback

The double-ring rubber-stamp badge depends on a nested element pattern (inner ring + outer ring). If the second ring's offset or clip-path is dropped by a SharePoint theme or modern view renderer:

• Fall back to a single solid ring at the outer color, with the inner space filled by a lighter tint of the same swatch.
• Keep the uppercase status text inside — the ring is decoration; the label carries the meaning.
• Never substitute a pill — it breaks the silhouette test.