# 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: ` 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):
```css
: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)
@Model.Text
```
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 `