PowderCoatingLogix/src/PowderCoating.Web/design_handoff_pcl_redesign

Handoff: Powder Coating Logix — Visual Redesign

Overview

This package redirects Powder Coating Logix from a generic Bootstrap-admin aesthetic to a calmer, more industrial voice — warm neutrals, a single ember accent, monospace numerics, borders-over-shadows, domain signals on screen.

Three representative screens are mocked end-to-end (Dashboard, Jobs list, Daily board). The same tokens, type stack, and component vocabulary extend to every other page in the app.

About the Design Files

The files in this bundle (Design Review.html, mock_components.jsx, screens_before.jsx, screens_after.jsx, review_app.jsx) are HTML/React design references, not production code to copy.

Your task is to recreate the "after" designs inside PowderCoating.Web — an ASP.NET Core MVC app with Razor .cshtml views, Bootstrap 5, and jQuery. Use the codebase's existing patterns (Razor partials, tag helpers, the _Layout.cshtml shell, Bootstrap utility classes) — do not introduce React.

Where the HTML mocks use inline React-style components, translate them to:

• CSS custom properties + Bootstrap 5 overrides in wwwroot/css/site.css
• Razor partial views in Views/Shared/ for repeated primitives (status chip, metric tile, section header)
• Tag helpers in TagHelpers/ for things already modeled that way (e.g. the sortable column pattern)

Fidelity

High-fidelity. Colors, typography, spacing, radii, and interaction affordances in the "after" mocks are final. Pixel-match the layout and tokens; use the codebase's existing icons (Bootstrap Icons) and form controls. No emoji.

Screens

1. Dashboard (Views/Dashboard/Index.cshtml)

Replace:

• The gradient "Welcome Back!" banner (currently background: var(--sidebar-gradient)).
• The 6-tile rainbow KPI grid with icon bubbles.

With, in order:

1. Hero brief — a single card, split 1.6 / 1 columns.
   • Left half: small mono kicker with date (SATURDAY · APRIL 18), followed by a one-sentence prose summary in Fraunces 500 / 26px, letter-spacing -0.015em, with --bad red on the "running hot" substring. Two buttons below: primary "Open daily board" (ink fill), secondary "Oven schedule" (outlined).
   • Right half: 2×2 grid of Metric tiles with mono numerals, a mono kicker label, and an optional delta in --ok / --bad with bi-arrow-up-right / bi-arrow-down-right.
2. Needs attention row — a single card with a header ("Needs attention · chip showing count") and 3 equal cells separated by vertical 1px rules. Each cell: status chip, large mono number, one-line label, mono detail.
3. Two-up — left 2/3: "Floor activity" feed (time · mono job id · customer · event-chip). Right 1/3: A/R aging with 4px bars, mono dollar amounts aligned right.

No icon bubbles anywhere. No gradient backgrounds.

2. Jobs list (Views/Jobs/Index.cshtml)

Replace:

• Both stat strips (.stats-cards-desktop AND .mobile-stats-compact).
• The bg-white shadow-sm table card chrome.
• The purple-link job number styling.

With:

1. Single metric strip — one card, 5 columns, each cell a Metric primitive. Delete the mobile-stats duplicate; the strip is already compact enough.
2. Toolbar — left: search input (with / shortcut hint) + pill-row of quick views (All, Due ≤ 48h, On floor, Ready, Mine). Right: Filters + New job (ink fill).
3. Table — borderless rows, 1px soft rules, mono uppercase headers at 10px / 0.12em tracking. Columns: Job (mono), Description (with a tiny dot + customer subline), Customer, Due (mono, red if hot), Status (chip), Priority (small text), Total (right-aligned mono), … menu.
4. Hot-job indicator — a 2px red bar on the left edge of the job ID cell, not a colored row.
5. Keyboard hint footer — mono text: ↑↓ to move · ↵ to open · ⌘F to filter.

3. Daily board (Views/Jobs/Board.cshtml)

Replace:

• Column tints (every column currently has its own bg color).
• Priority-as-colored-left-border (border-left: 4px solid {{priorityColor}}).

With:

1. Column header — mono uppercase label + small count pill. No fill. A thin 1px --rule underline separates header from cards.
2. Curing column — gets a small live "oven meter" strip: <i class="bi-fire"></i> 180°C · 14 min with a pulsing --ember dot. The strip is the only saturated color on the board.
3. Hot jobs — a single 2px red edge on the card's left, drawn as a pseudo-element so it doesn't change card padding.
4. Card footer — 1px --rule-soft top border, mono row: powder swatch (9px color chip generated from a lookup on PowderInventory.ColorHex or a name→hex map) + powder name + parts count + priority dot.
5. Toolbar — segmented view switch (Board / List / Oven) + mono stats line (11 jobs on floor · 2 hot · avg cycle 3.2 d) + Group/Hide controls.

Design Tokens

Add these to the top of wwwroot/css/site.css (or a new wwwroot/css/tokens.css linked from _Layout.cshtml before Bootstrap):

:root {
  /* Neutrals — warm paper */
  --pcl-ink:       #0F0F10;
  --pcl-graphite:  #1A1A1C;
  --pcl-slate:     #3A3A3E;
  --pcl-steel:     #6B6B70;
  --pcl-mute:      #9A9A9F;
  --pcl-rule:      #E4E2DC;
  --pcl-rule-soft: #EFEDE7;
  --pcl-paper:     #FAFAF7;
  --pcl-paper-2:   #F3F1EB;
  --pcl-card:      #FFFFFF;

  /* Signal — shared chroma, varied hue */
  --pcl-ember:      oklch(0.68 0.17 50);
  --pcl-ember-tint: oklch(0.95 0.04 55);
  --pcl-ember-ink:  oklch(0.42 0.15 40);
  --pcl-ok:         oklch(0.62 0.11 155);
  --pcl-ok-tint:    oklch(0.95 0.04 155);
  --pcl-warn:       oklch(0.76 0.13 80);
  --pcl-warn-tint:  oklch(0.96 0.05 85);
  --pcl-bad:        oklch(0.60 0.19 25);
  --pcl-bad-tint:   oklch(0.95 0.04 25);
  --pcl-cool:       oklch(0.58 0.09 240);
  --pcl-cool-tint:  oklch(0.95 0.03 240);

  /* Bootstrap overrides */
  --bs-body-bg:     var(--pcl-paper);
  --bs-body-color:  var(--pcl-ink);
  --bs-border-color: var(--pcl-rule);
  --bs-primary:     var(--pcl-ink);  /* primary actions are ink-filled */
}

/* Dark surface variant — applied on data-surface="ink" */
[data-surface="ink"] {
  --pcl-paper:    #0E0E10;
  --pcl-paper-2:  #17171A;
  --pcl-card:     #1C1C20;
  --pcl-ink:      #F4F2EC;
  --pcl-slate:    #C2C0BA;
  --pcl-steel:    #8A8883;
  --pcl-rule:     #2B2B2F;
  --pcl-rule-soft:#232327;
}

Spacing / radius / type scale

Token	Value	Use
radius-sm	4px	swatches, small chips
radius	6px	buttons, inputs, cards within a card
radius-lg	8px	top-level cards, toolbars
space-1…6	4 / 8 / 12 / 16 / 20 / 24 px	grid gaps
font-display	Fraunces 500, -0.015em	hero brief only
font-ui	Inter 400/500/600, -0.005em	everything else
font-mono	IBM Plex Mono 400/500, feature-settings "zero"	all numerics, IDs, timestamps, keyboard hints, column kickers

Type sizes

Name	Size / line	Weight	Use
display	26 / 1.2	Fraunces 500	dashboard hero sentence
h1	22 / 1.25	Inter 600	page title
h2	16 / 1.35	Inter 600	section header inside card
body	13 / 1.5	Inter 400	table rows, card body
meta	12 / 1.5	Inter 400 --pcl-slate	secondary text
kicker	10 / 1.2, 0.14em tracking, uppercase	IBM Plex Mono 500 --pcl-steel	column headers, card section labels
metric	26 / 1	IBM Plex Mono 500	KPI value

Razor Partials to Build

_StatusChip.cshtml

@model (string Kind, string Text)
<span class="pcl-chip pcl-chip-@Model.Kind">
  <span class="pcl-chip-dot"></span>@Model.Text
</span>

CSS: background --pcl-{kind}-tint, color --pcl-{kind}, dot --pcl-{kind}, IBM Plex Mono 10.5px, 2px 8px padding, 99px radius. Kinds: neutral, ok, warn, bad, cool, ember.

Use this everywhere status badges exist today: Jobs, Invoices, Equipment, Maintenance, Customers. Replace every occurrence of bg-success bg-warning bg-danger badges.

_Metric.cshtml

@model (string Label, string Value, string? Delta, string? DeltaDir)

Renders: mono kicker label, mono 26px value, optional mono delta with arrow. No icon bubble.

_SectionHeader.cshtml

Kicker label + title + optional right-aligned mono meta. Replaces today's <div class="card-header fw-bold">.

_PowderSwatch.cshtml

@model (string ColorHex, string Name, int? Size)
<span class="pcl-swatch" style="background:@Model.ColorHex" title="@Model.Name"></span>

9px color chip + 1px rgba(0,0,0,0.12) border. Use it anywhere a powder name appears.

Interactions & Behavior

• Hover on table row: background: var(--pcl-paper-2) only. No elevation change.
• Row keyboard nav: arrow keys move a focus ring, enter opens. The hint footer on Jobs list documents this.
• Buttons: primary = --pcl-ink bg, --pcl-paper fg; ghost = --pcl-card bg, --pcl-rule border, --pcl-ink text. No box shadows. 6px radius.
• Focus ring: 2px outline in --pcl-ember, 2px offset.
• Oven meter pulse: @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } } on the ember dot — 1.5s. This is the only loop animation allowed. Kill .badge-glow-critical.
• Toast / alert: keep existing Toastr wiring; restyle to use the tokens.

Sidebar

Keep the existing sidebar structure but:

• Ship only Paper (default) and Ink sidebar themes. Delete the 12 [data-sidebar=…] gradient variants.
• Active item: 2px --pcl-ember left bar + icon tinted ember + --pcl-paper text. No gradient.
• Add a ⌘K search affordance at the top of the nav (scaffold — wire later).
• Group headers: mono uppercase, 0.12em tracking, rgba(255,255,255,0.35) on ink surface.

Files to Touch

Layer	File	Change
Tokens	wwwroot/css/site.css	Prepend :root token block; delete rainbow KPI colors, glow keyframes, 11 of 12 sidebar palettes
Layout	Views/Shared/_Layout.cshtml	Swap sidebar theming; load Fraunces + IBM Plex Mono + Inter from Google Fonts; add _StatusChip + _Metric partials
Dashboard	Views/Dashboard/Index.cshtml	Rewrite top 60% of the file (welcome banner + KPI grid)
Jobs	Views/Jobs/Index.cshtml	Collapse both stat strips into one metric row; restyle table; add quick-view chips
Board	Views/Jobs/Board.cshtml	Kill column tints + priority left-border; add oven meter; card footer redesign
Shared	Views/Shared/_Metric.cshtml, _StatusChip.cshtml, _SectionHeader.cshtml, _PowderSwatch.cshtml	New partials

The remaining CRUD pages (Customers, Invoices, Inventory, etc.) inherit the new look automatically once the tokens, _StatusChip, and _Metric partials land — they all use the same stat-strip + card-table layout today.

Shipping Order

1. Tokens + font imports — ½ day
2. _StatusChip + _Metric partials and a codebase-wide find-and-replace of badge bg-{color} / stat-card markup — 1 day
3. Dashboard rewrite — ½ day
4. Jobs list rewrite — ½ day
5. Daily board rewrite — 1 day
6. Sidebar simplification + ⌘K scaffold — ½ day
7. Sweep remaining list pages (Customers, Invoices, Equipment, Maintenance, Vendors, PO) using the established partials — 1–2 days

~5–6 dev days to ship the visual overhaul.

Files in This Bundle

• Design Review.html — interactive document with before/after comparisons. Open locally.
• mock_components.jsx, screens_before.jsx, screens_after.jsx, review_app.jsx — React source for the mocks. Reference only.
• CLAUDE.md — brief for Claude Code when run inside PowderCoating.Web/.
• DARK_MODE.md — supplemental brief that supersedes the dark-surface tokens below and adds Bootstrap theme binding, a persisted toggle, and per-screen verification. Read this if you're implementing or fixing dark mode.

Assets

No new image assets required. Keep wwwroot/images/pcl-logo.png. Powder color hex values come from existing PowderInventory.ColorHex column (or a name→hex fallback map in a new Helpers/PowderSwatchHelper.cs if that column isn't populated).