Skip to the report card

Upton Industries · Design review · Rev A · 2026-09-23

Drawn &Fired

A design review of upton.test, plus 35 ideas to make an 89-year-old furnace builder look like it runs hot

The site is clean, accessible and competently built, and nobody will remember it. You build furnaces that glow cherry-red, and there's nothing hot anywhere on the site. Your own salt bath line is faded to 58% opacity under a white veil, with your sign cropped off the top. Your best proof, 21 vector GA drawings with your model codes on them, sits in a Downloads list as text links tagged 'PDF'. You say 'over 80 years' (or '80+') in three places when it's 89, and 90 is next year. An engineer who reads a whole Box Furnaces data sheet gets to the end with nowhere to go but the footer. Everything here uses material Upton already has: drawings, heat, the nameplate format, 1937. Each idea shows what we checked, what's still unconfirmed, and what Upton would need to supply. Nothing is shipped yet. Pick your favorites: press Shortlist on any idea's nameplate and your list builds itself at the roadmap.

Read the report card Skip to the roadmap Short on time?
Project
upton.test website
Direction
Drawn & Fired
Themes
6
Rev
A
Date
2026-09-23
Drawing
Upton U-E submerged graphite electrode salt bath furnace, general arrangement (Upton's own GA sheet)
Upton Industries, Inc., a Kolene company

Sheet 01 / 11

Inspection report

Report card: upton.test today

B+ × 1C × 7D × 3

Inspected
upton.test
Areas
11
Date
2026-09-23
Method
10 lenses
Checks
Code + live DOM
Rev
A
Grades by area of the current site
AreaGradeFinding
Item 01First impression & homepage C Well typeset and completely forgettable: the only real photo is behind a white veil, and the proof strip spends two stats on one fact.
Item 02Product catalog & family pages C Solid KDL cards full of upscaled 350px snapshots in clashing colors, and the flagship Salt Bath family sorts sixth alphabetically.
Item 03Product detail pages C The new data-sheet layout is right, but every page ends at Downloads and then the footer, and the best asset (vector GA drawings) is a text link.
Item 04Applications directory & finder D A 5,659px phone book with 38 chips that each filter to their own heading, and not one temperature on a page about heat.
Item 05Navigation, header, footer & utility C The mega menu is fully built and switched off, 'you are here' breaks on every product page, and there's no global search.
Item 06Conversion & trust D No quote path on any data sheet, and the contact form files furnace buyers under 'Chemicals' by default.
Item 07Motion & interaction C document.getAnimations() returns 0; the careful plumbing is there, but nothing on the site ever looks hot.
Item 08Art direction, type & color C It looks like the Kolene template with a red skin: red used as highlighter ink, Lilex nearly absent, and no favicon (the file is 0 bytes).
Item 09Mobile C Nothing breaks, but on a data sheet the only visible phone number is 4,400px down in the footer, every input triggers iOS zoom, and the hero photo is a ghost.
Item 10Craft & accessibility B+ Focus traps, inert, live regions, self-hosted fonts and a privacy-first video setup: the build quality is real, and it's why the rest is fixable.
Item 11Memorability D Nothing here would stick in a heat treater's memory or get forwarded, and Upton has the raw material to fix that.

Grades are for the site as built todayStamps are opinions, not certifications

As found upton.test · first screen · 2026-09-23

Screenshot of upton.test today (/ · 1440×900 · the whole first screen). Pale veiled hero photo, "over 80 years" headline, and the top of the three-number proof strip.
Fig. 01aPale veiled hero photo, "over 80 years" headline, and the top of the three-number proof strip./ · 1440×900 · the whole first screen
Screenshot of upton.test today (/ · 390×844 · the phone first screen). A red text wordmark bar with no Upton mark, and the hero photo almost invisible behind the headline.
Fig. 01bA red text wordmark bar with no Upton mark, and the hero photo almost invisible behind the headline./ · 390×844 · the phone first screen

Sheet 02 / 11

The direction · Drawn & Fired

Cold drawings, hot data

Upton already owns the two things that would make its site unforgettable: engineering drawings and heat.

Its own general-arrangement (GA) drawings (21 vector one-page PDFs with model codes on them), its own HMI screen, the nameplate format every machine carries, and a logo whose U reads as a pot with an electrode in it. Its product glows cherry-red at working temperature. The site currently shows neither. 'Drawn & Fired' makes every surface one of two states.

State 1 · Cold

Upton's drawings

Blueprint linework, drafting grids, title blocks, stamped Lilex data, riveted steel plates.

State 2 · Fired

Heat

The black-body ramp from dull red through cherry and copper to white, and it appears only where it carries meaning: a temperature, a hover, the moment of intent.

A rack of parts glowing orange as it is lifted over a quench tank, a frame from Upton's own Swing Arm Quenching video
Upton's own footage · Swing Arm Quenching video · upton.test

Upton red stops being highlighter ink and becomes what it physically is, cherry heat (step 3 of the ramp). Copper stays KDL's interactive signal. Kolene blue gets one job: salt. The result still reads as a Kolene sibling (same tokens, same Plex/Lilex, the KDL dark hero Kolene already ships) but only Upton could have built it.

The heat ramp, cold to hotUpton red is step 3: cherry

  1. Dull red
  2. Blood red
  3. Cherry
  4. Copper
  5. Orange
  6. Yellow-orange
  7. Yellow
  8. White heat
The design system, for the build teamramp, colors, type, textures, principles

The heat ramp 8 tokens · --upton-heat-1…8

Black-body color, from dull red to white heat. Contrast is measured against drafting paper (#f6f3ec) and the furnace black (#120d0b). Steps 4 to 8 never set text on light surfaces.

heat-1#5e0c10Dull red= red-800Paper 12.3:1Dark 1.41:1Text OK on paper
heat-2#8b1318Blood red= red-700Paper 8.6:1Dark 2.03:1Text OK on paper
heat-3#CE2029Cherry (Upton red)= red-500Paper 4.91:1Dark 3.55:1Text OK on paper
heat-4#c2632aCopper= copper-500Paper 3.71:1Dark 4.7:1Text on dark only
heat-5#e8541eOrangePaper 3.31:1Dark 5.25:1Text on dark only
heat-6#f5a13aYellow-orangePaper 1.89:1Dark 9.23:1Text on dark only
heat-7#ffd98aYellowPaper 1.22:1Dark 14.3:1Text on dark only
heat-8#fff6e5White heatPaper 1.03:1Dark 18:1Text on dark only

Four colors, four jobs

  • Red Is a temperature

    The mark, the stamps and the primary action. Cherry is heat step 3, so red finally means something.

    --kdl-red-500
  • Copper Is the signal

    Links, focus rings and "you are here". It is KDL's interactive color, unchanged.

    --kdl-copper-500
  • Heat Is data

    Gauges, the heat bar, hover and focus. Never behind body text, never a status color.

    --upton-heat-bar
  • Kolene blue Is salt

    The salt handoff and the blueprint. One job, so it reads as Kolene when it appears.

    --kdl-blue-500

Two voices

Voice 1 · IBM Plex Sans 400–700States claims

Molten salt, engineered since 1937.

RegularMediumSemiBoldBold

Every piece of equipment is preassembled and fully tested before it ships from Roseville, Michigan.

Voice 2 · Lilex 400/500Sets anything you could measure or stamp

U-E · U-BE · U-CBE

Fig. 03.1Sheet 05 / 11Est. 1937

586-771-120030435 Groesbeck Hwy

012345678945,000 sq ft · 7 acres

Tabular figures and a slashed zero, always.

Textures

  • KDL grid--df-grid-kdl48px, 7.5% gray on furnace black. The dark hero Kolene already ships.
  • Drafting paper--df-grid-paper240px major, 48px minor. Report card, appendix, data sheets.
  • Blueprint--df-grid-blueprintBlue-900 with blue-200 linework, drawn from Upton's own GA sheets.
  • Plate + rivets--df-plate, --df-rivetsBrushed steel nameplate. Engraved Lilex, four rivets.
  • Stamp.df-stampDouble rule, red-500 ink, rotated. Never "certified".

Principles

  • Heat is information, not wallpaper.The black-body ramp marks temperature, hover/focus and one signature hot moment per page. It never sits behind body text or stands in for status colors.
  • Use Upton's own artifacts before anything new: GA drawings, the U-AUTO line, the HMI, model codes (U-BE, U-E, U-QS…), the nameplate, 1937.No stock icons, no invented facts.
  • Two type voices.IBM Plex Sans states claims. Lilex (tabular-nums) sets anything you could measure or stamp: model codes, standards, units, figure and section numbers.
  • Red is a temperature, copper is the signal, blue is salt.Red is for primary actions and the brand mark. Copper is for underlines, focus and 'you are here'. Kolene blue marks the salt handoff only.
  • Every data sheet ends at an engineer: every product page gets a quote path, a phone number and a pre-filled form.
  • Motion earns its keep.Every scroll-driven animation sits inside @media (prefers-reduced-motion: no-preference) AND @supports, because the theme's global reset (style.css:2149) doesn't stop them. Anything looping over 5s gets a pause control.

Full token and type spec from the direction brief

Heat ramp (new, in style.css :root; built mostly from existing kdl scales)
--upton-heat-1: var(--kdl-red-800) dull red; --upton-heat-2: var(--kdl-red-700) blood red; --upton-heat-3: var(--kdl-red-500) #CE2029 cherry = Upton red; --upton-heat-4: var(--kdl-copper-500) #c2632a; --upton-heat-5: #e8541e orange; --upton-heat-6: #f5a13a yellow-orange; --upton-heat-7: #ffd98a yellow; --upton-heat-8: #fff6e5 white heat. Composite --upton-heat-bar: linear-gradient(90deg, heat-1, heat-3 45%, heat-4 70%, heat-5 85%, heat-6).
Temper side (for process scales)
--upton-temper-straw: var(--kdl-warn); --upton-temper-bronze: var(--kdl-copper-700); --upton-temper-blue: var(--kdl-blue-700).
Surfaces
--upton-furnace-900 #120d0b (warm black; dark hero/footer bar), plus KDL --kdl-surface-inverse for the KDL dark hero; --upton-blueprint: var(--kdl-blue-900) with --kdl-blue-200 linework; --upton-paper #f6f3ec (drafting paper for drawings); plate steel linear-gradient(180deg,#e3e7eb,#b9c0c7) with a 1px repeating brush and four radial-gradient rivets.
Rules
heat steps 4-8 are never text on white (heat-5 is 3.67:1); on dark, accent text uses copper-300 (≈9:1); stripes or bars on dark get a 1px --kdl-gray-400 hairline, because red-900/800 vanish on #0a0d11; white on copper-500 is only 4.1:1, so use dark ink there.
Type
IBM Plex Sans 400-700 for prose and claims. Lilex 400/500 with font-variant-numeric: tabular-nums for codes, standards, units, §-numbers, FIG numbers, title blocks. Optional third cut IBM Plex Sans Condensed 700 (caps/digit subset, about 10 KB) for 72-96px category H1s and nameplate numerals, echoing the condensed UPTON wordmark.
Textures
KDL 48px grid (a 240px major grid on drawing sheets, 4-8% opacity), blueprint grid, brushed steel plus rivets, 4px heat bar replacing the 2px red page-header rule, stamped double-ruled marks (never 'certified' or 'approved').

Sheet 03 / 11

Theme 1 of 6 · 5 ideas · 3 live demos

Turn the heat on

Give the color system a physics degree: red is cherry heat, copper is the signal, and the site finally glows.

Start with the live demo

03.1Lights off, heat on
Drawing register
ModelIdeaEffort
hero-furnace-roomLights off, heat on (live demo)M
art-heat-ramp-tokensRed is a temperature, not a highlighterS
motion-heat-up-hoverEverything you touch heats up, then cools slowly (live demo)S
convert-cta-furnace-doorThe CTA band is a furnace door that lifts open (live demo)M
art-u-monogramPut the U on everything smallS
Model
hero-furnace-room
Tier
Headline
Effort
SML (effort M)
Lens
Homepage
Sheet
03.1

Lights off, heat on: a furnace-room hero with the UPTON sign in frame

Kolene's dark split hero, your line photo at full strength with the UPTON sign in frame, and a headline that quenches.

Area Homepage hero

  • /
Verdict: reviseMerges 4 ideasLive demo
  • Wow 5/5
  • Impact 5/5
  • Brand fit 5/5

03.1.1Live demo

Live demo hero-furnace-room
Upton's automated salt bath line on a shop floor, with the UPTON sign hanging from the gantry

Est. 1937 · A Kolene company

Molten salt, engineered since 1937.

Molten salt bath, batch, pit, and specialty furnaces designed and manufactured in Roseville, Michigan.

Request QuoteExplore Products
Stylized thermal view
UPTON signIn frame
PhotoFull strength
Contrast (AA 4.5:1)
Load motion
Headline

The blackout is only how this demo switches views. The proposed page load is just the H1 rise and quench; the photo is static from the first frame.

03.1.2Problem

The only photo of real Upton equipment sits at opacity .58 under a white veil (98%→30%). object-position 100% 50% crops out the UPTON sign on the gantry. At 390px the photo is almost invisible. The headline says 'for over 80 years' (it's 89). Nothing moves on load, and Kolene's own homepage already uses KDL's .kdl-hero--dark, so Upton is the pale one in the family.

03.1.3Concept

The hero switches to KDL's dark hero as a split panel. Copy sits on solid steel with a faint grid, and Upton's line photo runs at full strength from about 36% width to the right edge, anchored so the hanging UPTON sign lands clear of the copy. On load the H1 rises, and the emphasized phrase arrives with a copper-yellow bloom that cools to cherry over about 900ms, like a part being quenched. The eyebrow becomes a Lilex readout: 'EST. 1937 · A KOLENE COMPANY'. Suggested headline, echoing Kolene: 'Molten salt, engineered since 1937.' Optional power-up: a 'thermal lens' mode where the photo is pre-baked in thermal-camera tones and a 280px true-color lens follows the pointer, parked on the UPTON sign at rest, with a 'Show true color' button for keyboard and touch. On phones the photo sits full-bleed 4:3 above the copy with a 6px heat edge.

03.1.4Specification

Why Upton

It's KDL's own sitewide hero, so Upton finally reads as Kolene's sibling. Engineers trust real equipment with the maker's name on it, and that name is already in the photo. Dark with a glow is also what the equipment looks like when it's running.

Today on upton.test1 screenshot
Screenshot of upton.test today (/ · 1440 · top 900px). The only photo of real Upton equipment sits faded under a white veil, and the crop drops the UPTON sign.
Fig. 03.1The only photo of real Upton equipment sits faded under a white veil, and the crop drops the UPTON sign./ · 1440 · top 900px
Build noteseffort M

Scope it under .hero--dark, emitted by hero.php and switchable with a new 'upton_hero_variant' Customizer setting so the light hero is a one-click rollback. ≥900px: .hero__background{inset:0 0 0 36%}, .hero__image{opacity:1;object-position:0% 8%}, overlay 90deg from solid surface-inverse to 10% at the right; min-height min(78vh,720px). <900px: photo block aspect-ratio 4/3 above the copy, veil removed. Headline <strong>: an upton-quench keyframe from copper-500 plus a text-shadow bloom to accent-500, inside the no-preference guard; the glyph color never drops below large-text contrast (copper-300 is 8.6:1 on gray-800). Keep the image at its final opacity from frame 1 (it's the LCP). Thermal lens: pre-bake hero-thermal-{960,1280,1920}.jpg as static assets (no live SVG filter on the LCP image); the true-color layer loads lazy/low priority and is revealed with mask-image radial-gradient at --lx/--ly, set by a roughly 35-line hero-lens.js on (pointer:fine). Update both default-headline literals (hero.php:58, functions.php:138). Add forced-colors and print resets.

Risks

The film-scan grain shows at full strength, so apply a gentle contrast curve. Leading with 'Molten salt' means the subhead must also name batch, pit and specialty. Label the thermal view 'Stylized' so nobody mistakes it for real thermography. Keep dark bands spaced so the homepage doesn't become one black slab.

What Upton must supply

Upton to approve the headline rewrite. Optional: a higher-resolution scan of the line photo, or real thermal-camera footage.

What we checkedskeptic: revise

The split layout was tested live at three widths with the existing single image. LCP was measured as the image, not the H1. Kolene's dark hero was confirmed. The thermal lens is pre-baked because live SVG filters on a 1920px LCP image are costly.

Code, data and files

  • applications-grid.css:10-56
  • template-parts/hero.php:58
  • functions.php:138
  • LCP = img.hero__image

Checked on the live site

  • The split hero injected as CSS into the live homepage at 1440, 1024 and 390
  • Plus 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from4 ideas
  • hero-lights-out-molten-type Lights off, heat on: a dark split hero with the UPTON sign in frame (Homepage lens)
  • art-thermal-lens-hero Thermal lens: look at the line the way the process sees it (Art direction lens)
  • motion-hero-live-salt-bath Big swing: a hero that comes out of the furnace (Motion lens)
  • mobile-hero-sightglass Sight Glass Hero + Equipment Data Plate (Mobile lens)

Model
art-heat-ramp-tokens
Tier
Quick win
Effort
SML (effort S)
Lens
Art direction
Sheet
03.2

Red is a temperature, not a highlighter: the Roseville heat ramp

Add an 8-step black-body ramp where Upton red is cherry heat, then use red only for actions and the mark.

Area Global tokens, page-header rule, sticky header

  • all pages
Verdict: reviseMerges 4 ideas
  • Wow 3/5
  • Impact 4/5
  • Brand fit 4/5

03.2.1Problem

Red is used as label ink: 29 red text elements on the homepage (16 of them finder arrows). Eyebrows compute to #B51B23, next to --kdl-danger #b3261e, so labels look like errors. The nav underline is red where KDL §2.9 says copper. Heat itself (orange, glow) appears nowhere. The condensed sticky header gives no sense of progress on a 14,466px Privacy page.

03.2.2Concept

Add the 8-step heat ramp to :root. Upton red is literally step 3, cherry, and KDL copper sits between cherry and orange, so the brand color and the signal color turn out to be the same physics. Enforce the discipline: red for primary actions and the mark only; eyebrows and breadcrumbs back to KDL muted gray with a 6px red 'pilot light' dot; nav underline to copper. Heat appears as heat bars: the 2px red page-header rule becomes a 4px dull-red → cherry → copper → orange bar, the red footer bar becomes warm black with a heat bar, and the condensed header's bottom edge becomes a 3px thermocouple that fills along the ramp as you read and blooms white once at the footer.

03.2.3Today

Screenshot of upton.test today (/products/ · 1440 · page header and nav). Red is the label ink (breadcrumb, nav underline, header rule) and nothing on the page reads as heat.
Fig. 03.2Red is the label ink (breadcrumb, nav underline, header rule) and nothing on the page reads as heat./products/ · 1440 · page header and nav

03.2.4Specification

Why Upton

Heat treaters read steel color as temperature every day, so the palette works as information. It also pulls Upton back into KDL's own rules and costs about four new hex values.

Build noteseffort S

style.css :root: --upton-heat-1…8, --upton-heat-bar, --upton-furnace-900, temper tokens (see the direction palette). page-header.css:12: replace the border with a background heat bar (keep a solid red border in forced-colors mode). .kdl-eyebrow and breadcrumbs → --kdl-text-muted plus a ::before dot. Footer .site-info → furnace-900 plus an inset heat bar (surface only; structure untouched). Thermocouple: .is-condensed #masthead::after scaleX over scroll(root) inside @media (min-width:992px) and no-preference and @supports; end bloom via a one-shot IntersectionObserver on #colophon. Document the rules in KDL_v1.md §1.1: heat steps are never text on light surfaces and never status UI.

Risks

Pulling red off the labels may feel less 'Upton' at first; frame it as red being concentrated, not removed. Heat steps 5-6 must never drift into warnings. Label the glow temperatures 'stylized'. page-header.css is being edited in parallel.

What Upton must supply

none

What we checkedskeptic: revise

The audit was re-run and copper was confirmed to already drive button underlines and focus rings. The token ideas from the applications and chrome lenses and the header heat gauge are merged here as the foundation every other idea uses.

Code, data and files

  • cards.css:44-51
  • page-header.css:12
  • style.css:1367-1374
  • mega-menu.css:23-25
  • KDL_v1.md §1.1, §3.1, §2.9

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from4 ideas
  • art-blackbody-palette Red is a temperature, not a highlighter (Art direction lens)
  • apps-heat-scale-tokens Heat color tokens: temper blue to white heat (Applications lens)
  • chrome-thermocouple-rule Thermocouple rule: a scroll gauge that glows hotter as you read (Navigation lens)
  • motion-header-heat-gauge A header that really condenses, plus a heat-gauge reading bar (Motion lens)

Model
motion-heat-up-hover
Tier
Quick win
Effort
SML (effort S)
Lens
Motion
Sheet
03.3

Everything you touch heats up, then cools slowly

Hover and focus heat a surface up in a third of a second, then let it cool slowly, the way steel does.

Area Site-wide hover and focus (bento, cards, finder rows, chips, buttons)

  • /
  • /products/
  • /applications/
  • /application/annealing/
Verdict: keepMerges 2 ideasLive demo
  • Wow 4/5
  • Impact 3/5
  • Brand fit 5/5

03.3.1Live demo

Live demo motion-heat-up-hover

Proposed: one --heat value (0 to 1) drives every edge, bar, arrow and glow, for hover and Tab alike. It heats in 0.36 s and cools slowly, like steel. Sweep across Salt Bath Furnaces: it holds your track until it cools.

In-house engineeringupton.test /

Every furnace, engineered and built in Roseville.

Core heat treatment from /

Filter applications from /applications/

Tell us about your process

Heat recorder

CH 01Salt Bath Furnaces tile

--heat 0.00 cold

--heat vs timeDesigned curve

Quick rise, long tail. The yellow goes first and the dull red lingers, the way steel cools. Each surface cools on its own, back down the ramp.

0.65 s
Heat up
0.36 s · ease-out
Cool down
0.65 s · long tail

03.3.2Problem

There are two competing hover languages: a copper underline on buttons, and red text everywhere else. Finder arrows are already red at rest, so their hover barely registers. Focus rings are split between red (the global rule) and copper, although KDL §5.1 says copper. On the featured tile, the only hover change is the title fading to 88% white.

03.3.3Concept

One registered --heat property (0→1) drives every interactive surface. A tile's copper edge becomes a heating element: it climbs to orange-yellow with a soft ember glow in 360ms, then cools more slowly over 600-700ms, because real steel holds heat. Cards get a 2px bar along the bottom edge that glows along the ramp, and arrows turn copper. The featured Salt Bath tile gets a copper-red hot spot that follows the pointer. Keyboard focus triggers exactly the same heat as hover, and every focus ring becomes KDL copper, with the existing white override kept on red surfaces.

03.3.4Specification

Why Upton

It turns KDL's abstract 'copper = signal' rule into something an engineer recognizes from the shop floor, and the slow cool-down reads as 'these people understand thermal mass'.

Today on upton.test1 screenshot
Screenshot of upton.test today (/ · 1440 · bento with the Salt Bath Furnaces tile hovered). It lifts 3px and "See specs" turns red, the same red-text hover used everywhere else on the site.
Fig. 03.3It lifts 3px and "See specs" turns red, the same red-text hover used everywhere else on the site./ · 1440 · bento with the Salt Bath Furnaces tile hovered
Build noteseffort S

@property --heat {syntax:'<number>'; inherits:true; initial-value:0}. The base rule carries transition: --heat 650ms ease-in (cool-down); the hot state (:has(.product-card__link:is(:hover,:focus-visible))) sets --heat:1 with a 360ms duration. Bar on .product-card::after (the title's ::after is the stretched link), transform scaleX(var(--heat)), background from the heat tokens. Glow alpha ≤.35. Border via color-mix(in oklch, copper-500, heat-7 calc(var(--heat)*100%)). Hot spot: a ~12-line rAF pointermove handler gated on (hover:hover) and (pointer:fine), colors only up to copper so the white title keeps 3:1. Remove the red title hover; the arrow rests at text-muted. Global ring → copper. The reduce rule already makes the transition instant. Without @property it snaps, which is acceptable.

Risks

Applied everywhere, it becomes a gimmick, so limit it to linked tiles, rows and chips. Text contrast must never depend on the glow.

What Upton must supply

none

What we checkedskeptic: keep

Tested @property/color-mix interpolation in Chrome 154. Verified the footer's white focus override on red. The two hover-system ideas are merged; the button filament lives in the CTA idea.

Code, data and files

  • cards.css:114-116,137-146,236-238,274-282
  • applications-grid.css:211-226
  • catalog.css:74-77
  • style.css:452-458,1815-1826

Checked on the live site

  • A registered @property and color-mix test in Chrome
Merged from2 ideas
  • art-heat-up-hover Everything you touch heats up (Art direction lens)
  • motion-blackbody-heat-hovers Black-body hover states: everything you touch heats up (Motion lens)

Model
convert-cta-furnace-door
Tier
Feature
Effort
SML (effort M)
Lens
Conversion
Sheet
03.4

The CTA band is a furnace door that lifts open

The call-to-action band becomes a steel door that lifts as you scroll, with one-tap equipment chips and a line to Roseville.

Area CTA band + primary button

  • /
  • /application/annealing/
  • /products/batch-furnaces/box-furnaces/
Verdict: reviseMerges 3 ideasLive demo
  • Wow 5/5
  • Impact 4/5
  • Brand fit 4/5

03.4.1Live demo

Live demo convert-cta-furnace-door
Band
Door drive
Address: upton.test/
Upton Industries, Inc., a Kolene company

Applications

Find the right process application

Start with common production requirements, then browse the full applications directory for product matches.

Core heat treatment

  • Annealing
  • Tempering
  • Stress Relieving
  • Normalizing

Hardening and quench

  • Neutral Hardening
  • Austempering
  • Martempering
  • Marquenching

Cleaning and stripping

  • Metal Cleaning
  • Degreasing
  • Paint Stripping
  • Organic Stripping

Specialty processes

  • Drawing
  • Atmosphere Processing
  • Aluminum Aging
  • Nitinol Processing

Why us

Why Upton

  • Designed and manufacturedThermal process systems engineered around furnace type, heating method, controls, and production flow.
  • Submerged electrode heritageUpton helped establish the graphite electrode salt bath furnace design that became an industry standard.
  • Electric or gas-fired systemsEquipment can be specified for electric heating or gas firing, with protective atmosphere options when required.
  • Parts and mechanismsReplacement parts, transformers, parts washers, and desludging mechanisms support existing thermal processing lines.

Start a quote

What’s going in the furnace?

Pick your equipment. The quote form opens with it already filled in.

Engineered Thermal Solutions for over 80 years

Products

  • Salt Bath Furnaces
  • Specialty Furnaces
  • Batch Furnaces
  • Pit Type Furnaces
  • Parts Washers
  • Scott Connected Transformers
  • Replacement & Spare Parts

Contact us

30435 Groesbeck Hwy.
Roseville, MI 48066
586-771-1200

© 2026 Kolene Corporation | Upton Industries

SampleBand copy and chip set: Upton to approve.

The door rides the scroll. Scrub back and it closes.

Primary button: the hover line

Today

Copper-500 line on red-600: 1.6:1. Hover only, so keyboard focus never shows it.

Proposed

Filament, copper-300 to heat-7: 3.2–4.9:1 on red-600. Lights on hover and on keyboard focus, and presses in 1px.

03.4.2Problem

The closing band is a flat #0a0d11 rectangle with the page's third 'custom' line and third contact button. It's identical on all 40 pages it appears on, it's missing KDL §2.6's 4px copper bar, and its image option is unset. The primary button's hover underline is copper on red-600 (about 1.6:1), which is practically invisible, and it's hover-only, so keyboard users never see it.

03.4.3Concept

As the band scrolls in, a dark brushed-steel door with a stenciled UPTON rises (scroll-linked) and reveals a molten glow from the bottom edge behind a solid deep-red text core. The heading asks 'What's going in the furnace?' Five chips answer the form's equipment question in one tap (Salt bath · Batch · Pit · Parts washer · Help me choose), plus three ports: Quote (red), 'Call Roseville · 586-771-1200', and 'Running an Upton system? Parts & service →'. The copy adapts to context ('Annealing parts? Tell us the part and the throughput.'). The button's underline becomes a near-yellow filament that glows on hover AND focus, and the button presses in 1px on click. A 4px copper bar closes the band.

03.4.4Specification

Why Upton

It's a literal door into the quote form, pre-answering the dropdowns, and it gives phone-first buyers and returning owners their own paths. It's the one place the site can show heat with no photo shoot.

Today on upton.test1 screenshot
Screenshot of upton.test today (/ · 1440 · closing CTA band). A flat near-black rectangle with a third "custom" line and a third contact button, identical on every page it appears on.
Fig. 03.4A flat near-black rectangle with a third "custom" line and a third contact button, identical on every page it appears on./ · 1440 · closing CTA band
Build noteseffort M

cta-band.php: an aria-hidden .cta-band__door, a chips <ul> to /contact/?equipment=slug, and ports built from upton_get_primary_cta(), upton_get_phone() and the spare-parts permalink. The door's translateY(-100%) runs on a view() timeline on the door frame, animation-range entry 100% contain 65%, inside @supports AND no-preference; the fallback is the door already open (bottom edge and handle visible) with a static glow. Glow is radial-gradient heat-7 → copper-500 → accent-700 at 50% 115%, kept under the chip row. The text panel on red-900 (#310608) gives about 18:1 contrast. Pre-fill is shared with the quote rail (gform_pre_render_2 allowlist, or the JS reader). The filament is .kdl-btn::after linear-gradient(copper-300, heat-7), with :focus-visible scaleX(1) and :active translateY(1px). Headings pass through the band's existing heading/subhead args (taxonomy-product_app.php:101).

Risks

Heavy glow can look gimmicky, so keep it at the edges and away from text. Firefox gets the static fallback. The .kdl-btn change is site-wide, so check every red button. Gravity Forms choice-label changes silently break the pre-fill.

What Upton must supply

Upton to approve the heading copy and chip set.

What we checkedskeptic: revise

Three near-identical CTA ideas are merged. The decorative gauge was dropped (instrumentation with no reading looks fake). Contrast was computed. The band now also appears on product pages via the quote rail's phase 0.

Code, data and files

  • style.css:1771-1827, 1911-1975
  • cta-band.php:13-42
  • KDL_v1.md §2.6

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from3 ideas
  • hero-cta-furnace-door The CTA band is a furnace door that lifts open (Homepage lens)
  • motion-cta-furnace-mouth The CTA band opens like a furnace door, and the button glows like a filament (Motion lens)
  • convert-cta-band-furnace-door Open the furnace door: a CTA band that actually glows (Conversion lens)

Model
art-u-monogram
Tier
Quick win
Effort
SML (effort S)
Lens
Art direction
Sheet
03.5

Put the U on everything small

Extract the logo's U as a crisp monogram: favicon, phone header and an end mark on every data sheet.

Area Favicon, mobile header, data-sheet end mark, form submit state

  • /
  • /products/batch-furnaces/box-furnaces/
  • /contact/
Verdict: revise
  • Wow 3/5
  • Impact 4/5
  • Brand fit 5/5

03.5.1Problem

There's no favicon: no <link rel='icon'>, site_icon is 0, and /favicon.ico returns 0 bytes. On phones the header shows only a red text wordmark bar (by design, header.php:20-24), so the Upton mark never appears on a phone. theme-color #c00 doesn't match the #CE2029 bar underneath it.

03.5.2Concept

Extract the U and its red element as a crisp SVG monogram. It becomes the favicon and home-screen icon. The mobile bar turns white like desktop, with the monogram, a condensed UPTON wordmark and a 3px heat bar, and theme-color matches. A tiny U closes every data sheet as an end mark. While the contact form submits, the U's red element heats from dull red to cherry, then flashes orange on success.

03.5.3Today

Screenshot of upton.test today (/ · 390×844 · first screen). The phone header is a red text wordmark by design, so the Upton mark never appears (and the site has no favicon).
Fig. 03.5The phone header is a red text wordmark by design, so the Upton mark never appears (and the site has no favicon)./ · 390×844 · first screen

03.5.4Specification

Why Upton

Recognition in tabs, bookmarks and phone headers is basic brand hygiene, and today there's none. The monogram carries the founding-product story in 16px.

Build noteseffort S

assets/images/upton-u.svg traced from the official vector. wp_head prints the SVG icon plus 32px and 180px PNG fallbacks only if !has_site_icon(), so the owner's future choice wins; optionally serve /favicon.ico. Mobile bar CSS (style.css:601-633): white background plus the heat bar. Inline the SVG aria-hidden and keep the link text. End mark: .entry-content:has(> h2)::after placed in grid-column text. GF spinner swap with a static cherry state under reduced motion.

Risks

A re-traced mark can drift from the official one, so use Upton's vector. Changing the mobile bar from red to white shifts the mobile feel, so show Kyle both.

What Upton must supply

Upton to supply the official vector logo.

What we checkedskeptic: revise

The 0-byte favicon, site_icon 0 and the 0×0 mobile logo were verified. The 404 is handled by its own idea.

Code, data and files

  • curl https://upton.test/favicon.ico → 0 bytes
  • wp option get site_icon → 0
  • header.php:5,20-30
  • uploads/2022/05/Upton_Logo_2021_HiRes.png

Checked on the live site

  • At 390 the desktop logo is hidden and the header shows only the text wordmark

Sheet 04 / 11

Theme 2 of 6 · 7 ideas · 3 live demos

Draw it like we build it

Swap the blurry snapshots for Upton's own GA drawings, title blocks and stamped data.

Start with the live demo

04.1Drawn, not photographed
Drawing register
ModelIdeaEffort
catalog-drawn-not-photographedDrawn, not photographed (live demo)M
detail-live-blueprintThe drawing is the hero (live demo)L
art-drawing-sheet-headerEvery page is a drawing sheet (with sideways navigation)M
art-two-voice-typeSans for claims, mono for anything you could measure, and numbered clausesM
catalog-sharpen-then-gradeSharpen, then gradeS
detail-rescue-crushed-photosUn-crush the ironM
wild-xray-cutawayX-ray the furnace (live demo)L
Model
catalog-drawn-not-photographed
Tier
Headline
Effort
SML (effort M)
Lens
Catalog
Sheet
04.1

Drawn, not photographed: GA elevations on cards and bento, and they heat up

Keep the no-photo bento and fill it with elevations from Upton's own GA drawings that heat up when you hover.

Area Homepage bento + catalog cards + /products/ structure

  • /
  • /products/
  • /products/salt-bath-furnaces/
  • /products/batch-furnaces/
  • /products/specialty-furnaces/
Verdict: reviseMerges 4 ideasLive demo
  • Wow 4/5
  • Impact 4/5
  • Brand fit 5/5

04.1.1Live demo

Live demo catalog-drawn-not-photographed

Proposed: the same five tiles, still no photos, now drawn from Upton's own GA sheets. Hover or Tab onto a tile and the linework heats from the bottom up.

04.1.2Problem

The bento is five mostly empty tiles (1,086px tall at 1440, 1,580px on a phone), deliberately photo-less. Catalog cards mix decades of photos with clashing color casts, and seven of them are 350px or smaller sources stretched to 403px. /products/ sorts alphabetically because all eight top-level pages have menu_order 0, so Clam Shell comes second and flagship Salt Bath sixth.

04.1.3Concept

Kyle's no-photo rule stays, and the tiles become drawings. Each bento tile shows the elevation from Upton's own GA drawing (U-E salt bath, box, pit with 'PIVOTING RETORT COVER', bell, spares detail) in fine gray linework on faint graph paper, with a Lilex title block ('SALT BATH FURNACES · 8 TYPES') and real sub-type chips. On hover or focus the linework heats from the bottom up, through gray, cherry and orange. Catalog cards get the same treatment: drawing on drafting paper, shop photo wiping in on hover like a furnace door opening, and graphite ground for salt-bath cards. /products/ reorders to match the homepage (Salt Bath, Batch, Pit, Specialty, then support equipment) and splits into 'The furnace line' tiles with child links, plus a compact support register.

04.1.4Specification

Why Upton

It fills the emptiness while keeping the owner's decision. These are Upton's real drawings, accurate by construction, and cross-sections are the most engineer-native visual there is.

Today on upton.test1 screenshot
Screenshot of upton.test today (/ · 1440 · products bento). Five mostly empty tiles (one flat red, four pale gray) with no photo or drawing of any machine.
Fig. 04.1Five mostly empty tiles (one flat red, four pale gray) with no photo or drawing of any machine./ · 1440 · products bento
Build noteseffort M

Masks: export each elevation with pdftocairo → magick negate to an alpha mask, saved as assets/images/drawings/{slug}.webp (the pit mask is 31KB; don't inline raw SVGs at 0.5-1.1MB). upton_render_bento_card() adds .product-card--drawn and style='--drawing:url(…)' when the file exists. The tile ::before uses mask:var(--drawing) with a gradient background whose background-position moves on .product-card:is(:hover,:focus-within). Chips come from get_pages(parent, sort menu_order,post_title), with z-index:2 over the stretched link. Catalog cards: products-grid.php renders <img class='product-card__drawing'> plus a .product-card__photo layer with a clip-path wipe on the existing :has() hover/focus selectors; delete the scale(1.03) rule. Family cards without their own drawing borrow a child's (Batch → U-BE, Specialty → U-LBE, Salt Bath → U-ABCD). Step zero: set menu_order in wp-admin. Tiers: a [products layout='range'] attribute; add new parts to upton_catalog_template_signature(). cards.css and shortcodes.php are being edited by another session, so coordinate. Glow layers: render each elevation, blur it and export webp alongside the mask (same pipeline, one extra magick step per drawing).

Risks

The drawings date from 2018, so Upton must confirm they're current. Kyle should confirm line drawings fit his photo-less rule. Scott, clam shell and spares have no drawing and keep a graded photo. Hand-cropping about 17 sheets is manual work.

What Upton must supply

Upton to confirm the drawings may be shown decoratively and reflect current builds, and to supply any drawings for Scott, clam shell and spares. Kyle to set menu_order and confirm which items count as support equipment.

What we checkedskeptic: revise

The mask-plus-gradient heat-up was prototyped. Only Pit (U-PE) and Parts Washers (U-T) have their own top-level drawings; family cards borrow a child's. Absorbs the /products/ range reorder, the line-art bento and the cutaway drawing system, all of which used Upton's real sheets instead of commissioned art.

Code, data and files

  • cards.css:197-240
  • front-page.php:28-44
  • WP-CLI: menu_order 0 on pages 35-49

Checked on the live site

  • A working bento-mask test, cold and hot states
  • A contact sheet of all 21 GA drawings
  • Plus 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from4 ideas
  • hero-blueprint-bento Bento tiles drawn from Upton's own GA drawings, and they heat up (Homepage lens)
  • wild-thermal-bento Firing Line-Art: bento tiles that light up (Wildcards lens)
  • art-section-drawings The U is a salt pot: a cutaway drawing system (Art direction lens)
  • catalog-furnaces-first-range Furnaces first: /products/ as a two-tier range instead of an alphabet (Catalog lens)

Model
detail-live-blueprint
Tier
Headline
Effort
SML (effort L)
Lens
Product detail
Sheet
04.2

The drawing is the hero: live blueprint plates

Put each product's own GA drawing on its page as a blueprint plate, with numbered pins that jump to the matching section.

Area Product detail: new 'General arrangement' section

  • /products/batch-furnaces/box-furnaces/
  • /products/batch-furnaces/car-bottom-furnaces/
  • /products/pit-type-furnaces/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/salt-bath-furnaces/mar-ausquenching/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
  • /products/parts-washers/
Verdict: reviseLive demo
  • Wow 5/5
  • Impact 4/5
  • Brand fit 4/5

04.2.1Live demo

Live demo detail-live-blueprint
Sample pins: verify with Upton
1 1 2 2 3 3 4 4 A A B B C C D D E E F F
Upton's general arrangement drawing of the U-BE box type furnace, redrawn as a blueprint: plan view above, side elevation below, with its callouts for the recirculation fan, the directional heat duct assembly and the manual or power lift door with counterweight.
Drawn by
Upton Industries, Inc., Roseville, Mich.
Model
U-BE
Original
Full sheet
Contact Upton
586-771-1200
General arrangement

Upton box type furnaceU-BE

Today it is a PDF link under Downloads. Point at a callout to find it in the page copy.

Arrow keys move between callouts.

Thermal Recirculation Systems

“Recirculation fans are located within a stainless steel plenum positioned in the top of the furnace heating chamber…”

On the live page, this callout scrolls to that section.

The last line on Upton's drawing“Contact Upton for furnaces designed to suit your specification sizes and production rates.”

Call Upton at 586-771-1200

04.2.2Problem

All 21 PDFs across 17 product pages are single-page vector GA drawings (0 raster images) with Upton model codes and callouts that name the parts described in the copy: RECIRCULATION FAN, BRUSH CONNECTOR, PUSHER ASSEMBLY, CHLORIDE CONVEYOR, HEATSAVER. They only appear as a 'PDF' row in Downloads, while the page's only artwork is a 300px photo.

04.2.3Concept

Each product page gets a 'General arrangement · U-BE' rail section right after the opening section. It's Upton's own drawing, converted to SVG and recolored: blue-200 linework on a blue-900 grid, the cyan layer in copper, and a Lilex title block 'UPTON INDUSTRIES, INC. · ROSEVILLE, MICH. · U-BE'. When it scrolls into view, a copper plotter line sweeps across and the drawing appears behind it, then numbered red pins pop onto the callouts. Hover or tap a pin and the matching list row lights up; click it to jump to that section (fan → Thermal Recirculation Systems). Pins for other Upton products link out: MAIN/TEASER TRANSFORMER → Scott Transformers, BRUSH CONNECTOR → Spare Parts. On graphite, a 'Heat' toggle animates the convection the copy describes, next to two bars: 5-8% vs 140-150% salt absorption.

04.2.4Specification

Why Upton

Engineers trust drawings more than adjectives. These drawings are real, already public, carry Upton's model codes, and most end with 'CONTACT UPTON FOR FURNACES DESIGNED TO SUIT YOUR SPECIFICATION', a call to action Upton drew itself.

Today on upton.test1 screenshot
Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · bottom 700px). The U-BE and U-BCE general-arrangement drawings appear only as two "PDF" rows in Downloads.
Fig. 04.2The U-BE and U-BCE general-arrangement drawings appear only as two "PDF" rows in Downloads./products/batch-furnaces/box-furnaces/ · 1440 · bottom 700px
Build noteseffort L

One-time asset prep, no runtime build: pdftocairo -svg, round coordinates, crop the viewBox, map stroke colors to classes (.k linework, .c cyan layer), save to assets/drawings/{pdf-basename}.svg plus a sidecar .json of pins ({x%,y%,n,label,anchor,href}). Callout text is outlined geometry, so meaning lives in the HTML <ol>, not the SVG. Map drawings by PDF basename, not '(U-XX)' parsing (that fails on 4 pages). Inject template-parts/blueprint-plate.php through a the_content filter at priority 12 before the second direct <h2>, and add .upton-plate to the full-width selector at style.css:764. Default is a lazy <img>; blueprint.js (~3KB) inlines the SVG on IntersectionObserver. Draw-in is one clip-path inset wipe plus a copper scan-line (dash-animating 3,241 paths would be too heavy), with the end state fill-mode both. JS convection checks matchMedia itself. Add a print variant with black strokes. Confirm WP Engine gzips SVG.

Risks

Upton engineering should approve showing the drawings large. Model-code conflicts need resolving first: U-DS appears on both internally heated and cleaning drawings, bell furnaces are labeled U-LBE vs U-LE, and U-CBE is titled 'Car Bottom Bell'. Pins are hand-placed (about 21 drawings × 3-6 pins). The drawings date from 2018.

What Upton must supply

Upton engineering to approve inline display, confirm the callout-to-section mapping, resolve the code conflicts, and approve charting the absorption figures already in the graphite copy.

What we checkedskeptic: revise

PDF facts and callouts were verified on renders. The 'CONTACT UPTON…' line is on the furnace drawings, not on U-HOIST. pathLength on <g> doesn't work, so the draw-in uses a clip-path wipe instead. The plate sits below the page header to avoid clashing with the nameplate header.

Code, data and files

  • pdfinfo/pdfimages over uploads/2018/*/*.pdf (21 files, 1 page, 0 images)
  • style.css:815-925 (downloads register)

Checked on the live site

  • U-BE converted to SVG and recolored; 835 KB raw, 74.6 KB gzip

Model
art-drawing-sheet-header
Tier
Feature
Effort
SML (effort M)
Lens
Art direction
Sheet
04.3

Every page is a drawing sheet (with sideways navigation)

Page headers become drawing sheets, with a grid, a dimension line and a title block that steps to sibling products.

Area Interior page header + breadcrumbs

  • /products/batch-furnaces/box-furnaces/
  • /application/annealing/
  • /about/
  • /contact/
  • /sitemap/
  • /no-such-page-xyz/
Verdict: reviseMerges 1 idea
  • Wow 4/5
  • Impact 3/5
  • Brand fit 5/5

04.3.1Problem

About, Contact, 404, Search, Privacy, archives and every product page share an identical gray band with a 2px red rule and a 44px H1. There's no texture and nothing that says 'engineering firm'. Breadcrumbs only go up: comparing Box with Car Bottom means climbing to Batch Furnaces and back down. At 390 the hoist trail wraps to three lines of red caps.

04.3.2Concept

The header becomes a drawing sheet: KDL's 48px grid re-inked at about 5% with a 240px major grid, fading in toward the right, corner registration ticks, and a dimension line under the H1. A hairline title block at the right (Lilex 11px) carries real navigation: SHEET 1 OF 2 ‹ › (siblings, e.g. Box ↔ Car Bottom), DWG /PRODUCTS/BATCH-FURNACES/BOX-FURNACES, SCALE NTS, DRAWN ROSEVILLE, MICH. The breadcrumb becomes a route line of station dots, and each ancestor gets a ▾ listing its children. On mobile the middle stations collapse to '…'. The 4px heat bar (see heat tokens) is the sheet's bottom border.

04.3.3Today

Screenshot of upton.test today (four templates at 1440 (Box Furnaces, About, Contact, 404)). The page header is the same gray band, 2px red rule and 44px H1 every time, with breadcrumbs that only go up.
Fig. 04.3The page header is the same gray band, 2px red rule and 44px H1 every time, with breadcrumbs that only go up.four templates at 1440 (Box Furnaces, About, Contact, 404)

04.3.4Specification

Why Upton

Engineers live in title blocks and drawing sets. Sibling pagination is genuinely useful for comparing variants, and it's literally KDL's grid, so the family resemblance gets stronger.

Build noteseffort M

page-header.php gets a 'titleblock' arg: siblings via get_pages(parent, sort menu_order,post_title), prev/next links with aria-labels, and DWG from the URL path (never formatted like a real drawing number). No REV date: 28 of 32 pages were last modified in 2018. Grid as a ::before with two gradient pairs and a mask-image fade. The title block is a <dl> with hairline cells, flattened to one line below 1000px. Crumbs: disclosure buttons (not role=menu), printed hidden and revealed by JS, with children cached via upton_catalog_cache_key('crumb_children',$id); container-query collapse. The 404 gets 'SHEET NOT FOUND'. Keep the title block in print. Coordinate: page-header files are being edited in parallel.

Risks

Keep the grid at 8% or less. Sibling order depends on menu_order. Term breadcrumbs remain an owner decision.

What Upton must supply

none

What we checkedskeptic: revise

REV was dropped (it would show 2018 dates). Sibling position replaces meaningless depth numbering. Route-sheet crumbs are merged in.

Code, data and files

  • page-header.css:9-20
  • KDL_v1.md §2.8 grid
  • inc/breadcrumbs.php:131-148

Checked on the live site

  • The page header is identical on 8 templates
  • Plus 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • chrome-route-sheet-crumbs Route-sheet breadcrumbs with sideways jumps (Navigation lens)

Model
art-two-voice-type
Tier
Feature
Effort
SML (effort M)
Lens
Art direction
Sheet
04.4

Sans for claims, mono for anything you could measure, and numbered clauses

Set standards, model codes and units in Lilex automatically, and number data-sheet sections so engineers can link to them.

Area Typography on data sheets + section navigation

  • /products/batch-furnaces/box-furnaces/
  • /products/salt-bath-furnaces/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
  • /products/parts-washers/
Verdict: reviseMerges 2 ideas
  • Wow 3/5
  • Impact 3/5
  • Brand fit 5/5

04.4.1Problem

Lilex, KDL's engineering voice, is 0 of 17 text elements in the Box data sheet and 2 of 228 on /applications/. NEC, NFPA, FM, IRI, SCR/PLC, '250 pounds' and '+/-5 degrees' all disappear into body sans, and there are no tabular numerals anywhere. Every H1 is 44px. Rail h2s have no ids, so nothing can be deep-linked. On phones, Box is 4,657px of prose with nothing to show where you are. 17 pages end with the same 'competitors would attempt' boilerplate, styled as a spec.

04.4.2Concept

A theme filter wraps standards, model codes and units in a mono 'spec' span, so every legacy data sheet scans like a spec table without rewriting a word. Rail headings get red Lilex clause numbers (§01 Electric Heating Systems) and real ids. A ¶ button copies a section link, and arriving on #section flashes its rule in copper. The shared closing boilerplate becomes an unnumbered, stamped sign-off. On phones, a sticky strip of section pills (§01 ELECTRIC … DOCS) marks the active section, with a 3px molten reading gauge along its bottom edge. Category H1s go to 72-96px in Plex Sans Condensed, echoing the condensed UPTON wordmark; leaf pages stay 44px.

04.4.3Today

Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · Electric and Gas sections). NEC, NFPA, FM, IRI and SCR/PLC all set in the same body sans as the prose around them.
Fig. 04.4NEC, NFPA, FM, IRI and SCR/PLC all set in the same body sans as the prose around them./products/batch-furnaces/box-furnaces/ · 1440 · Electric and Gas sections

04.4.4Specification

Why Upton

Engineers scan for numbers, standards and codes first, and they quote clauses and send section links to colleagues. The ids also feed the quote rail, the blueprint pins and print.

Build noteseffort M

inc/typography.php: the_content filter at priority 25 (after shortcodes at 11 and facades at 20) using wp_html_split, text nodes only, skipping a/code/headings; word-boundary regex for standards, (U-…), units including 'degrees' and +/-. Codes inside download links are handled in downloads_func. Heading ids: WP_HTML_Tag_Processor with sanitize_title, deduplicated using the TOC helper's logic, stored in a static for reuse. CSS counters with alt text content:counter() / '' so screen readers don't announce '01'. Sign-off detected by the boilerplate text or an explicit class. Pocket strip: site.js builds <nav aria-label='On this page'> under 1000px with IntersectionObserver aria-current; the gauge uses scroll(root) inside the guards. Condensed font subset about 10KB, preloaded only on category pages.

Risks

Regex false positives: use word boundaries, a skip-list and tests. Freeze slugs once shipped. Two sticky bars plus a dock eat space, so hide on scroll-down.

What Upton must supply

none (optional: short labels for the mobile section pills)

What we checkedskeptic: revise

Filter priorities were verified. Numbered sections and the mobile pocket data sheet are merged here because they share the heading-id plumbing.

Code, data and files

  • inc/table-of-contents.php:9-11
  • DB: 17 pages contain 'competitors would attempt'

Checked on the live site

  • Data-sheet rail h2s have no ids
  • Plus 3 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from2 ideas
  • detail-numbered-sections Clause numbers, deep links, and a sign-off stamp (Product detail lens)
  • mobile-pocket-datasheet Pocket Data Sheet: numbered section strip, molten read gauge, jump-to-the-goods row (Mobile lens)

Model
catalog-sharpen-then-grade
Tier
Quick win
Effort
SML (effort S)
Lens
Catalog
Sheet
04.5

Sharpen, then grade: one archive, one look

Give every card a proper 808×606 size, then grade the whole archive onto one palette so the decades stop clashing.

Area Card photography across catalogs, archives, mega menu

  • /products/
  • /products/salt-bath-furnaces/
  • /application/annealing/
Verdict: reviseMerges 2 ideas
  • Wow 3/5
  • Impact 4/5
  • Brand fit 4/5

04.5.1Problem

The only card size is a 350×280 (5:4) crop. For 4:3 and portrait uploads WordPress prints no srcset, so 15 cards with 410-1920px sources are served blurry at 403px. On /application/annealing/ the photos (a gray studio sweep, a saturated blue pit, a sepia bell, a lime box, a green belt) read as a random clip-art shelf.

04.5.2Concept

Step 0 costs nothing: a proper 808×606 4:3 card size, so every card is as sharp as its source allows. Step 1 grades every photo onto one palette (about 25% saturation, a warm-shadow tone curve, white sweeps multiplied onto gray-100, fine grain, crop marks) with a Lilex 'FIG. 04' caption that renumbers as the filter hides cards. Hover or focus 'develops' the photo back to true color, and a single toolbar 'True color' switch restores everything.

04.5.3Today

Screenshot of upton.test today (/application/annealing/ · 1440 · card grid). Six photos from different decades with clashing color casts (gray studio, saturated blue, sepia, lime, green), several soft from small sources.
Fig. 04.5aSix photos from different decades with clashing color casts (gray studio, saturated blue, sepia, lime, green), several soft from small sources./application/annealing/ · 1440 · card grid

04.5.4Proposed (sketch)

Sketch in three rows: six Upton catalog photos as they ship today, the same photos graded with one treatment and FIG. captions, and a red-to-orange duotone version.
Fig. 04.5bSix catalog photos as shipped (top), the same six with one archive treatment, crop marks and FIG. captions (middle), and a furnace-room duotone for dark sections (bottom).Critic's sketch, not upton.test

04.5.5Specification

Why Upton

Upton can't reshoot decades of photos overnight, but it can make them read as one deliberate archive, the way an engineering catalog treats its figures.

Build noteseffort S

add_image_size('upton-card',808,606,true); products-grid.php:108 uses it, then wp media regenerate --image_size=upton-card (Kyle's call; also on WP Engine). New photo-grade.css: .upton-photo img {mix-blend-mode:multiply; filter:saturate(var(--grade-sat,.25)) sepia(.08) contrast(1.06)}, with the :has(:hover,:focus-visible) state set to none. FIG uses CSS counters that skip .is-hidden. Opt out with .upton-photo--raw. Reset under forced-colors and prefers-contrast. Drop the scale(1.03). True color is one aria-pressed button in catalog-toolbar.php, persisted in localStorage.

Risks

Grading hides meaningful paint colors at rest, hence develop-on-hover and the switch. Too strong a grade reads as 'old'.

What Upton must supply

none (Kyle runs the regeneration)

What we checkedskeptic: revise

Verified the missing srcset. The prototype's saturate(.5) was too weak, so the default is .25. The foundry grade and archive grade ideas are merged; in the drawn catalog, the grade applies to the wipe-in and fallback photos.

Code, data and files

  • curl /products/ (no srcset on parts washers)
  • WP-CLI attachment metadata 129-163
  • functions.php:24
  • products-grid.php:105-108

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from2 ideas
  • catalog-foundry-grade Sharpen, then grade: foundry duotone plus a heat-up hover (Catalog lens)
  • art-archive-photo-grade One archive, one grade (Art direction lens)

Model
detail-rescue-crushed-photos
Tier
Quick win
Effort
SML (effort M)
Lens
Product detail
Sheet
04.6

Un-crush the iron

Lift product photos out of their headings and show them as real, captioned figures that open full size.

Area Product photos + Three Columns layout

  • /products/salt-bath-furnaces/internally-heated/
  • /products/salt-bath-furnaces/mar-ausquenching/
  • /products/batch-furnaces/box-furnaces/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
Verdict: revise
  • Wow 2/5
  • Impact 4/5
  • Brand fit 5/5

04.6.1Problem

On Internally Heated and Mar-Ausquenching the photo is coded inside the <h2>, so the rail renders it at 108×81 and breaks the heading one word per line. Elsewhere photos load at 300px because the sizes attribute never asks for the 1024/1920 files that already exist. Graphite uses a 350px duplicate of a 1920px image. The 8 Three Columns pages never get the rail layout, and on phones the graphite furnace first appears at y=3,082.

04.6.2Concept

A content filter lifts images out of headings. The first product photo becomes a real figure (up to ~26rem, captioned 'FIG. 1 · BOX FURNACE' in Lilex) that opens the full-resolution original in a <dialog> lightbox. The Three Columns pages are unwrapped on the fly into the shared data-sheet grid, with the photo near the top and Downloads and Videos as rail sections, so all product pages share one layout.

04.6.3Today

Screenshot of upton.test today (/products/salt-bath-furnaces/internally-heated/ · 1440 · top of page). The photo is coded inside the heading, so it renders at 108×81 and the heading breaks one word per line.
Fig. 04.6The photo is coded inside the heading, so it renders at 108×81 and the heading breaks one word per line./products/salt-bath-furnaces/internally-heated/ · 1440 · top of page

04.6.4Specification

Why Upton

Showing heavy equipment as a 108px chip next to a broken heading makes a precision manufacturer look careless. Unifying the layout also gives those 8 pages the quote rail and clause numbers.

Build noteseffort M

the_content priority 9: a preg_replace that moves an <img> at the start of an <h2> to after it. wp_content_img_tag: sizes '(min-width:1000px) 26rem, 100vw' for the first aligned image, capped at the attachment width (never upscale); swap attachment 75 for 139. Unwrap: in threecolumns.php (or a priority-9 filter), regex the exact [two_third]…[one_third_last] pair, move the first image after the first </h2>, and append the sidebar content; then retire style.css:1667-1690. Lightbox: ~40 lines in site.js, with a button wrapper and explicit focus return.

Risks

The regexes must be narrow and skip anything unexpected. Test the unwrap on all 8 pages (the hoist sidebar holds 2 photos and 7 videos).

What Upton must supply

none (optional: higher-res photos for internally heated, mar-aus, car bottom, pit)

What we checkedskeptic: revise

The graphite 1920px copy exists, so the real culprit is the sizes attribute. A server-side unwrap replaces display:contents to avoid a focus-order mismatch.

Code, data and files

  • DB pages 85/87 open with '<h2><img'
  • page 91 [one_third_last]

Checked on the live site

  • 4 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).

Model
wild-xray-cutaway
Tier
Wildcard
Effort
SML (effort L)
Lens
Wildcards
Sheet
04.7

X-ray the furnace: an explorable submerged-electrode cutaway

An explorable cutaway of the submerged-electrode furnace: peel the wall, start convection, wear the graphite down and replace it.

Area Graphite electrode + ceramic product pages

  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/salt-bath-furnaces/ceramic/
Verdict: reviseLive demo
  • Wow 5/5
  • Impact 4/5
  • Brand fit 5/5

04.7.1Live demo

Live demo wild-xray-cutaway
Preview on

FIG. 1 Section throughElevation of thea ceramic-type furnace, U-E

Schematic section through an Upton submerged-electrode salt bath furnace A steel shell and three refractory layers surround the salt bath. The electrodes enter through the side wall below the salt line, so only their faces touch the salt. Schematic, not to scale. HARDBRICK LINER INTERMEDIATE CASTABLE OUTER REFRACTORY* STEEL SHELL SALT LEVEL RISES FALLS RISES RISES FALLS WORK SPACE AIR/SALT INTERFACE Immersed electrode FOR COMPARISON ALLOY ELECTRODES TRANSFORMER PUSHER ASSEMBLY BRUSH CONNECTOR TO TRANSFORMER CONSUMED HOT FACE COLD SHELL SECTION A-AELEVATION

Schematic, not to scaleDetail A: wall, enlargedDetail B: electrode, enlarged

Upton's 1937 idea, cut openSame principle, alloy electrodes

The electrodes come in through the wall
The electrodes stay out of the work

They enter below the salt line, so only their faces touch the bath. Upton was founded on this submerged-electrode design in 1937, and it is now the industry standard for electric salt bath furnaces.

Upton's drawing for this model (U-ABCD) calls it a submerged alloy electrode furnace: same idea, electrodes through the side wall. The two graphite-only callouts drop out on this page.

Alloy grade: verify with Upton

Callouts

1Callout 1 of 5

Triple refractory wall

“…the temperature gradient through the wall will cause any salt penetration through the hardbrick liner to solidify within the intermediate castable refractory materials.”

“…the temperature gradient through the wall will cause any salt penetration through the hardbrick bath liner to solidify within the intermediate castable refractory materials.”

From § 0403, Engineered Triple Ceramic Refractory Wall Construction
Initial salt absorption into the walls, as a share of bath volume (figures from the page)
Upton triple wall5–8%
Some dual-wall designs140–150%

Salt creeping inWhere it solidifies

*Outer layer name and proportions: Verify with Upton engineering

2Callout 2 of 5

Convection loop

“Heated salts rise in the bath while cooler salts fall to the electrode area for reheating.”

From § 0302, Convection Circulation Currents

The page credits natural convection with moving the salt and evening out bath temperatures. Heat enters at the electrode faces, so that is where the loop starts.

Heated saltCooler salt

The loop is drawn schematically. Verify flow pattern with Upton

3Callout 3 of 5

One face in the salt

“Only the active face comes in contact with the bath. This single exposed electrode surface minimizes bath size and increases electrode life over immersed electrode designs, and eliminates air/salt interface attack.”

“Only the active face comes in contact with the bath. This single exposed electrode surface minimizes bath size and increases electrode life over immersed electrode designs, while eliminating air/salt interface corrosion attack.”

From § 0201, Maximum Work Space with Minimum Bath Area

An immersed electrode hangs through the salt surface and takes a slice of the work space.

4Callout 4 of 5

Renewable electrode

“Replacement graphite electrode extensions are simply added by means of a connecting pin threaded into the rear of the electrode in service.”

From § 05, No Downtime with Renewable Graphite Electrodes

Drag to burn the face down. The pusher keeps the face flush with the liner.

Sample The extension goes on at 30% left in this demo.

5Callout 5 of 5

Pusher

“Upton submerged graphite electrode furnaces include pusher mechanism which allow for electrode advancement through the wall of the furnace. This allows for periodic feed of the electrode into the bath as it becomes consumed during operation.”

From § 06, Graphite Electrode Advancement Mechanism

Each feed: the face burns back, then the pusher moves it up to the liner again.

Sample Feed amounts are illustrative.

04.7.2Problem

The site's best engineering story is eight text sections beside a 350px photo: convection ('heated salts rise… cooler salts fall to the electrode area'), the triple refractory wall (salt freezing in the castable, 5-8% absorption vs 140-150%), threaded renewable electrodes, and the pusher. Nothing lets a buyer see inside the 1937 design.

04.7.3Concept

A patent-drawing cutaway at the top of the page: steel shell, three refractory layers, the bath, and an electrode entering through the side wall. Five brass pins: ① peels the wall layers apart and shows salt creeping in and freezing; ② starts the convection loop; ③ lights the single exposed electrode face; ④ is a wear slider that burns the graphite down and screws on a new threaded extension; ⑤ runs the pusher. Each caption quotes the page's own sentence and jumps to that section. A toggle flips Blueprint (white on Kolene blue-800) vs Running (glowing bath).

04.7.4Specification

Why Upton

It makes Upton's founding innovation visible and shows why it saves electrodes and refractory: the kind of thing an engineer screenshots for the boss.

Today on upton.test1 screenshot
Screenshot of upton.test today (/products/salt-bath-furnaces/graphite-electrode/ · 1440 · top of page). The 1937 submerged-electrode story (convection currents, the triple refractory wall) told as text sections beside one small photo.
Fig. 04.7The 1937 submerged-electrode story (convection currents, the triple refractory wall) told as text sections beside one small photo./products/salt-bath-furnaces/graphite-electrode/ · 1440 · top of page
Build noteseffort L

Render from threecolumns.php between the header and .entry-content (these pages don't get the rail grid). A hand-built inline SVG (20-30KB) in template-parts/cutaway-electrode.php, with real <button> hotspots (aria-expanded/controls) and <input type=range> for wear. Anchor-positioned captions with a fixed-panel fallback. Add a scoped the_content filter for h2 ids. Motion (offset-path particles, clip-path peel, dashoffset creep) inside the no-preference guard; with reduced motion, a static numbered legend. Always show 'Schematic — not to scale'. The ceramic page omits the graphite-only steps.

Risks

It must be credible to engineers, so Upton reviews proportions and layer names. Keep it schematic with no dimensions. Most of the effort is illustration. Electrode material on ceramic is unconfirmed.

What Upton must supply

Upton to supply or approve a reference drawing (the U-E GA drawing is a start), confirm refractory layer names, and confirm ceramic electrode material.

What we checkedskeptic: revise

Placement was corrected for the threecolumns template, and the missing heading ids were added. The copy quotes were verified.

Code, data and files

  • both pages use threecolumns.php
  • h2s have no ids
  • /about/ 1937 origin line

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).

Sheet 05 / 11

Theme 3 of 6 · 5 ideas · 2 live demos

The whole line, and the people behind it

Nameplates, model codes, the U-AUTO line and 1937: proof engineers can read.

Drawing register
ModelIdeaEffort
catalog-auto-line-liveThe whole line, not just the furnace (live demo)L
detail-nameplate-headerEvery machine gets its nameplate, and the card morphs into it (live demo)M
hero-nameplate-proofProof strip and footer become Upton nameplatesM
hero-since-1937Stop undersellingS
convert-heritage-pourThe PourL
Model
catalog-auto-line-live
Tier
Headline
Effort
SML (effort L)
Lens
Catalog
Sheet
05.1

The whole line, not just the furnace: U-AUTO as a live system map

Show Upton's U-AUTO line as a live map on the automated page: stations light up and a hoist runs the route.

Area Automated Salt Bath Systems page (reusable on the homepage and in the mega panel)

  • /products/salt-bath-furnaces/automated/
  • /
Verdict: reviseMerges 4 ideasLive demo
  • Wow 5/5
  • Impact 4/5
  • Brand fit 5/5

05.1.1Live demo

Live demo catalog-auto-line-live

ProductsSalt bath furnacesAutomated

Automated Salt Bath Systems

The whole line, not just the furnace. Example line from Upton drawing U-AUTO.

Sample cycleVerify with Upton engineering

Glow = relative heat, not a temperature

PLC mimicReady

Step -- / 07

Run the example cycle, or pick a station.

Load hot, in the ceramic bath

Elevation of an example Upton automated salt bath line, from Upton drawing U-AUTO: an overhead hoist rail on a steel truss above seven stations, listed below.

Station 03 / 07U-ABCD

Ceramic salt bath furnace

Ceramic salt bath furnaces with submerged electrodes and triple refractory walls for neutral hardening, austempering, marquenching, tempering and brazing.

Open data sheet: Ceramic Type Salt Bath Furnace (U-ABCD), general-arrangement drawing Product page: /products/salt-bath-furnaces/ceramic/

05.1.2Problem

Upton's most integrated offer is shown as four disconnected cards: one of them a 241×189 HMI screenshot stretched to 403px, plus an orphan grid cell and three uncaptioned videos. Its body content is just [products] + [videos]. The drawing that explains it, U-AUTO, a full-line elevation labeled CLAM SLUDGER · GAS FIRED PRE-HEAT U-BE · CERAMIC U-ABCD · ROTARY SWING ARM · MAR-AUSQUENCH U-QS · WASH/RINSE · LOAD/UNLOAD CAROUSEL U-CAROUSEL with a MightyMatic hoist overhead, is linked only from the PLC page (61).

05.1.3Concept

A full-width line diagram opens the page, redrawn from Upton's U-AUTO elevation in KDL linework with Lilex station labels exactly as Upton drew them, captioned 'Example Upton line (drawing U-AUTO)'. The salt baths glow from the heat ramp: ceramic hottest, the mar-ausquench a dim ember, the wash tank steel-blue. A yellow hoist trolley rides the rail. Hover or Tab to a station and it lights copper, the trolley glides over and lowers its workbar, and an anchored nameplate card offers 'Open data sheet →'. A 'Run cycle' button (with Pause) sends the hoist through every station, like a live version of the old PLC mimic. The four cards become the legend below, and the videos get visible reel captions. The same SVG can later power a homepage band ('The whole line, not just the furnace') and the cutaway mega panel.

05.1.4Specification

Why Upton

Buyers of automated lines are buying integration. One picture proves Upton builds the furnaces, hoist, swing arm, carousel, desludger and controls, and puts them together. It also turns the flagship page into a hub for eight product pages.

Today on upton.test1 screenshot
Screenshot of upton.test today (/products/salt-bath-furnaces/automated/ · 1440 · top of page). Four disconnected cards (PLC Control Systems is a 241×189 HMI screenshot stretched to 403px), Load & Unload Carousel orphaned on its own row, and three untitled video tiles.
Fig. 05.1Four disconnected cards (PLC Control Systems is a 241×189 HMI screenshot stretched to 403px), Load & Unload Carousel orphaned on its own row, and three untitled video tiles./products/salt-bath-furnaces/automated/ · 1440 · top of page
Build noteseffort L

Hand-simplify pdftocairo output into about 8 station groups plus a hoist group (target <60KB inline, aria-hidden). The interactive layer is an HTML <ol class='line-map__stations'> of real links positioned in percentages over the SVG, which is also the no-JS and screen-reader version. Anchor-positioned cards with an @supports fallback to a legend panel. Render via template-parts/line-map.php from page.php when is_page('automated') or when _upton_line_map meta is set. Station data is a PHP array filterable through 'upton_line_stations'. line-map.js (~4KB) moves the hoist with WAAPI; the global reduce rule doesn't touch WAAPI, so check matchMedia and jump instead of glide. Pause is an aria-pressed button (WCAG 2.2.2); IntersectionObserver pauses it offscreen. Bath shimmer is a background-position gradient (not feTurbulence). Mobile: scroll-snap strip per station. Build after the blueprint SVG pipeline.

Risks

The drawing order may not be the process order, so keep the 'Example' label. Don't publish HMI setpoints; they're illegible (quench reads 415 or 425). Mapping Wash/Rinse to Parts Washers needs confirmation. Tracing the SVG is the bulk of the effort. Ship only one cycle narrative on the homepage.

What Upton must supply

Upton to approve showing U-AUTO as an example line, confirm the station-to-page mapping (especially Wash/Rinse → Parts Washers and Clam Sludger → Clam Shell Desludging), and supply one sentence per station.

What we checkedskeptic: revise

Rebuilt on the vector U-AUTO drawing rather than the illegible 241px HMI. The station labels were read at 200dpi. The HMI-based homepage mimic, the scroll-driven 'ride the load' and the cutaway mega panel are folded in as later reuses of the same SVG.

Code, data and files

  • uploads/2018/06/upton-automated-salt-bath-furnace.pdf
  • plc-control-system-2.jpg (241×189)

Checked on the live site

  • 3 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from4 ideas
  • hero-line-mimic The whole line, not just the furnace: a live redraw of Upton's own HMI (Homepage lens)
  • detail-line-map Run the line: the U-AUTO drawing as a live system map (Product detail lens)
  • wild-ride-the-load Ride the Load: Upton's own PLC screen as a scroll story (Wildcards lens)
  • chrome-cutaway-mega Cutaway mega panel: hover a component, watch it light up on the line (wildcard) (Navigation lens)

Model
detail-nameplate-header
Tier
Feature
Effort
SML (effort M)
Lens
Product detail
Sheet
05.2

Every machine gets its nameplate, and the card morphs into it

Each product page opens on a stamped data plate with its model codes, and the catalog card morphs into it.

Area Product page header + catalog→data-sheet navigation

  • /products/batch-furnaces/box-furnaces/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
  • /products/parts-washers/
  • /products/salt-bath-furnaces/
Verdict: reviseMerges 4 ideasLive demo
  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

05.2.1Live demo

Live demo detail-nameplate-header
Header
Width
Morph
Mock address: upton.test/products/batch-furnaces/box-furnaces/

Box Furnaces

We manufacture batch type furnaces in either electric or gas fired heating systems. The design of the heating systems provide for shielding of the loads from the detrimental effects of direct radiant heat or flame impingement while promoting efficient uniform heating of the loads.

Model
U-BE · U-BCE
Type
Batch — box
Heating
Electric or gas
Mfd.
Upton Industries, Inc. Roseville, Mich. · Est. 1937
586-771-1200
Upton box furnace with yellow guard panels on a gray frame, on the shop floorOriginal photo · 350 × 280 px

Electrically Heated or Gas Fired

Upton manufactures batch type furnaces in either electric or gas fired heating systems. The design of the heating systems provide for shielding of the loads from the detrimental effects of direct radiant heat or flame impingement while promoting efficient uniform heating of the loads.

Page/box-furnaces/
ArrivalMorph
Logo100%
Codes searchableYes

Box Furnaces, nameplate header. Press Back, then open any card: the photo flies up, the title grows into the H1, the tag opens into the plate and its values are marked in hot. Try 5× slow.

05.2.2Problem

Leaf product pages open with the same gray band as the Privacy Policy, and the header description repeats the first paragraph. Every leaf page already has a featured image (box 1920×1536, graphite 1920×1440), yet the header never shows it. Model codes live only in PDF link text. Clicking a catalog card is an instant cut with nothing carried over, and the logo ghosts between its condensed and full sizes.

05.2.3Concept

On leaf product pages the header becomes a stamped data plate: brushed gray-100/200, four rivets, a red hairline border, and engraved Lilex fields (MODEL U-BE · U-BCE / TYPE Batch — box / HEATING Electric or gas / MFD. Upton Industries, Inc. · Roseville, Mich. · Est. 1937) replacing the duplicated excerpt. The featured image fills the right half at 4:3; small originals (350px car bottom, pit, bell) sit as a framed inset print. The hoist page reads MIGHTYMATIC · MASTERMATIC. Model codes also show as a riveted tag on catalog cards and become searchable ('U-CBE'). Arriving from the catalog, a cross-document View Transition morphs the card photo and title into the header photo and H1, while the logo scales smoothly, like pulling the spec sheet out of a binder.

05.2.4Specification

Why Upton

The nameplate is the most recognizable object in industrial equipment. Model codes make an RFQ precise ('quote me a U-CBE'), and every value shown already exists on the site.

Today on upton.test1 screenshot
Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · page header). The same gray band as the Privacy Policy, a description that repeats the first paragraph, and no image or model code.
Fig. 05.2The same gray band as the Privacy Policy, a description that repeats the first paragraph, and no image or model code./products/batch-furnaces/box-furnaces/ · 1440 · page header
Build noteseffort M

page-header.php gets optional 'plate' (a <dl>) and 'image_id' args, passed from page.php and threecolumns.php for Products descendants. Use wp_get_attachment_image('large', fetchpriority high); if metadata width <800, add .page-header__photo--inset. Codes: _upton_model_codes meta (meta box like inc/seo-admin.php:169), with a fallback that parses '(U-[A-Za-z]+)' from [downloads] text; omit any row without a value. MFD comes from upton_get_company_info(). Suppress the description when a plate renders (upton_page_header_description filter). View transitions: @view-transition{navigation:auto} inside the no-preference guard; name the logo; pageswap/pagereveal inline script (wp_head priority 1) names the clicked card img/title and the header photo/H1, matching by base filename, not attachment ID (graphite uses 139 vs 75), and clears names on finished (stale names abort later transitions). Append codes to data-catalog-text. page-header.php and page-header.css are being edited in parallel.

Risks

Keep it flat, with hairlines and brushing only; skeuomorphism tips into kitsch fast. Some pages have no code and fall back to TYPE/HEATING. Cross-document View Transitions need Chromium 126+ or Safari 18.2+; other browsers just navigate normally. U-Swingarm and U-Carousel read as document names, so consider hiding them.

What Upton must supply

Upton to confirm model codes per product and resolve the conflicts (U-DS twice; U-LBE vs U-LE), confirm the 'Est. 1937' wording (and whether it may sit on the Roseville line: the founding location isn't confirmed), and optionally supply higher-res photos for car bottom, pit and bell. A photo of a real Upton nameplate, so the design matches it.

What we checkedskeptic: revise

Featured images already exist, so nothing needs setting. The morph was prototyped on real markup and exposed the logo-ghosting and stale-name fixes. Data-plate variants from four lenses are merged here; the sticky gutter plate now lives in the quote rail.

Code, data and files

  • template-parts/page-header.php:40-56 (no image slot)
  • _thumbnail_id set on all 20 leaf pages
  • model codes on 13 pages (read-only DB)

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from4 ideas
  • art-upton-data-plate The nameplate: a riveted data plate on every product (Art direction lens)
  • wild-data-plates Stamped Data Plates, with a card-to-plate 'furnace door' transition (Wildcards lens)
  • catalog-model-data-plates Stamp the model number: data plates, real differences and a one-tap GA drawing (Catalog lens)
  • motion-catalog-to-datasheet-morph Catalog → data sheet: the card becomes the page (Motion lens)

Model
hero-nameplate-proof
Tier
Feature
Effort
SML (effort M)
Lens
Homepage
Sheet
05.3

Proof strip and footer become Upton nameplates

The proof strip and footer become riveted Upton nameplates, with Upton's facts (once confirmed) stamped in Lilex.

Area Homepage proof strip + site footer

  • /
Reverses owner decisionVerdict: reviseMerges 3 ideas

Owner decisionThis explicitly reverses two owner decisions: the L-shaped proof borders and 'leave the footer alone'. Nothing here ships without the owner's sign-off.

  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

05.3.1Problem

The proof strip spends three giant numbers on one fact: 1937 and 80+ say the same thing, and the third 'stat' is the word CUSTOM. On a phone it takes 423px. Meanwhile About has concrete proof: the submerged-electrode design that became the industry standard, about 45,000 sq ft on 7 acres, equipment preassembled and fully tested before shipment, and installation/commissioning support. The footer uses legacy #ebebeb, a logo about 400px wide on phones, 'years' alone on a line, and a solid red bar instead of KDL §2.11.

05.3.2Concept

The proof strip becomes one wide riveted equipment nameplate: brushed steel, a red header band stamped 'UPTON INDUSTRIES, INC. · ROSEVILLE, MICHIGAN', and engraved Lilex rows (EST. 1937 · ORIGIN: SUBMERGED-ELECTRODE SALT BATH · FACILITY ≈45,000 FT² ON 7 ACRES · QA: PRE-ASSEMBLED + FULLY TESTED · FIELD: INSTALLATION + COMMISSIONING). Rows stamp in one at a time as it scrolls into view, and the years value rolls like a mechanical hour-meter to a computed 89. The footer gets the matching small plate on KDL's gray-50 plus a 3px copper rule (MANUFACTURER · EST. 1937 · IN SERVICE 89 YRS · PLANT address · SERVICE phone · SALT SUPPLY KOLENE ↗), with tidy Equipment / Processes / Company columns. This explicitly reverses two owner decisions: the L-shaped proof borders and 'leave the footer alone'.

05.3.3Today

Screenshot of upton.test today (/ · 1440 · proof strip under the hero). Three giant "stats" (1937, 80+, CUSTOM), two of which say the same thing.
Fig. 05.3Three giant "stats" (1937, 80+, CUSTOM), two of which say the same thing./ · 1440 · proof strip under the hero

05.3.4Specification

Why Upton

Every buyer has read these plates on real equipment. It turns filler into differentiating, sourced proof and makes the homepage and footer speak the same engineering-document language as the new data sheets.

Build noteseffort M

proof-strip.php renders <dl class='nameplate'> from label/value defaults; keep the Customizer loop extended to 5-6 rows and remove the duplicate defaults in functions.php:188-191. Steel is a linear-gradient plus repeating brush, rivets are radial-gradient layers, engraving is gray-700 with a white text-shadow (8.5:1), and the header band is accent-500 with white Lilex (5.4:1). The stamp-in uses animation-timeline:view() inside @supports AND no-preference. The odometer is an aria-hidden digit-wheel duplicate beside the real text value, tabular-nums, IntersectionObserver-triggered once and delayed about 600ms when already visible at load. Footer: replace .footer-about with <dl class='data-plate'>, remove the footer logo, repoint the --footer-* aliases to KDL tokens, and add border-top 3px copper. Process links use /applications/#filter=… deep links. Keep one fact per surface: identity and facility here, scope elsewhere.

Risks

Kitsch risk: one gradient, hairline bevels, KDL type only. Reverses two owner decisions. All facts must be current. Confirm info@kolene.com is the intended public inbox.

What Upton must supply

Upton to confirm the About facts are current (≈45,000 sq ft, 7 acres, preassembled and tested, installation support) and that info@kolene.com is the right inbox. Owner approval to reverse the L-border and footer decisions. A photo of a real Upton nameplate, so the design matches it.

What we checkedskeptic: revise

The About facts were quoted from the DB. Tested that scroll-driven stamps ignore the global reduce rule, so they're gated. The spec-ledger idea's sourced-figure principle is folded in. The footer DOC/REV line was cut because modified dates are misleading.

Code, data and files

  • proof-strip.php:10-14
  • functions.php:188-191
  • applications-grid.css:281-282 (L borders)
  • About page post 12
  • footer.php:34-46,84-100
  • style.css:331-337,1368
  • KDL_v1.md §2.11
Merged from3 ideas
  • motion-proof-strip-odometer Mechanical odometer proof strip (Motion lens)
  • chrome-footer-data-plate The footer as a riveted equipment nameplate (Navigation lens)
  • convert-proof-ledger The Spec Ledger: specifics instead of adjectives (Conversion lens)

Model
hero-since-1937
Tier
Quick win
Effort
SML (effort S)
Lens
Homepage
Sheet
05.4

Stop underselling: 'since 1937', and a computed 89 (then 90)

Say 'since 1937' in prose and compute the years everywhere else, so the site says 89 now and 90 in 2027.

Area Hero, proof strip, footer tagline

  • /
Verdict: reviseMerges 1 idea
  • Wow 3/5
  • Impact 3/5
  • Brand fit 5/5

05.4.1Problem

'Over 80 years' is hard-coded in four places and appears in three visible spots: the hero default (hero.php:58 and functions.php:138), the proof strip '80+' (proof-strip.php:12 and functions.php:190), and the blogdescription tagline in the footer. Upton is 89, 2027 is the 90th anniversary, and the copy will keep drifting.

05.4.2Concept

Prose that can go stale switches to 'since 1937', which never ages and echoes Kolene's 'since 1939'. Anywhere a number is shown, it's computed from the single founding year (89 today, 90 on 1 January 2027). A small circular seal built from the logo's atom orbits ('EST. 1937 · ROSEVILLE, MICH.') sits by the hero eyebrow, and during 2027 it becomes a copper '90 YEARS · 1937-2027' variant.

05.4.3Today

Screenshot of upton.test today (/ · 1440 · hero headline and proof strip). "for over 80 years" and "80+" for a company founded in 1937, which is 89 years in 2026.
Fig. 05.4"for over 80 years" and "80+" for a company founded in 1937, which is 89 years in 2026./ · 1440 · hero headline and proof strip

05.4.4Specification

Why Upton

Ninety years of building salt bath furnaces is a rare claim, and next year hands Upton a milestone it's currently rounding down.

Build noteseffort S

upton_years_in_business() = (int) wp_date('Y') - (int) upton_get_company_info()['founding_date']. hero.php reads upton_hero_defaults() instead of its own literal; support a {years} token in the Customizer strings. Tagline: the owner edits Settings → General, or upton_get_tagline() applies a filter. Seal: an inline aria-hidden SVG with <textPath>, electrons on a 60s rotation inside the no-preference guard, and visually hidden 'Established 1937'. The 2027 variant is selected in PHP.

Risks

Anniversary wording needs owner sign-off. Keep the orbit slow and small.

What Upton must supply

Upton to confirm 1937, decide whether to mark the 90th, and approve the new tagline wording (a Settings edit). Confirm the seal may pair 'Est. 1937' with Roseville (the founding location isn't confirmed).

What we checkedskeptic: revise

Found every '80' occurrence, including the tagline stored as an option. The years helper reuses the existing founding_date as the single source.

Code, data and files

  • hero.php:58
  • functions.php:138,190,517
  • proof-strip.php:12
  • footer.php:40
  • inc/seo.php:74 (founding_date 1937)
  • wp option blogdescription
Merged from1 idea
  • hero-ninety-years Stop underselling: 'since 1937', and a 90th-anniversary seal for 2027 (Homepage lens)

Model
convert-heritage-pour
Tier
Feature
Effort
SML (effort L)
Lens
Conversion
Sheet
05.5

The Pour: 1937 to now, as molten metal

About opens on a huge 1937, then a molten line pours down a timeline of dates Upton supplies.

Area About page

  • /about/
Verdict: reviseMerges 1 idea
  • Wow 5/5
  • Impact 4/5
  • Brand fit 4/5

05.5.1Problem

/about/ is one h2, five paragraphs, a 190×135 aerial photo, no CTA and a typo ('a customers facility'). Its strongest line (1937, the submerged electrode design 'which has since become the industry standard') is buried in sentence one. Nothing explains 'A Kolene Company', although Kolene's own history lists Upton's 1937 row before its own 1939 founding.

05.5.2Concept

About opens with a huge Lilex '1937' and the page's own claim as the headline, plus a computed '89 years since 1937'. On the existing data-sheet grid, years sit in the left rail as big mono numerals, events sit in the 42rem column, and a molten line (red → copper → amber) pours down the gutter as you scroll, lighting each node. Nodes: 1937 submerged-electrode salt bath · 1939 Kolene founded · expansion into box, car bottom, liftoff and specialty furnaces · the year Upton joined Kolene · today (≈45,000 sq ft on 7 acres, preassembled and fully tested). Undated nodes render as dashed 'from the archive' placeholders. A 1937→2027 'Road to 90' ruler is ready for the 90th. It ends with the Furnace + Salt card and 'Put 89 years on your process →'.

05.5.3Today

Screenshot of upton.test today (/about/ · 1440 · full page). One heading, five paragraphs and a 190×135 aerial photo; the 1937 submerged-electrode origin is buried in sentence one and there is no call to action.
Fig. 05.5One heading, five paragraphs and a 190×135 aerial photo; the 1937 submerged-electrode origin is buried in sentence one and there is no call to action./about/ · 1440 · full page

05.5.4Specification

Why Upton

Heritage is Upton's strongest trust asset, and showing that Upton predates Kolene turns 'A Kolene Company' from fine print into a family story.

Build noteseffort L

An [upton_timeline][event year='1937']…[/event][/upton_timeline] shortcode outputs <ol class='heritage'> with <time> elements, set to grid-column rail-start/text-end on a 2-column subgrid. The line is a ::after with scaleY driven by animation-timeline:view() inside @supports AND no-preference; an IntersectionObserver fallback adds .is-lit; with neither, the line is fully filled. Years come from upton_years_in_business(). Add the CTA band for About in page.php. Replace or drop the 190px photo. Fix the 'customers' typo, which is also in the shared product boilerplate.

Risks

It's thin without real dates and photos, so ship confirmed nodes only. Pick one approved heritage wording ('industry standard' / 'pioneered' / 'helped establish'); the site currently uses three. Confirm the Kolene history is live on kolene.com.

What Upton must supply

Upton to supply founder and origin details (including where it was founded), expansion dates, the year Upton became a Kolene company, archive photos, a hi-res plant photo, and approved heritage wording. Kolene to approve referencing its 1939 founding.

What we checkedskeptic: revise

Removed any 'we invented' claim. Rebuilt on the data-sheet grid, which About already uses. The Road-to-90 ruler is folded in.

Checked on the live site

  • The About page's aerial photo renders at 190×135
  • The history rows on kolene.test, with Upton's 1937 row
  • Plus 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • wild-road-to-90 Road to 90: an hour-meter odometer and 2027 anniversary hook (Wildcards lens)

Sheet 06 / 11

Theme 4 of 6 · 7 ideas · 1 live demo

Speak in temperatures

Heat treaters think in °F first, so the applications section should too.

Start with the live demo

06.1The Thermal Ladder
Drawing register
ModelIdeaEffort
apps-thermal-ladderThe Thermal Ladder (live demo)L
apps-process-data-sheetProcess data sheets, not product dumpsM
apps-compatibility-matrixThe Process × Equipment matrixM
apps-what-are-you-doing-to-the-metalWhat are you doing to the metal?M
apps-rated-for-stamps'Rated for' process stamps on every data sheetS
chrome-search-that-knows-processesSearch that knows processes, never dead-ends, and opens with /M
wild-periodic-tableThe Periodic Table of Heat TreatmentM
Model
apps-thermal-ladder
Tier
Headline
Effort
SML (effort L)
Lens
Applications
Sheet
06.1

The Thermal Ladder: applications stacked by heat

Stack every process by temperature, hottest at the top, each bar painted in the color steel shows at that heat.

Area Applications directory (plus a homepage trailer)

  • /applications/
  • /
Verdict: reviseMerges 8 ideasLive demo
  • Wow 5/5
  • Impact 4/5
  • Brand fit 4/5

06.1.1Live demo

Live demo apps-thermal-ladder

HomeApplications

Every process, stacked by heat

Slide the thermometer to a temperature. Tap a process to light the Upton furnaces that run it.

Equipment
Units
View

Process · hottest firstPoint at a process to light its Upton furnaces, or drag the pyrometer.

1,450°F

No single band

Today’s alphabetical list, kept for experts at ?view=az. 36 processes; Ancillary parts moves to Products (Upton to confirm).

ReadoutSample

Annealing

1,300–1,650°F typical

6 of 13 Upton furnaces lit

Salt bath 8

Batch 2

Specialty 2

Pit 1

Lit plates use the 117 real process-to-furnace pairings on upton.test today.

Sample Typical ranges, illustrative. Verify with Upton engineering.

Model codes as printed on Upton GA drawings.

06.1.2Problem

/applications/ is 37 alphabetical headings under a wall of 38 chips: 5,659px at 1440 and 10,099px at 390, where the toolbar alone is 844px. Each chip filters to exactly its own heading, and no temperature appears anywhere, although temperature is the first thing a heat treater asks about. The homepage teaser is a tidy 4×4 link grid that files Drawing (a synonym of Tempering) under 'Specialty'.

06.1.3Concept

Every process becomes a rung on a chart, hottest at the top. Each rung's bar spans that process's typical band on a shared °F/°C axis painted in the colors steel actually shows: straw, bronze and temper blue at the cool end, no glow in the 700s, then dull red, cherry, orange and white heat. Each bar shows its own slice of one gradient, so Annealing glows cherry and HSS hardening almost white. Hover, focus or tap a rung and a board of 13 equipment nameplates lights the Upton families tagged for it. Synonyms share a rung ('Tempering · a.k.a. Drawing'). Controls: °F/°C, All / Salt bath / Batch·specialty·pit, and an 'A-Z' link for experts. On phones it becomes a vertical thermometer panel with a sticky readout. The homepage trailer is a pyrometer strip or setpoint dial: about 8 processes on a glowing bar, dragged or tabbed to reveal '8 Upton furnaces →'.

06.1.4Specification

Why Upton

Temperature is the engineer's first question, so a rung chart reads as a spec chart, not decoration. Heat is the product, and every lit nameplate comes from real taxonomy data.

Today on upton.test1 screenshot
Screenshot of upton.test today (/applications/ · 1440 · top 1200px). A wall of 38 equal chips, then alphabetical headings with product bullets, and no temperature anywhere.
Fig. 06.1A wall of 38 equal chips, then alphabetical headings with product bullets, and no temperature anywhere./applications/ · 1440 · top 1200px
Build noteseffort L

Build inside applications_func() (page 8 uses the default template), not applications-gallery.php. New template-parts/applications-ladder.php, registered in upton_catalog_template_signature() (inc/shortcodes.php:56) so the transient busts. Term meta product_app_temp_min_f/_max_f in inc/term-meta.php, seeded only after sign-off through a dry-run/apply/restore migration. Each rung is an <li> grid (14rem label + track); the bar uses left/width from --t0/--t1 and a sliced background-size/position of --upton-heat-bar (verified in the prototype). The board is <aside> nameplate links lit via [data-lit] from ~2KB JS on pointerenter/focusin/click. Announce through [data-catalog-status] on click and focus only. Hairlines on dark bars. No-JS: an <ol> with printed ranges plus a <details> product list. ?view=az keeps today's list. Phase 1 ships now with no temperature data: a chip rail plus a visible '1 of 37 · show ↓' pill, and the synonym cleanup in the homepage finder groups.

Risks

One wrong temperature costs credibility with exactly this audience, so the ranges need engineering sign-off and a 'typical' label. Some processes have no single band (preheating, laboratory operations, atmosphere processing) and go in an 'any temperature' gutter. It's blocked on data for most terms. Make it the only dark block on its page.

What Upton must supply

Upton engineering to approve a typical °F band per process. Seed values are generic metallurgy (e.g. tempering ~300-1300°F, austempering bath ~450-750°F, annealing ~1300-1650°F, HSS hardening ~2150-2350°F), all to verify with Upton engineering. Upton also to confirm the synonym merges and whether Ancillary Parts leaves the process list.

What we checkedskeptic: revise

A one-row-per-rung layout was chosen after the prototype showed about 9 overlapping bands between 650 and 1100°F. Bell and Belt sit under Specialty (page 37). Merged from seven heat-scale variants across lenses; the mobile thermometer and the homepage strip are the same data in other shapes.

Code, data and files

  • DB: 37 terms, 16 products, 120 pairings (117 process-to-furnace; the other 3 are Ancillary parts, which moves to Products)
  • applications-finder.php:35,43

Checked on the live site

  • Page height, toolbar position, and the first result at y 1,221
  • Plus 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from8 ideas
  • hero-process-thermometer Applications on a glowing thermometer (Homepage lens)
  • catalog-heat-scale The Heat Scale: a black-body process ruler across the whole line (Catalog lens)
  • art-glow-scale-applications The glow scale: applications sorted by heat (Art direction lens)
  • mobile-heat-scale-finder Heat Scale: turn the thermometer to find your process (Mobile lens)
  • motion-process-temperature-glow Every application shows its process temperature: a thermometer in each row (Motion lens)
  • apps-homepage-pyrometer-strip Homepage: the pyrometer strip (Applications lens)
  • wild-blackbody-hero Turn Up the Heat: a black-body setpoint hero (Wildcards lens)
  • detail-process-heat-ladder Process range chart: applications on a glowing temperature scale (Product detail lens)

Model
apps-process-data-sheet
Tier
Feature
Effort
SML (effort M)
Lens
Applications
Sheet
06.2

Process data sheets, not product dumps

Each process page shows the description it already has, a breadcrumb and related processes, then grows into a real data sheet.

Area Application taxonomy pages

  • /application/annealing/
  • /application/ausquenching/
  • /application/steam-homogenizing/
  • /application/nitinol-processing/
Reverses owner decisionVerdict: reviseMerges 1 idea

Owner decisionTurning on breadcrumbs reverses a decision left to the owner. Nothing here ships without the owner's sign-off.

  • Wow 3/5
  • Impact 4/5
  • Brand fit 5/5

06.2.1Problem

Every one of the 37 term pages is an eyebrow, an H1, 'PRODUCTS / Solutions for X' and a card grid. All descriptions and taglines are empty, and breadcrumbs are off. On Annealing, four of six cards share the same boilerplate excerpt, and single-product processes leave two-thirds of the row empty. Each term does have a ~150-character _upton_seo_description, used only in the meta tag.

06.2.2Concept

Phase 1 (an afternoon): show the one-sentence description that already exists as the header lede, add the breadcrumb Home › Applications › Ausquenching and a Lilex count eyebrow ('1 UPTON SYSTEM · SALT BATH'), rename the heading 'Equipment for ausquenching', show single products as one wide horizontal card, and add a 'Related processes' row. Phase 2: the page becomes a data sheet like the product pages. A nameplate (PROCESS / GOAL / TYPICAL WINDOW / UPTON ROUTES) sits above rail sections: 'What it does', 'Salt bath route' and 'Batch, specialty & pit route' as ruled equipment registers, 'Neighbors on the ladder', and a 'Quote an annealing system' button.

06.2.3Today

Screenshot of upton.test today (/application/annealing/ · 1440 · full page). An eyebrow, an H1, "Solutions for Annealing" and a card grid; no description, no breadcrumbs, repeated card excerpts.
Fig. 06.2An eyebrow, an H1, "Solutions for Annealing" and a card grid; no description, no breadcrumbs, repeated card excerpts./application/annealing/ · 1440 · full page

06.2.4Specification

Why Upton

It matches the new product data sheets and turns 37 thin archives into credible long-tail landing pages. Upton comes across as the process expert rather than a catalog.

Build noteseffort M

Phase 1: in taxonomy-product_app.php:17, fall back to get_term_meta(UPTON_SEO_DESC_KEY) (not in the shared helper, so inc/seo.php is untouched). add_filter('upton_show_term_breadcrumbs','__return_true') needs the owner's sign-off. Add .products-grid--few when found_posts<3, with a container query for a 2fr/3fr card. Related = terms sharing ≥2 products, excluding synonyms. Phase 2: template-parts/application-sheet.php inside .entry-content with direct h2s, so the existing rail grid applies. Registers reuse the .downloads subgrid (add .equipment-register to the :is() selector). Split routes by top ancestor (35 vs 39/37/41). No excerpt fallback (it's boilerplate).

Risks

The descriptions were machine-written by the 2026-09-23 SEO migration, not by Upton, and are local-only until replayed. Kyle should review them before they become visible. Turning on breadcrumbs reverses a decision left to the owner.

What Upton must supply

Kyle to review the 37 migration-written descriptions and approve term breadcrumbs. Later, Upton to supply 1-2 sentences per process and a 'choose this when…' line per product.

What we checkedskeptic: revise

Corrected provenance: the descriptions are migration-written, not hand-written. Verified 37 SEO descriptions and 0 taglines. The quick win and the full sheet are merged as phases.

Code, data and files

  • taxonomy-product_app.php:17,29-99
  • inc/term-meta.php:201-215
  • inc/breadcrumbs.php:15-25

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • apps-say-what-it-is Show the descriptions that already exist (Applications lens)

Model
apps-compatibility-matrix
Tier
Feature
Effort
SML (effort M)
Lens
Applications
Sheet
06.3

The Process × Equipment matrix

One dense chart of processes against the 13 furnace families: a dot for every pairing, a copper crosshair to read it.

Area Applications (alternate view) + Salt Bath family page

  • /applications/
  • /products/salt-bath-furnaces/
Verdict: reviseMerges 1 idea
  • Wow 4/5
  • Impact 4/5
  • Brand fit 5/5

06.3.1Problem

The directory only runs process → products, as repeated bullets: 'Externally Heated Salt Pot Furnaces' appears 20 times. You can't see that Internally Heated covers 21 processes and Graphite Electrode 1, or compare Box with Pit. The Salt Bath family page has no body at all, just [products].

06.3.2Concept

A dense compatibility chart like the back page of a 1960s equipment catalog. Processes are rows. The 13 furnace families are columns under SALT BATH / BATCH / SPECIALTY / PIT, with rotated Lilex headers. A filled dot marks each pairing. Hover or focus a cell and a copper crosshair runs along its row and column. Click a column header to float that furnace's processes to the top and stamp '21 PROCESSES' at the foot. It prints on one landscape sheet. The Salt Bath page gets an 8-column version under its grid. Legend: '● listed · blank = not listed — ask Upton'.

06.3.3Today

Screenshot of upton.test today (/products/salt-bath-furnaces/ · 1440). The family page is a search box and eight cards, then the footer; the body has no text and no process information.
Fig. 06.3The family page is a search box and eight cards, then the footer; the body has no text and no process information./products/salt-bath-furnaces/ · 1440

06.3.4Specification

Why Upton

Engineers trust compatibility tables. Every cell is real taxonomy data, so it shows breadth without inventing a single statistic, and it's the one big applications idea that could ship with no new content.

Build noteseffort M

template-parts/applications-matrix.php behind a real-link view switch (?view=matrix), registered in upton_catalog_template_signature(). A real <table> with <caption>, th scopes, colgroups per family, and visually hidden 'Listed'/'not offered' text. The crosshair is pure CSS: 13 :has([data-col='n']:is(:hover,:focus-within)) rules. Sort is a ~1KB button script setting aria-sort. Sticky thead and first column inside a tabindex=0 overflow wrapper. Under 800px: a 'Show processes for' select plus a list. Port the KDL §2.7 data table (documented, not implemented). Exclude Ancillary Parts. Print landscape.

Risks

Publish only after a tag audit: Graphite Electrode, the 1937 heritage design, tagged for one process would read as a weakness, and some tags look off (Nitriding on Cleaning & Stripping). Parts Washers is untagged. Equal dots imply equal suitability, so the legend must say 'listed for'.

What Upton must supply

Upton to audit product_app tags (especially Graphite Electrode, and Parts Washers if it should be tagged). Optional: mark primary vs also-suitable pairings.

What we checkedskeptic: revise

Column totals were verified by DB SELECT. Two matrix ideas (sitewide and salt-bath-only) are merged. The tag audit is a hard prerequisite.

Code, data and files

  • DB column totals: Internally 21, Externally 20, Pit 11, Automated 10, Box 9, Ceramic 9, Car Bottom 8, Bell 6, Belt 6, Mar-Aus 6, High Speed 5, Cleaning 5, Graphite 1 (117 + 3 Ancillary = 120)
  • page 35 content '[products]'
Merged from1 idea
  • catalog-process-matrix The salt bath matrix: which furnace runs which process (Catalog lens)

Model
apps-what-are-you-doing-to-the-metal
Tier
Feature
Effort
SML (effort M)
Lens
Applications
Sheet
06.4

What are you doing to the metal?

Open the applications directory with one question and nine plates, so visitors who don't know the term still find equipment.

Area Applications finder

  • /applications/
  • /contact/
Verdict: revise
  • Wow 4/5
  • Impact 5/5
  • Brand fit 4/5

06.4.1Problem

The only way in is to already know the exact term name. Search matches only term names and product titles, so 'distortion', 'hardness', 'soften', 'gear', 'spring' and 'case hardening' all return 0 results, and 'steel' returns 2. Each chip filters to its own heading.

06.4.2Concept

The directory opens with one question set large: 'What are you doing to the metal?' The visitor presses one of nine stamped steel plates (SOFTEN · HARDEN · QUENCH WITH LESS DISTORTION · TOUGHEN · CASE-HARDEN · AGE · JOIN · CLEAN & STRIP · SPECIALTY), then a material row with live counts. The answer panel names the matching processes and lists Upton equipment in two ruled columns: 'Salt bath route' and 'Batch, specialty & pit route'. 'Scope this with an engineer' carries both answers into the form, and #goal=quench&material=alloy-steel makes the result shareable with purchasing.

06.4.3Today

Screenshot of upton.test today (/applications/ · 390 · first 1,200px shown as two strips). A search box and a wall of 38 chips, each an exact term name, so you have to already know what the process is called.
Fig. 06.4A search box and a wall of 38 chips, each an exact term name, so you have to already know what the process is called./applications/ · 390 · first 1,200px shown as two strips

06.4.4Specification

Why Upton

It asks what an RFQ asks (goal plus material) and turns a taxonomy into the consultative conversation that engineered-to-order sales depend on.

Build noteseffort M

Term meta product_app_goal and product_app_materials, seeded by migration and output as data attributes. products-filter.js gains [data-filter-group] fieldsets (OR within a group, AND across groups), keeps #filter= parsing and adds #goal=&material=. Only /applications/ has chips, so /products/ can't regress. The toolbar renders native radios styled as plates; don't disable zero-count options (keyboard reach). No-JS: the list grouped by goal. The form pre-fill reuses the shared whitelist (field 10 text, field 8 value).

Risks

Assigning goals is an editorial call that needs engineering review. The material list must not claim unconfirmed capability. Keep an A-Z path for experts.

What Upton must supply

Upton to approve a goal and material list per process. The machine-written SEO descriptions can seed a draft but aren't Upton copy.

What we checkedskeptic: revise

The search misses were verified live, and the form fields via GFAPI. Replaced 'disable invalid options' for accessibility. Contained to /applications/.

Code, data and files

  • applications-list.php:91,137
  • products-filter.js:122-144,179-201
  • GF form 2 field 10 'Tell us about your thermal-processing application'

Checked on the live site

  • A sweep of goal words through the live /applications/ search

Model
apps-rated-for-stamps
Tier
Quick win
Effort
SML (effort S)
Lens
Applications
Sheet
06.5

'Rated for' process stamps on every data sheet

Every product data sheet lists its processes as stamped tags that link to each process page.

Area Product pages ↔ applications cross-links

  • /products/batch-furnaces/box-furnaces/
  • /products/salt-bath-furnaces/internally-heated/
  • /products/pit-type-furnaces/
  • /products/salt-bath-furnaces/ceramic/
Verdict: keep
  • Wow 3/5
  • Impact 4/5
  • Brand fit 5/5

06.5.1Problem

Links only run one way. Box is tagged with 9 processes and Internally Heated with 21, but no product page links to a single /application/ URL. The prose 'applications' paragraphs also disagree with the tags (dip brazing and case hardening are mentioned but not tagged).

06.5.2Concept

Each product data sheet gets a 'Processes' rail section: a strip of stamped tags in mono uppercase, each with a 1px steel border, a copper notch and a 4px heat stripe (TEMPERING · A.K.A. DRAWING, ANNEALING, STRESS RELIEVING…), each linking to its process page. It reads like inspection stamps on a nameplate. Typical bands appear only once verified.

06.5.3Today

Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · end of page). Boilerplate, Downloads, footer; Box is tagged with 9 processes but the page links to none of them.
Fig. 06.5Boilerplate, Downloads, footer; Box is tagged with 9 processes but the page links to none of them./products/batch-furnaces/box-furnaces/ · 1440 · end of page

06.5.4Specification

Why Upton

It answers the question every product-page visitor has (will this do my process?), adds useful internal links, and builds on the data-sheet layout rather than redoing it.

Build noteseffort S

Don't append a bare h2: six tagged pages are column layouts and would flip into the rail grid. inc/product-processes.php outputs <div class='process-register'><h2>Processes</h2><ul>…</ul></div> (a nested h2 doesn't trigger :has(> h2)); add .process-register to the :is(.downloads,.videos) subgrid rule. Use a the_content filter at priority 12 to place it before the first '<div class="downloads', guarded by is_main_query, !is_feed, and has_term. Exclude ancillary-parts. New process-stamps.css uses the .kdl-notch utility.

Risks

The stamps make prose/tag mismatches visible, so reconcile them first.

What Upton must supply

Upton to reconcile the product prose with the tags and decide on Parts Washers tags.

What we checkedskeptic: keep

The nested-h2 register was verified to avoid breaking the six column-layout pages. Merged with step 1 of the detail heat-ladder (a plain chip row).

Code, data and files

  • wp term list per page

Checked on the live site

  • 0 /application/ links on product pages; h2 structure of all 16 tagged pages

Model
chrome-search-that-knows-processes
Tier
Feature
Effort
SML (effort M)
Lens
Navigation
Sheet
06.6

Search that knows processes, never dead-ends, and opens with /

Search that understands process names, never dead-ends on zero results, and opens from anywhere with the / key.

Area Catalog search, WP search, header palette

  • /products/
  • /applications/
  • /?s=furnace
  • all pages
Verdict: reviseMerges 3 ideas
  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

06.6.1Problem

The /products/ search sees only the 8 top-level cards: 'car bottom', 'austemper' and 'U-CBE' all end at 'No products match these filters.' with a 'Clear filters' button on a page with no filters. WP search misses processes: ?s=nitriding finds nothing, ?s=austempering returns 1 of 5 tagged systems, and ?s=hoist lists Home. There's no global search entry point, and search.php still uses Twenty Seventeen partials.

06.6.2Concept

Step 1 (S): the empty state reads 'Nothing on this page for "car bottom"', with 'Search every Upton page →' and 'Find by process →' links. WP search learns processes (terms matched, tagged systems returned, Home excluded, rows with Lilex paths). /applications/ search indexes the existing SEO descriptions, so 'distortion' now returns 5. Step 2: a header search button with a '/' hint opens a gray-900 operator-panel palette grouped EQUIPMENT (with Lilex path SALT BATH › GRAPHITE ELECTRODE), PROCESSES ('Nitriding · 2 systems'), DOCUMENTS (PDFs) and ACTIONS (Quote · Call · Buy salt from Kolene ↗). A copper selection bar moves with the arrow keys. Synonym lists come later.

06.6.3Today

Screenshot of upton.test today (/products/ · 1440). Searching "car bottom" (a real Upton product) dead-ends at "No products match these filters." with a Clear filters button on a page with no filters.
Fig. 06.6Searching "car bottom" (a real Upton product) dead-ends at "No products match these filters." with a Clear filters button on a page with no filters./products/ · 1440

06.6.4Specification

Why Upton

Engineers arrive with a process name or a model code, not Upton's page tree. This turns zero-result searches into routes, or into RFQs.

Build noteseffort M

Step 1: catalog-empty.php route links filled by products-filter.js when visibleCount is 0; label 'Clear search' when no chips. pre_get_posts: post_type page, exclude page_on_front. posts_search appends IDs from get_objects_in_term for matching product_app terms. search.php: badges, breadcrumb paths, the_posts_pagination, 'upton' text domain. Append _upton_seo_description to $app_text (applications-list.php:91). Step 2: inc/search-index.php builds a transient-cached index (24 product pages, 37 terms, PDFs via WP_HTML_Tag_Processor) exposed through REST. palette.js (~5KB) lazy-fetches it into a <dialog>.showModal() combobox (APG pattern). The '/' shortcut is ignored in inputs and contenteditable. Share normalizeText between the two scripts.

Risks

The combobox must follow APG exactly. The index must bust with the catalog cache. Unreviewed synonyms mis-route people, and the SEO descriptions are machine-written.

What Upton must supply

Optional: Upton engineering to approve a short synonym and keyword list.

What we checkedskeptic: revise

Dead ends and WP search misses were reproduced. Three search ideas are merged into a quick server-side fix plus a palette.

Code, data and files

  • Playwright on /products/ (5 dead-end queries)
  • products-filter.js:122-144
  • catalog-empty.php:33-34
  • search.php:51-58
  • applications-list.php:91

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from3 ideas
  • catalog-search-the-whole-line Search that knows the whole line and never dead-ends (Catalog lens)
  • chrome-command-palette Press / to find any furnace: an engineer's command palette, plus a search that finds processes (Navigation lens)
  • apps-shop-talk-search Shop-talk search and 'a.k.a.' plates (Applications lens)

Model
wild-periodic-table
Tier
Wildcard
Effort
SML (effort M)
Lens
Wildcards
Sheet
06.7

The Periodic Table of Heat Treatment

Turn the process chips into a periodic table of heat treatment, with a poster you can print for the shop wall.

Area Applications chip wall

  • /applications/
Verdict: revise
  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

06.7.1Problem

38 identical pills wrap to 5 rows at 1440 and about 13 at 390. Every process has the same weight, so nothing shows the landscape of processes or where Upton is strongest.

06.7.2Concept

The pill wall becomes a periodic table of 37 tiles with a symbol (An, Tp, Aus, Nt, Ps…), the full name always visible, and an 'atomic number' that's the real count of Upton products for that process. Tiles are banded by family color, and a 'Color by temperature' switch recolors them black-body. Pressing a tile does exactly what a pill does today (filter plus #filter= share link). 'Print the poster' gives a landscape shop-wall version with the Upton wordmark.

06.7.3Today

Screenshot of upton.test today (/applications/ · 1440 · chip wall). 38 identical pills in five rows, every process given the same weight.
Fig. 06.738 identical pills in five rows, every process given the same weight./applications/ · 1440 · chip wall

06.7.4Specification

Why Upton

Heat-treat shops pin charts like this on the wall. It's a free printable lead magnet with Upton's name on it, built from honest taxonomy data.

Build noteseffort M

The tiles are the chips: catalog-toolbar.php with 'layout'=>'periodic' renders .catalog-toolbar__chip.periodic__tile buttons, so products-filter.js is unchanged (multi-select, hash, announcements). Counts come from the same grouped query as applications-list.php. Symbol and family in term meta, with a slug fallback. Below 700px, one scroll-snap row per family. Temperature mode waits for verified data. Print via @page landscape.

Risks

Symbols that collide with real elements must stay obviously a joke, so names are always visible. Some terms aren't processes (Ancillary Parts) or are duplicates. It's an alternative to the ladder's chip rail; ship one.

What Upton must supply

Upton to approve the family grouping (21 terms are ungrouped today) and the symbols.

What we checkedskeptic: revise

Rebuilt on the existing chip contract. The hover popover was dropped as redundant.

Code, data and files

  • catalog-toolbar.php:31-45
  • products-filter.js

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).

Sheet 07 / 11

Theme 5 of 6 · 6 ideas · 1 live demo

Every data sheet ends at an engineer

Close the gap between reading a spec and asking about it.

Start with the live demo

07.1Work-order rail
Drawing register
ModelIdeaEffort
detail-quote-railWork-order rail (live demo)M
chrome-light-the-pilotLight the pilotS
convert-contact-triageStop filing furnace buyers under 'Chemicals'S
detail-parts-counterParts CounterM
convert-furnace-salt-handshakeBlue is saltS
wild-shop-travelerBuild your shop travelerL
Model
detail-quote-rail
Tier
Headline
Effort
SML (effort M)
Lens
Product detail
Sheet
07.1

Work-order rail: the empty third column starts selling

The empty third column on every data sheet becomes a sticky work-order card: pre-filled quote, the drawing and the phone.

Area Product data sheets: third column, header condense, mobile action bar

  • /products/batch-furnaces/box-furnaces/
  • /products/parts-washers/
  • /products/scott-connected-transformers/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
Verdict: reviseMerges 3 ideasLive demo
  • Wow 3/5
  • Impact 5/5
  • Brand fit 5/5

07.1.1Live demo

Live demo detail-quote-rail
Compare
1440 px · Rail card
Presets

Mock address bar: upton.test/products/batch-furnaces/box-furnaces/

HomeProductsApplicationsAbout UsNeed Salt?
Upton Industries

HomeProductsBatch FurnacesBox Furnaces

Box Furnaces

We manufacture batch type furnaces in either electric or gas fired heating systems. The design of the heating systems provide for shielding of the loads from the detrimental effects of direct radiant heat or flame impingement while promoting efficient uniform heating of the loads.

Electrically Heated or Gas Fired

Upton manufactures batch type furnaces in either electric or gas fired heating systems. The design of the heating systems provide for shielding of the loads from the detrimental effects of direct radiant heat or flame impingement while promoting efficient uniform heating of the loads.

Upton box furnace with a yellow door and side panels on the shop floor

Electric Heating Systems

Electric furnaces employ various styles of resistance type electric heaters to maintain the integrity of the furnace atmosphere and thermal efficiencies. Heaters can be supplied as either standard open resistance wire type, or bayonet/radiant tube style based on the specific furnace application, intended atmosphere and/or customer preference. SCR power controllers with control panel door mounted diagnostics displays are standard for Upton furnaces, with optional PLC and PC systems integration available. Heating systems are factory prewired to meet NEC and NFPA standards where applicable, and all equipment is factory tested prior to shipment.

Gas Firing Systems

Gas fired furnaces employ direct gas firing type or radiant tube style gas firing burners to maintain the integrity of the furnace atmosphere. Sealed burner systems can be supplied as either standard tube firing or single end recuperative type based upon customer preference. Solid-state flame supervision systems with panel door mounted diagnostics displays are standard for Upton furnaces, with optional PLC and PC systems integration available. Combustions systems are factory prepiped to meet FM, IRI, and NFPA standards where applicable, and all equipment is factory tested prior to shipment.

Thermal Recirculation Systems

Upton furnaces utilize alloy construction cartridge type fans for recirculation of the furnace atmosphere, promoting close tolerance temperature uniformities. Recirculation fans are located within a stainless steel plenum positioned in the top of the furnace heating chamber, integrated with the gas firing or electric heating system, to eliminate potential of direct heating of the workloads. Lateral sidewall ductwork is employed for introduction of the furnace atmosphere into the workzone beneath the workload, with recirculation and redistribution through the fan plenum inlet.

Triple Seal Door Designs

The design of the furnace door is to provide for a triple-seal of ceramic fiber to ceramic fiber, fiber to furnace steel faceplate, and a gasketed perimeter seal around the furnace door. This triple-seal design, combined with our pneumatically operated, automatic clamping devices, create a positive pressured door seal, minimizing heat loss while maintaining atmosphere integrity. All door opening systems are designed to move the door away from the faceplate to eliminate abrasion of the refractories during operation.

Custom Designed & Engineered

Our in-house engineering and manufacturing allows Upton to custom design furnaces and systems to a customers process and specification requirements, rather than attempting to provide to you standard pre-design equipment, as some of our competitors would attempt to do. Follow-up technical services are available for all Upton thermal process systems.

Our Engineered Thermal Solutions will allow for flexibility in your manufacturing productivity.

Downloads

Review note · end of sheet

Downloads, then the footer. No quote button, no phone number and no link to /contact/ anywhere in the body of the page.

U-BE · U-BCE

Quote a Box Furnace built to your spec

Send your part sizes and production rates, and Upton engineers will scope a furnace to suit.

Engineered Thermal Solutions for over 80 years

Contact us

30435 Groesbeck Hwy.
Roseville, MI 48066

586-771-1200

info@kolene.com

© 2026 Kolene Corporation | Upton IndustriesPrivacy Policy | Sitemap

Upton’s real copy and form options · mock layout · nothing is sent

07.1.2Problem

No product page has a call to action in the body. page.php never includes the CTA band: it renders only on the homepage and the 37 /application/* pages (the catalog templates that would include it aren't assigned). Box Furnaces goes text → PDF → footer, and Scott Transformers has no body links at all. At 1440 the data-sheet grid leaves a 244.8px third column empty all the way down. The form already has the right equipment choices, and nothing pre-fills them.

07.1.3Concept

The empty column becomes a sticky work-order card: a mini nameplate (MODEL U-BE · U-BCE), a red 'Quote this furnace' button, 'Download drawing (PDF)', 'Call 586-771-1200', and an 'On this sheet' index that marks the section you're reading in copper. Where the column is too narrow (<1240px container, or the column-layout salt-bath pages), the card drops inline under Downloads. Below 1000px it becomes a slim bottom bar (Quote · Drawing · Call). The quote button opens /contact/ with 'I'm looking for: Equipment', the right equipment family selected, and 'Re: Box Furnaces (U-BE) -' in the message, so leads arrive pre-sorted. Every product page also ends with the CTA band using a product-specific heading ('Quote a Box Furnace built to your spec').

07.1.4Specification

Why Upton

Product pages attract buyers but don't convert them. An engineer who has just read about triple-seal doors should never have to hunt for a way to ask, and pre-sorted leads save a triage step.

Today on upton.test1 screenshot
Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · full page). The right-hand third stays empty all the way down, and the page goes text → PDF → footer with no call to action.
Fig. 07.1The right-hand third stays empty all the way down, and the page goes text → PDF → footer with no call to action./products/batch-furnaces/box-furnaces/ · 1440 · full page
Build noteseffort M

Phase 0 (S, ship now): in page.php, call get_template_part('template-parts/cta-band', null, ['heading'=>…]) for descendants of Products (ID 10); cta-band.php already accepts heading/subhead args. Card: wrap .entry-content plus template-parts/quote-plate.php in .datasheet-frame{display:grid;container:datasheet/inline-size} with both children at grid-area 1/1. The plate uses justify-self:end; sticky; top:calc(120px+1.5rem) (+32px with the admin bar), and its width is the leftover track from --upton-rail, --upton-measure and --upton-rail-gap. Enable it only under @container (min-width:1240px) and when .entry-content:has(> h2); otherwise render it inline. Prefill: a cache-proof JS reader on /contact/ for ?need&equipment&ref, or gform_pre_render_2 with a allowlisted slug→choice map (35→'Salt Bath Furnace or Automated…', 39→'Batch Furnace — Box or Car Bottom', 41→'Pit Furnace', 37→'Specialty…', 43→'Parts Washer', 61→'Controls or Automation', 45/47→'Transformer or Desludging…', 49→Replacement Parts). The scroll-spy uses h2 ids from art-two-voice-type. Hide the mobile bar at the footer, while html.drawer-open is set, and when the cookie banner is visible. Add it to the print hide list.

Risks

The sticky card only fits at wide viewports (the column is under 180px at 1366), so the inline and bar fallbacks carry most users. Gravity Forms choice text changes would silently break the pre-fill, so keep the map in one array. page.php is being edited by another session.

What Upton must supply

none

What we checkedskeptic: revise

Verified the empty column, zero body CTAs and the form fields. The sticky offset was corrected to the real 120px header. A stacked-grid overlay replaces a fragile span-60 placement. It absorbs the context bar's named CTA and the ticket-style query carry.

Code, data and files

  • GFAPI form 2: fields 12, 8 and 10 allowsPrepopulate=false
  • header is sticky at 120px

Checked on the live site

  • At 1440 the data-sheet grid measures 240px, 672px and an empty 244.8px third column
  • No product page links to /contact/ from its main content
Merged from3 ideas
  • convert-datasheet-quote-plate Data-plate quote card beside every data sheet (Conversion lens)
  • chrome-context-bar Condense, don't just shrink: a header that knows the page and names the quote (Navigation lens)
  • convert-context-carry-tickets Quote tickets that remember where you came from (Conversion lens)

Model
chrome-light-the-pilot
Tier
Quick win
Effort
SML (effort S)
Lens
Navigation
Sheet
07.2

Light the pilot: switch on the mega menu you already built, fix 'you are here', add a quote button

Switch on the mega menu you already built, show 'you are here' properly, and put a quote button in the header.

Area Header, mega menu, mobile drawer

  • all pages
Verdict: reviseMerges 2 ideas
  • Wow 2/5
  • Impact 5/5
  • Brand fit 5/5

07.2.1Problem

The finished Products mega panel never renders because no menu item has the mega-menu class. Switched on as it stands, it would show only 6 of 8 families and the first 8 applications alphabetically. Hover looks exactly like the current-page marker. Product sub-pages mark nothing (current-page-ancestor is unstyled), /application/* pages mark nothing, and the drawer has no current style at all. The desktop header has no phone number or quote button, so on product pages 'Contact Us' is the only route to a quote. theme-color is #c00.

07.2.2Concept

Products opens the existing panel with all 8 families in a 2×4 grid of thumbnail rows and the homepage's four process clusters, plus the 'Talk to an engineer' callout. It opens with a clip-path reveal and a copper seal line. The current section gets KDL's solid copper underline, and hover gets a thinner bar drawn from the center, so the two never look alike. Products stays lit on every data sheet and Applications on all 37 process pages. The header's empty right side gets 'ROSEVILLE, MICH. / 586-771-1200' as a tel link and a compact red Request Quote button, which collapses to a phone icon near 1150px. In the drawer, Products becomes a disclosure listing the 8 families, with a copper inset marking the current page.

07.2.3Today

Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 1440 · header with Products hovered). No mega panel opens, the hover underline is identical to the current-page marker, and the header has no phone number or quote button.
Fig. 07.2No mega panel opens, the hover underline is identical to the current-page marker, and the header has no phone number or quote button./products/batch-furnaces/box-furnaces/ · 1440 · header with Products hovered

07.2.4Specification

Why Upton

An engineer's first two questions are what range Upton builds and how to get a quote. The code already answers both, but neither answer reaches the screen.

Build noteseffort S

Code-only switch: a wp_nav_menu_objects filter (theme_location primary) adds 'mega-menu' to the Products item; no wp-admin step needed. mega-menu.php:46 posts_per_page → -1, shown as a 2-column grid (8 stacked rows overflow at 1366×657). Extract the finder groups into upton_get_application_clusters() and use them in both places. Add li.current-page-ancestor to mega-menu.css:113-118; a nav_menu_css_class filter for is_tax('product_app'). The underline is a background-image (::after is taken by the chevron). Put the clip-path transition longest, because afterTransition() waits on it, with negative insets so the shadow isn't clipped. header.php: .site-header-actions from the existing $drawer_phone/$drawer_cta. Drawer disclosure reuses the 'Products' nav menu. theme-color → #CE2029. All keyframes go inside no-preference (the reset doesn't zero delays).

Risks

Confirm with Kyle the panel wasn't turned off on purpose. Test hover intent near the new button. Two red elements in the header, so keep the current-page state as text plus a copper line.

What Upton must supply

none (Kyle/Upton to confirm family order and featured applications)

What we checkedskeptic: revise

The panel output was confirmed with a read-only wp eval of its queries. Three near-identical nav ideas are merged. The class is added in code rather than as a DB change.

Code, data and files

  • Playwright: .mega-panel 0
  • wp menu item list main: empty classes
  • inc/walker-mega-menu.php:39-48
  • template-parts/mega-menu.php:46,56-62
  • mega-menu.css:113-131
  • header.php:5,13-15,33-52

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from2 ideas
  • motion-wake-the-mega-menu Wake the sleeping mega menu and fix the nav's you-are-here states (Motion lens)
  • convert-header-hotline Header hotline: phone + quote button on every page (Conversion lens)

Model
convert-contact-triage
Tier
Quick win
Effort
SML (effort S)
Lens
Conversion
Sheet
07.3

Stop filing furnace buyers under 'Chemicals'

Stop filing furnace buyers under 'Chemicals': lead with the phone, then a form ordered the way engineers think.

Area Contact page form (mobile and desktop)

  • /contact/
Verdict: reviseMerges 1 idea
  • Wow 2/5
  • Impact 5/5
  • Brand fit 5/5

07.3.1Problem

Gravity Form 2 preselects 'Chemicals' for 'I'm looking for' and 'Salt Bath Furnace…' for equipment, so an untouched submission reads as a salt-bath chemicals lead. 14 of 16 inputs are required, including a full street address, before the visitor has said a word about the job. The phone number is plain text, and at 390px it sits below the Submit button, about 2.8 screens down. The H1 says 'Contact Us' while the title tag says 'Request a Furnace Quote'.

07.3.2Concept

The H1 becomes 'Talk to an Upton engineer', with two equal doors under it: a big tap-to-call 'Call Roseville · 586-771-1200' (plus Directions and a quieter Kolene salt line) and 'Send your process details ↓'. The form is reordered in engineering order under mono labels: 01 YOUR PROCESS · 02 YOUR PLANT · 03 HOW TO REACH YOU. Every select opens on 'Select…', street/line 2/ZIP are hidden, phone becomes optional, and Submit reads 'Send to Upton engineering'. As a quick CSS-only win, the contact column comes before the form on mobile.

07.3.3Today

Screenshot of upton.test today (/contact/ · 390 · full page (3,742px) in four strips). "Chemicals" preselected, address fields before the job, and the phone number below Submit (Submit at y 2,205, phone at y 2,406).
Fig. 07.3"Chemicals" preselected, address fields before the job, and the phone number below Submit (Submit at y 2,205, phone at y 2,406)./contact/ · 390 · full page (3,742px) in four strips

07.3.4Specification

Why Upton

Defaults that mislabel leads corrupt Upton's data and may route to the wrong inbox. Roughly halving the required fields is the cheapest conversion gain on the site, and most of it is form configuration.

Build noteseffort S

GF admin: Upton-specific field 12 choices plus a placeholder (or hide it and default to Equipment); a 'Select…' placeholder on field 8; hide the address sub-fields; phone optional; Section fields for 01/02/03. Audit notifications and routing keyed on field 12 first. Theme: a [upton_phone] shortcode printing a tel: link from upton_get_phone(); a manual excerpt as the lede; rename the page but keep 'Contact Us' as the nav label. contact.css behind is_page('contact'); gform_button width auto. Mobile reorder: body.slug-contact column wrapper flex-direction column with the one_third first.

Risks

CRM exports or notifications may depend on the current field values. Renaming the page affects breadcrumbs and SEO title logic.

What Upton must supply

Upton to confirm inquiry categories and routing, whether a street address is needed at first contact, the correct Upton inbox, and 'what happens next' copy (no response-time promise unless committed).

What we checkedskeptic: revise

Verified live. The form isn't shared with kolene.com (separate installs), so this is a notifications audit rather than a duplicate form. The mobile two-lane quick win is merged in; the multi-step builder is a wildcard.

Code, data and files

  • functions.php:1054-1087

Checked on the live site

  • Gravity Form 2 field dump (16 inputs in 11 fields, 9 of them required)
  • At 390, Submit sits at y 2,205 and the phone number about 200px below it, on a 3,742px page
  • Plus 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • mobile-contact-two-lane Two-Lane Contact: call now, or send your process in three heat-up steps (Mobile lens)

Model
detail-parts-counter
Tier
Feature
Effort
SML (effort M)
Lens
Product detail
Sheet
07.4

Parts Counter: a fast lane for people who already own an Upton

Spare parts become bin cards you can add to a request slip, with a line-down switch that says call now.

Area Replacement & Spare Parts + furnace back-links + contact

  • /products/replacement-spare-parts/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /products/scott-connected-transformers/
  • /contact/
Verdict: reviseMerges 1 idea
  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

07.4.1Problem

The spare parts page has a captioned gallery of 8 parts (Flex Cables, Graphite Extensions, Graphite Pushers, Brush Connector, Immersion Heaters, Salt Pot Liners, MGO and Upton Thermocouples), and every card is a dead end with a hover zoom that crops the part. Nothing says what a part fits. The graphite page explains that extensions get consumed, and the Scott page promises repair or replacement 'with minimal lead times', with no way to ask for either.

07.4.2Concept

Parts become shipping-tag bin cards: a punched hole, 'BIN 02 · GRAPHITE EXTENSIONS' in Lilex, 'Fits: Graphite Electrode (U-E) →', a quantity stepper and '+ Add to request'. A corner counter ('Parts slip · 3') opens a carbon-copy request slip with the items, a nameplate serial field, an optional photo, and an 'Is a line down?' switch that stamps LINE DOWN and shows 'Call Roseville now: 586-771-1200'. The form pre-fills Replacement Parts. Graphite, internally heated and Scott pages get a 'Wear parts for this furnace' strip back to the counter.

07.4.3Today

Screenshot of upton.test today (/products/replacement-spare-parts/ · 1440). A captioned gallery of 8 parts, each a dead end; hovered (Graphite Brush Connector) it only zooms and crops the part.
Fig. 07.4A captioned gallery of 8 parts, each a dead end; hovered (Graphite Brush Connector) it only zooms and crops the part./products/replacement-spare-parts/ · 1440

07.4.4Specification

Why Upton

Aftermarket parts are recurring, relationship business. Giving owners their own lane backs up the 'we support what we build' claim without adding new ones.

Build noteseffort M

Progressive enhancement of #gallery-1: parts-slip.js (page 49 only) reads the figcaptions and injects a stepper plus an aria-pressed toggle; a no-JS 'Request this part' link carries a single part. Slip state in sessionStorage. Send → /contact/?need=replacement-parts&parts=… using the shared JS pre-fill (field 12 Replacement Parts, field 8 Replacement or Spare Parts, field 10 list); a GF List field comes later. Where-used: attachment meta _upton_fits (attachment_fields_to_edit), and a reverse strip injected before [downloads]. Replace the scale(1.3) with a copper border on hover and focus. Add the page slug to the $suppress list (inc/page-header.php:163) to stop the duplicated intro.

Risks

A wrong 'fits' link is worse than none (graphite parts may also fit Ceramic). Say 'request', never cart or checkout. No stock, price or 24/7 claims. File uploads need type/size limits plus Turnstile.

What Upton must supply

Upton to confirm fitment for the 8 parts, whether parts requests go to a different inbox, any part numbers, where the serial sits on the nameplate, and any separate after-hours number (don't invent one).

What we checkedskeptic: revise

The existing gallery is enhanced rather than rebuilt. The invented 'made in-house since 1937' claim was removed.

Code, data and files

  • page 49 [gallery link='none' ids=…]
  • style.css:940-968

Checked on the live site

  • 2 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • convert-parts-counter Parts Counter: a fast lane for people who already own an Upton (Conversion lens)

Model
convert-furnace-salt-handshake
Tier
Feature
Effort
SML (effort S)
Lens
Conversion
Sheet
07.5

Blue is salt: the Kolene doorway and the Furnace + Salt card

Kolene blue gets one job, salt: a clear doorway to Kolene, and a Furnace + Salt card on salt bath pages.

Area Nav 'Need Salt?', contact sidebar, salt-bath pages, About

  • all pages
  • /contact/
  • /products/salt-bath-furnaces/graphite-electrode/
  • /about/
Verdict: reviseMerges 1 idea
  • Wow 3/5
  • Impact 3/5
  • Brand fit 4/5

07.5.1Problem

'Need Salt?' looks exactly like an internal link (same color, same red hover, no external marker). On /contact/ the salt line links to a different Kolene URL, (313) 273-9220 isn't dialable, and Upton's email is info@kolene.com with no explanation. Salt-bath pages never mention that the sister company makes the salts they run.

07.5.2Concept

The last nav item moves behind a hairline divider and reads NEED SALT? ↗ in --kdl-blue-600, with a tiny white-on-blue KOLENE tag. Hover or focus drops a card: 'Salts and heat-treat chemicals come from our sister company, Kolene Corporation, Detroit', with a shop link and call link. On salt-bath pages, the contact sidebar and About, a two-tone card appears: Upton red on the left ('Upton builds the furnace', 586-771-1200) and Kolene blue on the right ('Kolene makes the salt that runs in it', 313-273-9220), joined by an interlocking KDL notch, captioned 'One family. The furnace and the salt that runs in it.'

07.5.3Today

Screenshot of upton.test today (/contact/ · 1440 · sidebar, with "Need Salt?" hovered in the nav). The Kolene link gets the same red underline as the current page, the salt number (313) 273-9220 is plain text, and the email is info@kolene.com with no explanation.
Fig. 07.5The Kolene link gets the same red underline as the current page, the salt number (313) 273-9220 is plain text, and the email is info@kolene.com with no explanation./contact/ · 1440 · sidebar, with "Need Salt?" hovered in the nav

07.5.4Specification

Why Upton

Furnace plus salt from one family is a story most furnace builders can't tell. KDL was designed as a two-brand system in which blue means Kolene, so this is the system working as intended.

Build noteseffort S

No popover: render the card as a child of the li (already position:relative), shown on :hover (150ms intent) and :focus-within, with Esc dismissal (WCAG 1.4.13) added in mega-menu.js. Add target/rel plus '(opens kolene.com in a new tab)' via nav_menu_link_attributes. Put the Kolene phone in a new Customizer setting. Family card: template-parts/family-card.php via [upton_family_card], and a the_content filter on salt-bath descendants. Red-500 gives 5.4:1 and blue-500 4.8:1 for white text. Port the KDL §3.2 notch.

Risks

Kolene may want to control how its blue and phone number appear. Keep blue to this one job. Verify which of the two Kolene salt URLs resolves.

What Upton must supply

Upton/Kolene to approve the wording, which Kolene number and URL to publish site-wide, and whether info@kolene.com is the right Upton inbox.

What we checkedskeptic: revise

The popover-plus-fallback approach was contradictory, so it's now a plain child card. The logo blue measured about #207CC0. Nav and card ideas are merged under one 'blue is salt' rule.

Code, data and files

  • Playwright: li#menu-item-424 hover = internal hover
  • logo blue bar ≈#207CC0
  • kolene.test/about/ 'one supplier answers for the whole process'

Checked on the live site

  • The Contact page sidebar's HTML
Merged from1 idea
  • chrome-kolene-portal Need Salt? becomes a signposted doorway to Kolene (Navigation lens)

Model
wild-shop-traveler
Tier
Wildcard
Effort
SML (effort L)
Lens
Wildcards
Sheet
07.6

Build your shop traveler: a guided RFQ that writes its own spec

A five-step guided quote request that fills in a shop traveler as you go, ending on a suggested starting point.

Area Contact / quote flow (phase 2 after triage)

  • /contact/
Verdict: reviseMerges 1 idea
  • Wow 4/5
  • Impact 4/5
  • Brand fit 4/5

07.6.1Problem

The form's best prompt ('material or parts being processed, … temperature range, atmosphere requirements, load size or throughput, and any automation requirements') is 13px helper text under one blank textarea, after 12 identity and address inputs.

07.6.2Concept

A traveler is the paper ticket that follows a job through a heat-treat shop. Five tappable steps (Material → Process → Temperature → Load → Heating & automation) fill a cream traveler card live in Lilex: 'JOB № …', ticked boxes, and a 'starting point' family pulled from the site's own taxonomy (e.g. 'Mar-Ausquenching Salt Bath · Automated line'). A red 'UPTON ENGINEERING' stamp thunks on at the end. 'Send to Upton engineering' pre-fills the real form. 'Skip — just contact us' is always visible, and the traveler prints for internal sign-off.

07.6.3Today

Screenshot of upton.test today (/contact/ · 1440 · the form). 12 identity and address inputs come first; the best prompt (material, process, temperature, atmosphere, load) is small helper text under one blank textarea.
Fig. 07.612 identity and address inputs come first; the best prompt (material, process, temperature, atmosphere, load) is small helper text under one blank textarea./contact/ · 1440 · the form

07.6.4Specification

Why Upton

Custom equipment sales start with a spec conversation. This gets Upton a better-qualified first RFQ, dressed up as a toy.

Build noteseffort L

template-parts/traveler.php is a real GET form (works without JS). traveler.js (~200 lines) handles steps and the live preview. GF stays the system of record: enable dynamic population on fields 12, 8 and 10 (or use gform_field_value filters). The process → product map is generated from product_app in PHP. Fieldset/legend per step; the preview is aria-hidden. sessionStorage holds process fields only, never contact details. Print shows the card only. No stamp animation under reduced motion.

Risks

It must never feel like a gate. Suggestions are a 'starting point', never a recommendation. Longer forms can lower completion. Test GF AJAX, Turnstile and validation.

What Upton must supply

Upton engineering to supply which questions a first quote needs, the preferred units, the material list, and the confirmation copy.

What we checkedskeptic: revise

The 16-input count was verified. Merged with the process-sheet RFQ, keeping the traveler metaphor (native to heat-treat shops).

Code, data and files

  • live DOM field order (16 inputs)
  • field_2_10 help text

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from1 idea
  • convert-process-sheet-rfq The Process Sheet: a guided RFQ that writes its own spec (Conversion lens)

Sheet 08 / 11

Theme 6 of 6 · 5 ideas · 1 live demo

Built for the plant floor (and the night shift)

One thumb, gloves on, a line running, and a little mischief after hours.

Start with the live demo

08.4Lost in the bath
Drawing register
ModelIdeaEffort
mobile-pendant-dockThe Pendant DockM
mobile-glove-modeGlove modeS
detail-screening-roomShop-floor reelM
wild-desludger-404Lost in the bath (live demo)S
wild-shift-modesNight Shift, plus two secret modes (OVERTEMP and Blueprint 1937)L
Model
mobile-pendant-dock
Tier
Feature
Effort
SML (effort M)
Lens
Mobile
Sheet
08.1

The Pendant Dock: Call · Data sheet · Quote · Menu under your thumb

On phones, a dock styled like a hoist pendant puts Call, Data sheet, Quote and Menu under your thumb.

Area Global mobile chrome (<992px)

  • /products/batch-furnaces/box-furnaces/
  • /products/salt-bath-furnaces/automated/hoist-assemblies/
  • /products/
  • /contact/
Verdict: revise
  • Wow 3/5
  • Impact 5/5
  • Brand fit 4/5

08.1.1Problem

At 390px every page has exactly two tel: links: one in the closed drawer and a 109×20 one in the footer at y=4,437. On page.php pages the only Request Quote is inside the drawer. The only navigation is a 79×28 MENU button in the top-right corner, the hardest spot for a thumb.

08.1.2Concept

A dock fixed to the bottom, styled like the pendant control station that hangs from an Upton hoist: gray-800 steel, a 3px copper top edge, and four 60px keys with Lilex labels: CALL, DATA SHEET, QUOTE (red), MENU. DATA SHEET opens the only PDF, or raises a small register when there are two (8 pages), or becomes PRODUCTS when there are none. On Contact it becomes DIRECTIONS. QUOTE carries ?equipment= for pre-fill. It slides away on scroll-down, returns on scroll-up or at the page end, and hides while you're typing.

08.1.3Today

Screenshot of upton.test today (/products/batch-furnaces/box-furnaces/ · 390 · first screen and end of page). Navigation is a 79×28 MENU button in the top-right corner, and the only visible phone number is in the footer at the very bottom.
Fig. 08.1Navigation is a 79×28 MENU button in the top-right corner, and the only visible phone number is in the footer at the very bottom./products/batch-furnaces/box-furnaces/ · 390 · first screen and end of page

08.1.4Specification

Why Upton

The mobile visitor is often a maintenance lead standing next to a line. They want to call Roseville or pull the U-BE sheet, not scroll 3,000px of prose.

Build noteseffort M

Markup in footer.php before wp_footer() (reading order), <nav aria-label='Quick actions'>, built from upton_get_phone() and upton_get_primary_cta(). The MENU key is a button with aria-controls='mobile-drawer'. Refactor mega-menu.js's single toggle variable (:337) into querySelectorAll, sync aria-expanded on all toggles, and remember the opener for focus return. Pad body by 64px plus the safe-area inset; scroll-padding-bottom 80px (WCAG 2.4.11). html:has(input:focus) hides it. Lift the Pressidium floating button. Icons from the FA subset plus an SVG symbol. Hidden ≥992px and in print. Reduced motion: no slide.

Risks

It costs about 64px of screen, hence hide-on-scroll. Two MENU controls: consider reducing the top bar to the wordmark. The drawer JS refactor needs a keyboard and VoiceOver pass.

What Upton must supply

none (optional: office hours so CALL could say 'Open now')

What we checkedskeptic: revise

The two-tel-link finding, button sizes and Pressidium position were verified. The CTA-band phase 0 lives in the quote rail. The quote rail's mobile bar is folded into this dock, so there's one bottom bar, not two.

Code, data and files

  • style.css:642
  • Pressidium button fixed at left 16 / top 780

Checked on the live site

  • 3 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).

Model
mobile-glove-mode
Tier
Quick win
Effort
SML (effort S)
Lens
Mobile
Sheet
08.2

Glove mode: 48px targets, 16px inputs, phone numbers you can tap

16px inputs, 44–48px targets and tappable phone numbers, so the site works with a gloved thumb on the plant floor.

Area Tap targets, forms, search fields

  • /contact/
  • /applications/
  • /products/
  • all pages
Verdict: keep
  • Wow 2/5
  • Impact 4/5
  • Brand fit 4/5

08.2.1Problem

MENU is 79×28, chips are 31px tall, footer links are 28px, and phone and email are 20px. Every Gravity Forms control and catalog search field uses 14px text, so iOS zooms in on every tap. Both Contact numbers are plain text, and none of the 16 controls has an autocomplete token.

08.2.2Concept

One small pass so everything works with a gloved thumb: 16px inputs everywhere (no more zoom jump), 44-48px hit areas under (pointer: coarse), both Contact numbers as big tel: links, and autocomplete tokens so the phone fills the form in one tap.

08.2.3Today

Screenshot of upton.test today (/contact/ · 390 · first three fields (Name, Company, Address)). Form text is 14px, so iOS zooms in on every tap, and the MENU button is 79×28.
Fig. 08.2Form text is 14px, so iOS zooms in on every tap, and the MENU button is 79×28./contact/ · 390 · first three fields (Name, Company, Address)

08.2.4Specification

Why Upton

Plant floors mean gloves, grease and one free hand, and every missed tap or zoom jump loses a buyer who was already motivated.

Build noteseffort S

Search inputs font-size 16px. GF variables: --gf-ctrl-font-size and --gf-font-size-primary 16px; under coarse pointers, --gf-ctrl-size 48px and choice size 28px (or inputSize 'lg'). Coarse-pointer padding on chips, the menu icon, and footer/legal links. The [phone] shortcode is shared with contact triage; hand-link the Kolene number in the page content. Turn on the GF autocomplete setting per field. No motion.

Risks

Bigger chips make the chip wall taller, so pair this with the chip rail from the ladder's phase 1. GF settings live in the admin.

What Upton must supply

Upton/Kolene to confirm both numbers and approve GF autocomplete.

What we checkedskeptic: keep

Every size was measured with Playwright, and the GF variable names were confirmed in the plugin CSS.

Code, data and files

  • functions.php:1065 (inputSize md)
  • catalog.css:55-68
  • style.css:642,1309

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).

Model
detail-screening-room
Tier
Feature
Effort
SML (effort M)
Lens
Product detail
Sheet
08.3

Shop-floor reel: a screening room for the videos

Product videos become a labeled film strip that opens a proper screening room, with keyboard controls and focus that comes back.

Area [videos] shortcode + YouTube facades

  • /products/salt-bath-furnaces/automated/hoist-assemblies/
  • /products/salt-bath-furnaces/automated/
  • /products/salt-bath-furnaces/automated/swing-arm-assemblies/
  • /
Verdict: keepMerges 2 ideas
  • Wow 3/5
  • Impact 3/5
  • Brand fit 5/5

08.3.1Problem

The hoist page has 7 videos in 178×100 tiles, and clicking one plays in place at 178×100. On a phone they stack into about 1,715px after all the text. The Automated page's three titles are screen-reader-only. Upton's only glowing footage (Swing Arm Quenching) is a thumbnail four levels deep.

08.3.2Concept

Videos become a film strip of labeled frames ('REEL 03 · BRIDGECRANE HOIST TRAVEL' in Lilex) with sprocket holes, snapping sideways on phones with an '03 / 07' counter. Clicking a frame opens a screening room: a native <dialog> on gray-900 with a 16:9 player up to 1100px (full-screen on phones) and the reel list alongside. Arrow keys switch clips and Esc returns focus to the frame. It's still youtube-nocookie and still click-to-load. Optional homepage band: three bolted sight-glass ports showing the glowing posters, which open the same dialog.

08.3.3Today

Screenshot of upton.test today (/products/salt-bath-furnaces/automated/hoist-assemblies/ · 390 · the videos stack, shown as two strips). Seven tiles in a 1,727px column that starts 3,311px down, after all the text.
Fig. 08.3Seven tiles in a 1,727px column that starts 3,311px down, after all the text./products/salt-bath-furnaces/automated/hoist-assemblies/ · 390 · the videos stack, shown as two strips

08.3.4Specification

Why Upton

Watching an Upton hoist move a load across a real line is the best proof on the site, and today it plays in a postage stamp.

Build noteseffort M

Server: videos_func splits the heading from the items and wraps them in .videos__reel (role=region, tabindex=0, labeled), so the reel works without JS. site.js loadVideo(): inside .videos, open one shared <dialog> built on first use, populated from sibling data-yt-id/title. On close, remove the iframe and explicitly focus the invoker. Facades elsewhere keep in-place behavior. <600px: grid-auto-flow column, 82% columns, scroll-snap. Sprockets are radial-gradient repeat-x. Always render a visible caption span. The counter uses an IntersectionObserver.

Risks

Horizontal scroll can go unnoticed; the peek and counter address that. The desludger clips are maintenance footage. Posters are soft (6-15KB).

What Upton must supply

none (optional: Upton to supply higher-res clips of glowing production loads)

What we checkedskeptic: keep

All measurements were reproduced. The mobile filmstrip and the sight-glass homepage band share the dialog.

Code, data and files

  • site.js:219-238
  • style.css:970-1006
  • posters in assets/images/video-posters/

Checked on the live site

  • 3 screenshots and scripted browser checks of upton.test (reviewers' working files, not bundled here).
Merged from2 ideas
  • mobile-video-filmstrip Film Strip Reel: every video in one swipe, not 1,700px (Mobile lens)
  • hero-sight-glass-reel Sight glasses: look inside the salt (Homepage lens)

Model
wild-desludger-404
Tier
Wildcard
Effort
SML (effort S)
Lens
Wildcards
Sheet
08.4

Lost in the bath: the clam shell desludger 404

The 404 page lowers a clam shell desludger into the bath and fishes out four links to get you moving again.

Area 404 page

  • /no-such-page-xyz/
Verdict: keepMerges 2 ideasLive demo
  • Wow 5/5
  • Impact 2/5
  • Brand fit 4/5

08.4.1Live demo

Live demo wild-desludger-404
404 page
Try a broken URL

Error 404

This page sank to the bottom of the bath.

We couldn’t find /no-such-page-xyz/. Send the desludger down to fish out something useful, or skip the show: the links in the tray already work.

Fig. 404 Ceramic salt bath, from Upton’s GA drawingNot to scale

The links and the search work from the first paint. The desludger is a bonus.

08.4.2Problem

The 404 body is Twenty Seventeen boilerplate ('It looks like nothing was found at this location. Maybe try a search?', still in the twentyseventeen text domain) with one search box and a lot of white space. WordPress redirect guessing rescues page slugs but not application terms: /nitriding/ is a hard 404.

08.4.3Concept

The headline reads 'This page sank to the bottom of the bath.' An SVG side view shows a glowing ceramic salt bath with sludge lumps on the floor, one tagged with the broken URL. A copper 'Deploy the clam shell desludger' button lowers a yellow grab on its chain: it opens, dips, closes, lifts, traverses and dumps four recovered links into the tray (Products, Applications, Search, Contact). Those links and the search were visible and working from the first paint. A footnote links to the real desludger page. Behind the joke there's a real fix: /nitriding/ now 301s to /application/nitriding/.

08.4.4Specification

Why Upton

It turns a dead end into a demo of an obscure Upton product almost nobody would otherwise find, and every gag comes from Upton's own copy.

Today on upton.test1 screenshot
Screenshot of upton.test today (/no-such-page-xyz/ · 1440 · full page). The Twenty Seventeen boilerplate ("It looks like nothing was found at this location. Maybe try a search?"), one search box and white space.
Fig. 08.4The Twenty Seventeen boilerplate ("It looks like nothing was found at this location. Maybe try a search?"), one search box and white space./no-such-page-xyz/ · 1440 · full page
Build noteseffort S

template_redirect at priority 9: a single-segment 404 that matches a product_app slug → 301 to the term link. 404.php: replace line 29 with template-parts/404-desludger (inline SVG about 8KB, role=img with a <title>) and fix the text domain. Links and search stay in the DOM first. desludger.js (~50 lines, is_404 only) toggles a class for the CSS keyframe sequence. Reduced motion: the button just highlights the links. The requested path is sanitized, escaped and truncated for the tag, with a 'Search for "xyz"' link.

Risks

Keep the joke short and never gate navigation behind it. Most of the effort is the illustration.

What Upton must supply

none

What we checkedskeptic: keep

Three 404 concepts (desludger, empty basket, alarm annunciator) are merged. The desludger wins because it surfaces a real product; the alarm's 301 fix is kept.

Code, data and files

  • 404.php:29
  • clam shell page copy ('clam-like jaws… collect and capture', 'dump stand… sludge collection tray')
  • probe2: /nitriding/ → 404

Checked on the live site

  • 1 screenshot and scripted browser check of upton.test (reviewers' working files, not bundled here).
Merged from2 ideas
  • motion-404-empty-basket Big swing: the 404 hoist comes up empty (Motion lens)
  • chrome-404-alarm 404 as a process alarm: 'ZONE NOT FOUND', with a reroute that works (Navigation lens)

Model
wild-shift-modes
Tier
Wildcard
Effort
SML (effort L)
Lens
Wildcards
Sheet
08.5

Night Shift, plus two secret modes (OVERTEMP and Blueprint 1937)

An opt-in Night Shift skin for the plant at 3 a.m., plus two hidden modes: an OVERTEMP alarm and Blueprint 1937.

Area Sitewide theme + easter eggs

  • /
  • /products/
  • /about/
Verdict: revise
  • Wow 4/5
  • Impact 2/5
  • Brand fit 3/5

08.5.1Problem

There's one light theme, no prefers-color-scheme rule, and nothing that rewards curiosity. The semantic token layer exists (style.css:190-205), but components still hard-code around 200 color literals.

08.5.2Concept

A DAY / NIGHT SHIFT rocker in the header re-skins the site as the plant at 3 a.m.: gray-900 surfaces, red eased to red-300/400, copper rules glowing faintly, and the page-header rule as a thin heated line. It's opt-in until every component passes a contrast audit. Type the Konami code and a PLC alarm bar drops ('ALARM 1937 · HI-HEAT ZONE OVERTEMP') with an ACK button. Type '1937' and the site redraws as its own blueprint, white on Kolene blue-800 with Lilex everywhere.

08.5.3Today

Screenshot of upton.test today (/ · 1440 · header and hero). One light theme with no dark mode, and nothing that rewards curiosity.
Fig. 08.5One light theme with no dark mode, and nothing that rewards curiosity./ · 1440 · header and hero

08.5.4Specification

Why Upton

It's memorable and shareable inside plants, and Blueprint mode is a visual wink to the Kolene family.

Build noteseffort L

A [data-shift=night] token remap, after tokenising the literals in five CSS files (the reason it's L), plus theming GF Orbital and the Pressidium banner. An 8-line head script sets data-shift from localStorage (no flash). The toggle is an aria-pressed button; theme-color updates. shift-modes.js ignores keys in fields, contenteditable or the open drawer. OVERTEMP is role=status with no sound and nothing faster than 3Hz. Escape exits. Print forces day. OS-follow only after the audit passes.

Risks

A half-themed dark mode is worse than none. The OVERTEMP bar must read as an obvious joke. Low lead impact: it's a delight feature.

What Upton must supply

none

What we checkedskeptic: revise

Effort was raised to L after counting the literals, and OS-follow was deferred until the audit.

Code, data and files

  • header.php:5
  • no prefers-color-scheme in theme CSS
  • literal counts: style.css 113 hex + 18 rgba, mega-menu.css 36, applications-grid.css 45

Sheet 09 / 11

Roadmap

The routing card

Three stations. Now is small, safe and reversible. Next builds the signature pieces. Later waits on content or sign-off only Upton can give.

Your shortlist 0 ideas lit

Press Shortlist on any idea's nameplate. The list is kept in this browser only, so copy it or email it before you close the page.

    Nothing lit yet.

    Email it

    Routing / shop travelerJob: upton.test redesign

    Drawn & Fired, in three stations

    Ideas
    35
    Operations
    26
    Rev
    A
    Issued
    2026-09-23
    1. Op 10

      Now

      Punched: start here
      1. 10.01Light the pilot: switch on the Products mega panel in code (all 8 families, process clusters), style current-page-ancestor and application terms, add a header phone number and Request Quote, set theme-color #CE2029
      2. 10.02Quote rail phase 0: include the CTA band on every product page from page.php with a product-specific heading, so no data sheet dead-ends
      3. 10.03Contact triage: remove the 'Chemicals' default, add 'Select…' placeholders, hide street/ZIP, make the phone tappable and first on mobile (after a notifications audit)
      4. 10.04'Since 1937' plus a computed years count in the hero, proof strip and tagline
      5. 10.05Search no-dead-ends: empty-state routes, WP search that finds processes and skips Home, SEO descriptions indexed in /applications/ search
      6. 10.06Glove mode: 16px inputs, 44-48px coarse-pointer targets, tel: links, GF autocomplete
      7. 10.07Heat ramp tokens in :root, muted eyebrows with pilot dots, copper nav underline, the 4px heat bar
      8. 10.08Un-crush photos (image out of the h2, proper sizes), the 808×606 card size and one archive photo grade
      9. 10.09Set menu_order on the 8 top-level product pages; fold synonyms in the homepage finder
      10. 10.10Favicon and U monogram, and 'Rated for' process stamps on data sheets
      11. 10.11Housekeeping: wrap every future animation-timeline rule in @supports AND prefers-reduced-motion: no-preference (the global reset doesn't stop scroll-driven animations)

      Upton sign-off

    2. Op 20

      Next

      Waiting on Now
      1. 20.01Furnace-room dark hero (KDL .kdl-hero--dark split, UPTON sign in frame, molten quench on the headline)
      2. 20.02Work-order rail: sticky quote card, pre-filled RFQ, pendant dock on phones
      3. 20.03Nameplate headers with model codes and the catalog → data-sheet View Transition
      4. 20.04Blueprint plates from the GA drawings (asset pipeline first), then drawn catalog cards and bento
      5. 20.05Heat-up hovers and copper focus everywhere; furnace-door CTA band
      6. 20.06Proof strip and footer nameplates (owner reversal sign-off needed)
      7. 20.07Process data sheets phase 1 (show existing descriptions, breadcrumbs, wide single cards; the breadcrumbs need owner sign-off)
      8. 20.08Drawing-sheet page header with sibling navigation; mono spec type and clause numbers
      9. 20.09Screening-room videos, parts counter, Kolene doorway and Furnace + Salt card

      Upton sign-off

    3. Op 30

      Later

      Needs Upton content or sign-off
      1. 30.01U-AUTO live line map (then reuse on the homepage and in the mega panel)
      2. 30.02Thermal Ladder, once Upton engineering signs off typical temperature bands
      3. 30.03Process × equipment matrix, after a product_app tag audit
      4. 30.04'What are you doing to the metal?' goal finder
      5. 30.05The Pour heritage timeline and the Road to 90 (needs archive dates and photos)
      6. 30.06Wildcards: X-ray cutaway, periodic table, shop traveler RFQ, desludger 404, Night Shift modes

      Upton sign-off

    Punched station = ready to startNothing on this card has shipped

    Sheet 10 / 11

    Appendix

    Everything we looked at

    10 critics each took one lens and wrote 10 grounded ideas. A skeptic checked every one against the theme code and the live site. 89 of the 100 made the page, most of them merged into a stronger idea.

    Also considered 11 on hold

    Good ideas that lost to a stronger one, or that wait on something else first.

    • Homepage lens · On hold

      'Why Upton' as an engineering title block

      Replace the pink Font Awesome squares with a title-block grid and an 'ENGINEERED IN ROSEVILLE' stamp; good, but it overlaps the drawing-sheet header and the nameplate.

    • Homepage lens · On hold

      Scroll the homepage through a heat-treat cycle

      A thermocouple rail narrating LOAD → PREHEAT → QUENCH → TEMPER as sections pass; charming, but low impact and it duplicates the line map's cycle.

    • Catalog lens · On hold

      Family data plate in the empty grid cell

      Fill unfilled catalog cells with a riveted family plate (drawing register, ±5 degrees, quote button); superseded by the drawn range tiers and quote paths.

    • Catalog lens · On hold

      The Yard: the whole line on the red rule

      A /products/ header of ~10 GA elevations on the page rule with a plotter reveal; great later, but it competes with drawn tiles for the same drawings.

    • Product detail lens · On hold

      Print it like a real Upton data sheet

      A print stylesheet with plate header, rail layout, URLs written out and contact margin boxes; cheap and worthwhile, fold it into the clause-numbers work.

    • Applications lens · On hold

      Draw the heat-treat cycle

      Preset time-temperature curves with Upton equipment under each plateau; wholly dependent on engineering-approved presets.

    • Navigation lens · On hold

      Sitemap as a plant layout schematic

      Live counts, family bays and a process index with :has() highlights; nice art direction on a low-traffic page.

    • Motion lens · On hold

      Quench-tank filtering

      A View Transition that sinks non-matching application blocks plus a Lilex odometer count; prototyped and it works, but it drops once the ladder replaces the chip wall.

    • Mobile lens · On hold

      Equipment ledger catalog rows on mobile

      88px-thumbnail ledger rows with a ROWS/PHOTOS switch that cut the /products/ scroll by ~75%; a strong follow-up if drawn cards don't ship.

    • Mobile lens · On hold

      Thumb-zone equipment console

      The mobile drawer as a bottom sheet with every family and search; valuable, but the lit-up mega data plus the pendant dock cover most of it first.

    • Mobile lens · On hold

      Shop traveler handoff card

      A share card with the data sheets, phone and QR for passing a product to procurement; low impact next to the quote and dock work.

    The ten lenses 100 ideas · grade + take + every idea

    CFirst impression & homepage10 ideas · 8 made the page

    Clean, accessible and well typeset, but nobody will remember it. For the first five seconds you're looking through a fogged window. The only photo of real Upton equipment is at opacity .58 under a white veil that reaches 98%. The image is centered vertically (object-position 100% 50%), so the UPTON sign hanging on the line's gantry is cropped out. The sibling makes the gap obvious: kolene.test's live homepage already runs KDL's documented .kdl-hero--dark, with a full-strength photo, a grid, and the headline "…since 1939". Upton's pale hero is the outlier in its own family.

    The copy undersells. "Over 80 years" appears in three places (the hero headline, the proof strip's "80+", and the footer tagline, which is the blogdescription option). The real figure from 1937 is 89 years, and 2027 is the 90th. The proof strip says one fact twice and makes the word CUSTOM its third stat. The bento is five empty tiles (1,086px tall at 1440, 1,580px on a phone). The applications teaser is a tidy directory. "Why Upton" is four stock Font Awesome glyphs in pink squares. The closing band is a plain #0a0d11 rectangle: the third "custom" line and the third contact button on the page (the second one labeled "Request Quote"), and it's missing the copper bottom bar KDL specifies. Nothing on the page is animated at load (document.getAnimations() returns 0). The only motion is a 2px lift on card hover.

    Meanwhile Upton owns strong material that never reaches the homepage:

    • Vector general-arrangement drawings in every spec PDF.
    • A real "AUTOMATION MAIN SCREEN" HMI (shown only as a 241px thumbnail, four levels deep).
    • Footage of loads glowing orange.
    • Concrete proof on the About page: the 1937 submerged-electrode design that became the industry standard, about 45,000 sq ft on 7 acres, and equipment pre-assembled and fully tested before shipment.
    • A logo whose U reads as a pot with a red probe dipping in.

    Right now the site reads as "some furnace OEM". It should read as "the people who put the electrode in the salt in 1937".

    Two notes for whoever builds any of this. First, I tested it: the theme's global reduced-motion rule (style.css:2149) does not stop scroll-driven animations; they still scrub. Every animation-timeline rule has to sit inside @media (prefers-reduced-motion: no-preference). Second, several ideas add dark bands. Ship at most one of the line mimic and the heat-cycle rail, and space the dark sections so the page doesn't turn into one black slab.

    First impression & homepage: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    hero-lights-out-molten-type Lights off, heat on: a dark split hero with the UPTON sign in frameThe hero switches to KDL's dark hero, laid out as a split panel. W4 I5 effort Mrevise Merged into 03.1
    hero-line-mimic The whole line, not just the furnace: a live redraw of Upton's own HMIA dark band right under the hero, headed 'The whole line, not just the furnace.' It holds a crisp SVG redraw of Upton's own HMI in KDL linework: a gantry rail, a yellow… W5 I4 effort Lrevise Merged into 05.1
    hero-sight-glass-reel Sight glasses: look inside the saltA dark steel strip holds three round furnace sight-glass ports. W4 I3 effort Mrevise Merged into 08.3
    hero-nameplate-proof Proof strip becomes a riveted Upton data plateThe three boxes become one wide equipment nameplate, the kind riveted to every furnace. W4 I4 effort Skeep On the page · 05.3
    hero-ninety-years Stop underselling: 'since 1937', and a 90th-anniversary seal for 2027Words that can go stale switch to 'since 1937', which never ages and echoes Kolene's own 'since 1939'. W3 I3 effort Srevise Merged into 05.4
    hero-blueprint-bento Bento tiles drawn from Upton's own GA drawings, and they heat upKyle's no-photo rule stays; the tiles become engineering drawings. W4 I4 effort Mrevise Merged into 04.1
    hero-process-thermometer Applications on a glowing thermometerThe teaser becomes a large horizontal temperature scale from 0 to 2,400 °F, whose band glows through the incandescence of steel: black, then dull red, cherry, orange… W5 I4 effort Mrevise Merged into 06.1
    hero-title-block-why 'Why Upton' as an engineering drawing title blockThe section is drawn as the title block from the corner of an engineering drawing: a heavy outer rule, unequal cells, and tiny Lilex field labels with the claims set… W4 I3 effort Skeep Not on the page
    hero-cta-furnace-door The CTA band is a furnace door that lifts openThe band becomes a vertical-lift furnace door. W4 I4 effort Mrevise Merged into 03.4
    hero-heat-cycle-scroll Wildcard: scroll the homepage through a heat-treat cycleA slim thermocouple rail on the left edge of wide screens, topped by the U-pot mark from the logo and a Lilex °F readout labeled 'ILLUSTRATIVE CYCLE'. W4 I2 effort Mrevise Not on the page
    CProduct catalog & family pages10 ideas · 8 made the page

    The catalog is built properly but looks like a pile of old jobsite snapshots. On the good side: the KDL cards are clean, the heading levels are right, hover and lazy-loading work, and the family pages have the new data-sheet body. The photos are the problem, and part of it is the theme's fault, not just the source material. Seven sources really are tiny: the four family images, car bottom and bell at 350×280, and the PLC at 241×189. All of them are stretched to 403×302 CSS px, about 2.3× on retina. But another 15 cards have sources from 410 to 1920px wide (parts washers 1920×1440, graphite 1920×1440, externally heated 1920×2560, Scott and swing arm 1024×768, the 640×480 salt bath set) and are still served as the 350×280 hard crop with no srcset. The only card size is 5:4 while those uploads are 4:3, so WordPress offers no larger candidate. The color casts clash too: a cyan car bottom, a sky-blue batch furnace, a yellow-and-blue pit furnace, a green belt furnace. Nothing tells a buyer this is one engineered line. All eight top-level product pages have menu_order 0, so /products/ sorts alphabetically. Clam Shell comes second and the flagship Salt Bath family comes sixth, even though the homepage bento features it. The /products/ search only sees the 8 top-level cards. "car bottom", "austemper", "tempering" and "U-CBE" all end at "No products match these filters." with a "Clear filters" button on a page that has no filters. Meanwhile /applications/ and the site search both find those terms. Card excerpts are boilerplate, so Box and Car Bottom differ only by their photos. Every catalog grid at 1440 ends with an empty cell. Batch and Specialty are the worst, with one half-empty row. The biggest missed opportunity sits in the Downloads register: 17 product pages link 21 one-page vector general-arrangement (GA) drawings in the same drafting hand. One of them, U-AUTO, draws a whole automated line with seven Upton products labeled on it. Functional but forgettable, with one dead-end bug.

    Product catalog & family pages: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    catalog-drawn-not-photographed Drawn, not photographed: GA elevations as the card faceEach card's face becomes the front elevation from Upton's own GA drawing: black linework on a warm drafting-paper ground with a faint red 20px grid. W5 I4 effort Mrevise On the page · 04.1
    catalog-foundry-grade Sharpen, then grade: foundry duotone plus a heat-up hoverStep one makes every card as sharp as its source allows. W3 I4 effort Srevise Merged into 04.5
    catalog-model-data-plates Stamp the model number: data plates, real differences and a one-tap GA drawingEach card that has a model code gets a small riveted steel tag in the corner of the media box: 'MODEL' in graphite and 'U-CBE' in Upton red, in Lilex caps. W3 I3 effort Srevise Merged into 05.2
    catalog-furnaces-first-range Furnaces first: /products/ as a two-tier range instead of an alphabetStep zero takes two minutes: set menu_order in wp-admin to match the homepage (Salt Bath 1, Batch 2, Pit 3, Specialty 4, then support). W3 I5 effort Mrevise Merged into 04.1
    catalog-search-the-whole-line Search that knows the whole line and never dead-endsStep one, cheap: the empty state stops dead-ending. W3 I4 effort Mrevise Merged into 06.6
    catalog-process-matrix The salt bath matrix: which furnace runs which processUnder the salt bath grid sits a full-width process matrix in data-sheet style. W4 I4 effort Mrevise Merged into 06.3
    catalog-family-data-plate Fill the hole: a family plate in the empty grid cellWhere a family grid leaves space, a family plate fills it: a graphite card styled like a riveted steel nameplate with four corner rivets, stamped Lilex caps and a red… W3 I3 effort Srevise Not on the page
    catalog-heat-scale The Heat Scale: a black-body process ruler across the whole lineA horizontal temperature ruler from about 200°F to 2400°F, painted as a black-body glow gradient (black, dull red, cherry, orange, yellow, near-white) with Lilex tick… W5 I3 effort Lrevise Merged into 06.1
    catalog-auto-line-live The U-AUTO line, live: Upton's own line drawing with a traveling hoistAbove the four cards, a full-width line diagram redrawn from Upton's own U-AUTO elevation in KDL style: steel-gray linework on a floor rule, with Lilex station labels… W5 I4 effort Lrevise On the page · 05.1
    catalog-the-yard The Yard: the whole line standing on the red rule (wildcard)The /products/ header becomes a panoramic equipment yard: about 10 elevation views standing side by side on the header's existing red bottom rule as if it were the shop… W5 I3 effort Lrevise Not on the page
    CProduct detail pages10 ideas · 9 made the page

    The data-sheet layout gave the product pages a real structure: headings sit in the rail, the text holds a readable width, the hairline rules are disciplined, and the downloads read as a list of documents. What's inside it is still a 2018 brochure. No leaf page has a call to action in the body. It goes text, a "PDF" row, then the footer, and Scott Connected Transformers has no links in the body at all. At 1440px the grid leaves a 245px third column empty from top to bottom (measured: "240px 672px 244.8px").

    Every leaf page already has a large featured image in the media library: box 1920×1536, parts washers 1920×1440, graphite 1920×1440, externally heated 1920×2560. The header never shows it, and the body shows a 300px crop. On Internally Heated and Mar-Ausquenching the photo sits inside the <h2>, so it shrinks to a 108px thumbnail and the heading breaks one word per line. The 8 Three Columns pages never get the rail, and on a phone the graphite furnace first appears 3,082px down. Click a hoist video and it plays in a 178×100px tile. 17 pages carry the same "as some of our competitors would attempt to do" section, styled as if it were a spec. The 37 application terms are assigned to these pages (box 9, pit 11, internally heated 21) but never shown on them.

    The biggest miss: all 21 PDFs in the downloads lists are single-page vector general-arrangement drawings (zero raster images). Their titles carry Upton model codes (U-BE, U-E, U-QS, U-HOIST, U-AUTO…), and the callouts name the same parts the copy describes (recirculation fan, brush connector, pusher assembly, chloride conveyor, heatsaver). The U-AUTO drawing lays out a whole automated line with model codes on its stations, and it's only linked from the PLC Control Systems page. The most convincing thing an engineer could see is hidden behind a text link. Grade: C. The layout is right, but the pages don't sell anything yet.

    Product detail pages: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    detail-live-blueprint The drawing is the hero: live blueprint platesEach product page gets a 'General arrangement' section. W5 I4 effort Lrevise On the page · 04.2
    detail-line-map Run the line: the U-AUTO drawing as a live system mapThe page opens with a full-width line map redrawn from the U-AUTO elevation in the same blueprint style as the product plates. W5 I4 effort Lrevise Merged into 05.1
    detail-nameplate-header Every machine gets its nameplateOn leaf product pages the header band becomes a stamped steel data plate: a finely brushed gray-100/200 surface, four rivets and a red-500 hairline border. W4 I4 effort Mrevise On the page · 05.2
    detail-quote-rail Work-order rail: the empty third column starts sellingThe empty column becomes a sticky work-order card. W3 I5 effort Mrevise On the page · 07.1
    detail-process-heat-ladder Process range chart: applications on a glowing temperature scaleA 'Process range' section (rail heading, chart in the text column) with a shared temperature axis running roughly 200–2,400°F, °C beneath. W4 I4 effort Mrevise Merged into 06.1
    detail-screening-room Shop-floor reel: a real screening room for the videosThe videos become a film strip of labeled frames ('REEL 03 · BRIDGECRANE HOIST TRAVEL' in Lilex) that scrolls sideways with snap points on phones. W3 I3 effort Mkeep On the page · 08.3
    detail-parts-counter Parts counter: bin labels, 'fits', and a request slipThe page becomes a parts counter. W3 I4 effort Mrevise On the page · 07.4
    detail-rescue-crushed-photos Un-crush the ironThree small fixes. W2 I4 effort Mrevise On the page · 04.6
    detail-numbered-sections Clause numbers, deep links, and a sign-off stampEvery rail heading gets a red Lilex section number (01, 02, 03…), the way a data sheet numbers its clauses. W2 I3 effort Skeep Merged into 04.4
    detail-print-data-sheet Print it like a real Upton data sheetA 'Print data sheet' button (in the quote rail) plus a print stylesheet that turns the page into an Upton data sheet. W2 I3 effort Skeep Not on the page
    DApplications directory & finder10 ideas · 9 made the page

    The Applications area is a phone book with a filter bolted on. At 1440 /applications/ runs 5,659px, and at 390 it runs 10,099px. It is 37 alphabetical headings over 120 identical copper-diamond bullets, sitting under a wall of 38 chips. Each chip filters to exactly its own heading, so the chips add nothing the headings don't already do. On a phone the toolbar is 844px tall and the first result starts at y=1221. Nothing on the page says what a process does, how hot it runs, or what metal it's for. Search only matches term names and product titles: "distortion", "hardness", "soften", "HSS", "nickel", "burn-off" and "case hardening" all return 0, "steel" returns 2, and "salt" returns 30. Each of the 37 /application/ pages is a bare header, "PRODUCTS / Solutions for X" and a card grid. On Annealing, four of the six cards share the same "We manufacture … electric or gas fired heating systems. The design of the heating systems provide…" excerpt, and five single-product processes leave two empty columns. Every term does have a ~150-character meta description, but the 2026-09-23 SEO migration wrote those, not Upton. They exist only in the local DB, and they list equipment rather than explain the process. Term breadcrumbs are off until Kyle decides. The taxonomy has four duplicate pairs with identical product sets: Tempering/Drawing, Martempering/Marquenching, Nitinol Processing/"Ni-Tn Memory Shaping Setting", and Tool Room/Tool Steel Heat Treating. It also has one term that isn't a process (Ancillary Parts), and Parts Washers isn't tagged at all. Links only run one way: no product page links to an application page. The "applications" prose on Internally Heated, Ceramic and Externally Heated also names processes (dip brazing, case hardening) that those products aren't tagged with. Underneath is a clean dataset: 16 products (13 furnace families across salt bath, batch, specialty and pit) by 37 terms, exactly 120 pairings, on a subject (heat) that begs to be visualized. The section is accessible and fast, and the #filter= deep link works. It just doesn't help an engineer choose. D.

    Applications directory & finder: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    apps-thermal-ladder The Thermal LadderThe chip wall and the A–Z list are replaced by a single chart. W5 I4 effort Lrevise On the page · 06.1
    apps-what-are-you-doing-to-the-metal What are you doing to the metal?The directory opens with one question set large in Plex Bold: 'What are you doing to the metal?' The visitor answers by pressing one of nine stamped steel plates… W4 I5 effort Mrevise On the page · 06.4
    apps-process-data-sheet Process data sheets, not product dumpsEach application page is rebuilt in the same data-sheet format the product pages just got. W3 I4 effort Mrevise On the page · 06.2
    apps-compatibility-matrix The Process × Equipment MatrixA dense compatibility chart like the back page of a 1960s equipment catalog. W4 I4 effort Mrevise On the page · 06.3
    apps-heat-treat-route-builder Draw the heat-treat cycleAn interactive time–temperature chart, the diagram every heat treater draws on a whiteboard. W5 I4 effort Lrevise Not on the page
    apps-homepage-pyrometer-strip Homepage: the pyrometer stripThe grid becomes one full-width pyrometer bar from 200 to 2400°F that heats up left to right as it scrolls into view: steel gray, straw and temper blue, then dull red… W4 I3 effort Mrevise Merged into 06.1
    apps-shop-talk-search Shop-talk search and 'a.k.a.' platesSynonyms collapse into single entries carrying small stamped 'A.K.A.' plates: 'Tempering · a.k.a. W3 I4 effort Mrevise Merged into 06.6
    apps-rated-for-stamps 'Rated for' process stamps on every product data sheetEach product data sheet gets a 'Processes' section in its left rail holding a strip of stamped tags. W3 I4 effort Srevise On the page · 06.5
    apps-heat-scale-tokens Heat color tokens: temper blue to white heatAdd a heat scale to the tokens, built almost entirely from colors KDL already has. W3 I3 effort Srevise Merged into 03.2
    apps-say-what-it-is Show the descriptions that already existAn afternoon's upgrade. W2 I4 effort Srevise Merged into 06.2
    CNavigation, header, footer & utility pages10 ideas · 9 made the page

    The chrome is well built underneath and generic on screen. The biggest finding is one this pitch underplayed: on product data sheets at desktop, the only route to a quote is the plain "Contact Us" nav link. Box Furnaces, Hoist Assemblies and Parts Washers have no Request Quote button and no CTA band; the band renders only on the home page, /products/, /applications/ and application terms. The Products mega panel (template-parts/mega-menu.php and its walker, CSS and JS) is finished but never renders, because no menu item carries the mega-menu class, and the DOM holds 0 .mega-panel. Current-state styling misses current-page-ancestor, so nothing lights up on any product sub-page or application term. The mobile drawer has no current styling at all. Global search has no entry point in the header or footer; the site search box appears only on the 404 and empty-results pages. /products/ and /applications/ do have page-scoped catalog filters. WP search misses processes: ?s=nitriding finds nothing, ?s=austempering returns 1 page although 5 are tagged, and ?s=hoist lists Home. Results still run on Twenty Seventeen's excerpt template and pagination helpers. The 404 page uses the KDL page header, but its body is Twenty Seventeen boilerplate, still in the twentyseventeen text domain. The footer uses legacy #ebebeb gray and a solid red bar instead of KDL §2.11. Its tagline says "over 80 years" (it's 89) and leaves "years" alone on a line at 1440. At 390px the footer logo is about 400px wide. "Need Salt?" looks exactly like an internal link. The foundations are good: focus traps, inert, reduced-motion handling, redirect guessing for pages, and a sentinel-driven condensed state. That makes this mostly a matter of switching on what's built and giving the chrome the furnace-builder personality it lacks.

    Navigation, header, footer & utility pages: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    chrome-light-the-pilot Light the pilot: switch on the mega menu you already built, and add a quote buttonThe Products item opens the existing panel with all 8 families in a 2×4 grid of thumbnail rows (every family already has a featured image and an excerpt). W2 I5 effort Srevise On the page · 07.2
    chrome-kolene-portal Need Salt? becomes a signposted doorway to KoleneThe last nav item moves behind a hairline divider and takes Kolene's color. W3 I3 effort Srevise Merged into 07.5
    chrome-thermocouple-rule Thermocouple rule: a scroll gauge that glows hotter as you readOnce the header condenses, its bottom edge becomes a 3px thermocouple. W3 I2 effort Skeep Merged into 03.2
    chrome-context-bar Condense, don't just shrink: a header that knows the page and names the quoteScroll past the page header and the 120px bar compresses to a 64px strip without moving the page. W4 I4 effort Mrevise Merged into 07.1
    chrome-command-palette Press / to find any furnace: an engineer's command palette, plus a search that finds processesA header button ('Search equipment, processes, PDFs' with a / key hint) opens a centered, gray-900 operator-panel palette. W4 I4 effort Mrevise Merged into 06.6
    chrome-route-sheet-crumbs Route-sheet breadcrumbs with sideways jumpsThe trail becomes a route sheet: each level is a station on a thin line, like the load path of a salt bath line. W3 I3 effort Mkeep Merged into 04.3
    chrome-footer-data-plate The footer as a riveted equipment nameplateThis reverses the owner's 'leave the footer structure alone' decision. W4 I3 effort Mrevise Merged into 05.3
    chrome-404-alarm 404 as a process alarm: 'ZONE NOT FOUND', with a reroute that worksThe page header becomes an annunciator panel. W4 I2 effort Mrevise Merged into 08.4
    chrome-sitemap-plant-layout The sitemap as a plant layout schematicThe sitemap becomes a one-screen plant layout drawn like a piping-and-instrument diagram. W4 I2 effort Mkeep Not on the page
    chrome-cutaway-mega Cutaway mega panel: hover a component, watch it light up on the line (wildcard)Open Products and the right two-thirds of the panel is a crisp line-art cutaway of an automated salt bath line in KDL grays. W5 I3 effort Lrevise Merged into 05.1
    DConversion, trust & storytelling10 ideas · 10 made the page

    Upton loses buyers right when they're most ready to talk. An engineer who reads a product data sheet all the way through (Box Furnaces, Car Bottom, Parts Washers, Scott Transformers, Spare Parts) reaches Downloads and then the footer. page.php never includes the CTA band. The band only appears on 40 pages: home, /products/, /applications/ and the 37 application archives. The desktop header has no phone number and no quote button. The mega-menu panel with its "Talk to an engineer" callout is fully built but never renders, because the Products menu item doesn't have the mega-menu class. On /contact/, the Gravity Form in Upton's own install is a partly adapted Kolene form. 14 of its 16 inputs are required, including a full street address. "I'm looking for" defaults to Chemicals and the equipment field defaults to "Salt Bath Furnace…", so an untouched submission is filed as a salt-bath chemicals lead. The page's phone number is plain text, not a tel link, and on a phone it sits about 2.8 screens down, below the Submit button. The About page is five paragraphs and a 190×135 aerial photo. Nothing on the site explains what "A Kolene Company" means, even though Kolene's own history table lists Upton first (1937, two years before Kolene). The hero, proof strip and footer all say "80+"/"over 80 years" when it has been 89. The trust material is already published: triple-wall salt absorption of 5–8% vs 140–150%, 100%-duty transformers that can be repaired rather than replaced, and equipment preassembled and fully tested before shipment. It's buried mid-paragraph. Critic corrections: the spare-parts page already has a captioned photo gallery of all eight parts (the problem is that they're dead ends, not that they're plain text). The data-sheet third column is 245px at 1440 and shrinks fast below that. Three salt-bath detail pages use the column layout, not the data-sheet grid. The contact form isn't shared with kolene.com (separate installs).

    Conversion, trust & storytelling: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    convert-contact-triage Stop filing furnace buyers under "Chemicals"Change the H1 to "Talk to an Upton engineer" and add a one-line lede. W2 I5 effort Srevise On the page · 07.3
    convert-header-hotline Header hotline: phone + quote button on every pageThe empty right side of the desktop header becomes a small control panel. W2 I4 effort Skeep Merged into 07.2
    convert-datasheet-quote-plate Data-plate quote card beside every data sheetA steel data plate goes into the empty column, like the nameplate riveted to the furnace itself. W4 I5 effort Mrevise Merged into 07.1
    convert-context-carry-tickets Quote tickets that remember where you came fromCTAs become tickets. W3 I4 effort Mrevise Merged into 07.1
    convert-process-sheet-rfq The Process Sheet: a guided RFQ that writes its own spec/contact/ becomes a two-column engineering traveler. W5 I4 effort Lrevise Merged into 07.6
    convert-parts-counter Parts Counter: a fast lane for people who already own an UptonThe existing part photos become shipping-tag cards: a punched hole with a string, the caption stamped in mono, and an "Add to request" button with a quantity stepper. W4 I4 effort Mrevise Merged into 07.4
    convert-proof-ledger The Spec Ledger: specifics instead of adjectivesA KDL data-table component styled as an engineering data sheet (not a "certificate"). W4 I4 effort Mrevise Merged into 05.3
    convert-cta-band-furnace-door Open the furnace door: a CTA band that actually glowsThe band becomes a furnace mouth. W5 I3 effort Mrevise Merged into 03.4
    convert-heritage-pour The Pour: 1937 → now, told as molten metalAbout opens with a huge Lilex "1937" and a headline taken from the page's own claim, e.g. W5 I4 effort Lrevise On the page · 05.5
    convert-furnace-salt-handshake Furnace + Salt handshake card (Upton red meets Kolene blue)A compact two-tone card. W3 I3 effort Skeep On the page · 07.5
    CMotion & interaction10 ideas · 9 made the page

    The C grade holds. Upton's motion layer is carefully built but almost none of it is switched on. mega-menu.js handles hover intent, touch, arrow keys, inert-while-fading and transitionend timing. The drawer has a real focus trap. The filter announces results to screen readers. But the theme has zero @keyframes, and document.getAnimations() returns 0 on the homepage. The Products mega panel never renders because no menu item has the mega-menu class. Turning it on as-is would show only 6 of the 8 categories and an A-heavy alphabetical list of applications. The nav's "you are here" states are broken in three ways: 1) hover looks exactly like the current-page marker, so Home and a hovered Products both get the red underline; 2) the product data sheets mark nothing, because WordPress gives Products current-page-ancestor and the CSS never styles that class; 3) /application/* pages mark nothing either. The condensed header stays 120px tall and only shrinks the logo. One chip click on /applications/ drops the page from 5,659px to 1,548px in a single frame. Moving from the catalog to a data sheet is an instant cut. It isn't a white flash (Chrome holds the old paint), but nothing carries over between pages. Heat is the whole product, and nothing on the site ever looks hot. KDL §4.1 scroll reveal was never implemented. I prototyped three ideas on the real Upton markup by injecting CSS/JS through Playwright, with no site changes: cross-document View Transitions, the filter transition, and the scroll-linked header. All three work in Chrome 154, and the tests turned up concrete fixes that are now in the build notes. There are two reduced-motion traps to fix first. First, the global reset (style.css:2149-2157) does not stop scroll-driven animations; I re-ran the test and the bar still went 0 → 0.5 → 1 under reduce. Second, the reset doesn't zero animation-delay or transition-delay, so staggered entrances still hold content invisible for their delay. Every idea below therefore needs to sit inside @media (prefers-reduced-motion: no-preference). Build order: nav/mega fixes, then the catalog→data sheet morph and filter quench. After that, pick at most two of the heat treatments, so heat stays a signature rather than wallpaper.

    Motion & interaction: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    motion-wake-the-mega-menu Wake the sleeping mega menu and fix the nav's you-are-here statesTurn the panel on, fixed so it lists all 8 categories and a curated set of applications, and give it an entrance. W3 I4 effort Srevise Merged into 07.2
    motion-blackbody-heat-hovers Black-body hover states: everything you touch heats upAdd a heat ramp as tokens. W4 I3 effort Skeep Merged into 03.3
    motion-catalog-to-datasheet-morph Catalog → data sheet: the card becomes the pageTurn on cross-document View Transitions. W5 I3 effort Mrevise Merged into 05.2
    motion-filter-quench Quench-tank filtering on /applications/Wrap the filter in a same-document View Transition. W4 I3 effort Mrevise Not on the page
    motion-proof-strip-odometer Mechanical odometer proof stripWhen the strip comes into view, each number runs like the drum counter on an old furnace hour-meter. W3 I2 effort Skeep Merged into 05.3
    motion-header-heat-gauge A header that really condenses, plus a heat-gauge reading barUse a negative sticky top: the header sticks at top: -40px, so its visible height drops from 120px to 80px over the first 40px of scroll and nothing below ever shifts. W3 I3 effort Mrevise Merged into 03.2
    motion-process-temperature-glow Every application shows its process temperature: a thermometer in each rowEach finder row becomes a small thermometer. W4 I3 effort Mrevise Merged into 06.1
    motion-cta-furnace-mouth The CTA band opens like a furnace door, and the button glows like a filamentAs the band scrolls into view, a glow rises from its bottom edge, like the light that spills out when a furnace door lifts. W3 I3 effort Srevise Merged into 03.4
    motion-hero-live-salt-bath Big swing: a hero that comes out of the furnaceMake the page open hot. W4 I3 effort Lrevise Merged into 03.1
    motion-404-empty-basket Big swing: the 404 hoist comes up emptyA small SVG scene of an automated salt-bath line drawn in KDL grays with red accents: an overhead hoist rail, a trolley, a basket on chains, and three tanks, the middle… W5 I2 effort Mkeep Merged into 08.4
    CArt direction, type, color & texture10 ideas · 10 made the page

    Upton's site is clean, accessible and correctly tokenised, but it has no art direction of its own. It reads as the Kolene template with a red skin. The equipment glows cherry-red at working temperature, yet nothing on the site looks hot.

    Hero. The one real hero photo, Upton's automated salt bath line, is at 58% opacity under a white veil (98% on the left, fading to 30% on the right). At 1440px the crop cuts off the UPTON sign on the gantry, and at 390px it is almost invisible under a 90–97% veil. The only dark surface is a flat #0a0d11 CTA band. It already has a Customizer image option (upton_cta_band_image), but that option is unset.

    Red and copper.

    • Red is spent as label ink. The homepage has 29 red text elements: eyebrows, proof labels, headline words, buttons, and 16 finder arrows.
    • Eyebrows compute to #B51B23, which sits next to --kdl-danger #b3261e. That goes against KDL §3.1, which calls for muted-gray eyebrows.
    • The nav current/hover underline is red, where KDL §2.9 gives that job to copper.
    • Copper does exist: button hover underlines, focus rings, input focus, the application-list bullets and the bento tile borders. But every card, finder-link and nav hover goes red, so copper never reads as the signal.

    Type. Lilex, the engineering voice, is 0 of 17 text elements inside the Box Furnaces data sheet and 2 of 228 on /applications/. Standards and figures (NEC, NFPA, FM, IRI, SCR/PLC, "250 pounds", "+/-5 degrees") are all set in body sans. There are no tabular numerals, and every H1 is 44px, from /products/ down to Hoist Assemblies.

    Icons, photos, brand mark.

    • Icons are stock Font Awesome on pink squares.
    • The legacy photos span decades and paint colors. On /application/annealing/ they read as a random clip-art shelf.
    • There is no favicon: /favicon.ico is a 0-byte file and site_icon = 0.
    • theme-color is #c00, not brand red.
    • On phones the logo collapses to 0×0 and a plain-text red bar replaces it.

    Raw material already on the site.

    • The logo "U" has a red bar dipped into it (it reads as an electrode in a pot).
    • The equipment wears a black UPTON enamel plate with stenciled serials.
    • 13 product pages carry real model designations: U-BE, U-BCE, U-CBE, U-E, U-HS, U-PE, U-T, U-QS, U-ABCD, U-AUTO, U-LBE, U-CONT, plus U-Swingarm and U-Carousel.
    • The hoist page names real product lines: MightyMatic, MasterMatic, HeatSaver.

    Proposal. One coherent system, all expressed as KDL tokens:

    • heat colors for color
    • drawings for texture
    • stamped mono type for data
    • a warm-black "furnace room" for drama
    Art direction, type, color & texture: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    art-blackbody-palette Red is a temperature, not a highlighterAdd a 7-step 'Roseville heat ramp' to KDL in which Upton red is literally step 3, cherry. W3 I4 effort Srevise Merged into 03.2
    art-heat-up-hover Everything you touch heats upExtend KDL's existing copper hover underline into one signature micro-interaction used across the site. W3 I2 effort Srevise Merged into 03.3
    art-archive-photo-grade One archive, one gradeGive every product image one 'shop-floor archive' treatment on light pages: - Saturation drops hard (about 25%) and a single warm-shadow tone curve pulls tungsten… W3 I4 effort Mrevise Merged into 04.5
    art-upton-data-plate The nameplate: a riveted data plate on every productA new .upton-plate KDL component modeled on the physical plate: a near-black enamel rectangle with a subtle bevel, four rivets, the UPTON maker mark in white condensed… W4 I4 effort Mrevise Merged into 05.2
    art-drawing-sheet-header Every page is a drawing sheetTurn the header into an engineering drawing sheet: - KDL's 48px grid is re-inked in gray-400 at about 5%, with a 240px major grid, fading in from left to right so the… W4 I3 effort Mrevise On the page · 04.3
    art-two-voice-type Sans for claims, mono for anything you could measureWrite the rule down and let the theme enforce it. W3 I3 effort Mrevise On the page · 04.4
    art-section-drawings The U is a salt pot: a cutaway drawing systemBuild a line-drawing system from the logo's U: 1.5px strokes, square caps, a 24px icon grid, plus 160px cutaway 'section drawings' of each equipment family. W5 I4 effort Lrevise Merged into 04.1
    art-thermal-lens-hero Thermal lens: look at the line the way the process sees itSwitch the hero to a dark 'furnace room' on warm black (#120d0b). W5 I4 effort Mrevise Merged into 03.1
    art-glow-scale-applications The glow scale: applications sorted by heatA horizontal black-body thermometer runs across the top of /applications/, glowing from black through dull red, cherry, copper, orange and yellow to white. W5 I3 effort Lrevise Merged into 06.1
    art-u-monogram Put the U on everything smallExtract the U and its red element as a crisp SVG monogram and use it wherever the brand appears small. W3 I4 effort Srevise On the page · 03.5
    CMobile experience10 ideas · 7 made the page

    At 390px the site is clean and carefully built. Nothing overflows sideways, the drawer is a real focus-trapped dialog that returns focus when you press Esc, the fonts are self-hosted and metric-matched, and nothing is broken. It is still a desktop site poured into one column, not a tool for someone standing next to a furnace with a phone in one hand. The two things a plant-floor visitor wants are calling Roseville and getting the data sheet, and both are hard to reach. Every page has exactly two tel: links: one inside the closed drawer (302x26) and one in the footer (109x20, at y=4,437 of 4,657 on Box Furnaces). The Contact page's two numbers, (586) 771-1200 and Kolene's salt line (313) 273-9220, are plain text you can't tap. Every page rendered by page.php has no CTA band: all 21 product detail pages, /products/, the category pages, /applications/, /about/ and /contact/. That includes the catalog pages, because they run the default template plus a shortcode, so products-catalog.php and applications-gallery.php never render. Only the homepage and /application/* have a Request Quote button outside the drawer. On 9 product pages the one_third sidebar (photo, PDFs, videos) drops below all the prose. Hoist Assemblies shows its first product photo at y=2,292 and then 1,715px of stacked video frames. The home hero fades Upton's own salt-bath-line photo to a ghost. The proof strip takes 423px, half a screen, for three stats, and the photo-less bento stacks to 1,080px. /applications/ opens with an 844px wall of 38 chips 31px tall. Tapping one changes nothing visible: the only result count is a screen-reader live region, and the results sit at y=1,221. Every form and search field is 14px, so iOS zooms in on each tap. The 1,034px footer repeats on every page (the owner left it alone, and these ideas don't touch it). Heat and steel appear nowhere on the phone, and 1937 appears once, as a plain stat block. It's competent and generic: C work.

    Mobile experience: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    mobile-pendant-dock The Pendant Dock: Call, Data sheet, Quote, Menu under your thumbA dock fixed to the bottom of the screen, styled like the pendant control station hanging from an Upton hoist: gray-800 steel, a 3px copper top edge, four 60px keys with… W3 I5 effort Mrevise On the page · 08.1
    mobile-glove-mode Glove Mode: 48px targets, 16px inputs, tappable phone numbersA small pass that makes every control work with a gloved thumb. W2 I4 effort Skeep On the page · 08.2
    mobile-video-filmstrip Film Strip Reel: every video in one swipe, not 1,700pxBelow 600px the videos become a horizontal film reel. W4 I3 effort Skeep Merged into 08.3
    mobile-hero-sightglass Sight Glass Hero + Equipment Data PlateBelow 900px the photo comes out from behind the veil and becomes a full-bleed 4:3 'sight glass' at full strength, framed so the UPTON sign on the gantry is in view. W4 I4 effort Mrevise Merged into 03.1
    mobile-pocket-datasheet Pocket Data Sheet: numbered section strip, molten read gauge, jump-to-the-goods rowThe data sheet gets a pocket edition. W4 I4 effort Mrevise Merged into 04.4
    mobile-equipment-ledger Equipment Ledger: catalog rows that fit a screenBelow 640px, catalog cards become an equipment ledger: ruled rows like a parts list. W3 I4 effort Mrevise Not on the page
    mobile-contact-two-lane Two-Lane Contact: call now, or send your process in three heat-up stepsThe page opens with two lanes. W3 I4 effort Mrevise Merged into 07.3
    mobile-thumb-console Thumb-Zone Equipment Console: the drawer becomes a bottom sheet with the whole catalogMENU raises a bottom sheet with a drag handle instead of a side drawer. W4 I4 effort Mrevise Not on the page
    mobile-heat-scale-finder Heat Scale: turn the thermometer to find your processThe top of /applications/ becomes an instrument panel with a tall thermometer (about 300px) running from about 200°F to 2,300°F beside a big Lilex readout. W5 I4 effort Lrevise Merged into 06.1
    mobile-floor-pass Shop Traveler: hand this furnace to engineering or procurement in one tapA 'SHOP TRAVELER' action, the routing card that travels with parts through a heat-treat shop. W4 I2 effort Mrevise Not on the page
    CWildcards — big swings10 ideas · 10 made the page

    The site is well built and completely cold. The KDL tokens, the data-sheet product pages and the accessible nav are solid, but the company sells controlled heat and nothing on the site glows.

    • Hero: the photo of Upton's own salt bath line is set to 58% opacity under a veil that is 98% white (applications-grid.css:34,44). At 390 px it is effectively gone.
    • Bento: the biggest tile on the homepage is an empty red rectangle.
    • Best footage buried: the most dramatic clip Upton owns, a glowing load in "Swing Arm Quenching", is a 178×100 px thumbnail in the sidebar of a fourth-level page.
    • Line diagram: Upton's own PLC "Automation Main Screen" is the only picture of a line on the site. It is a 241×189 px file, upscaled into a 403 px card.
    • Applications: the page is 5,659 px of headings and bullet links, under a wall of 38 filter pills.
    • 404: it still prints Twenty Seventeen boilerplate.
    • Mega menu: it is finished but never switched on. It needs a mega-menu class on the Products menu item.
    • Years: the proof strip says "1937" and "80+", which is the same fact twice. The company is 89 and turns 90 in 2027, and nothing is set up to mark it.

    Nothing here would stick in a heat treater's memory or get forwarded. The raw material for something memorable is already on the site, though:

    • Black-body color is how this audience already talks about heat.
    • The PLC screen lays out a whole line with station temperatures.
    • The graphite-electrode and ceramic pages explain the physics: convection, a triple refractory wall, threaded renewable electrodes.
    • Real model codes are sitting in PDF link names: U-E, U-HS, U-QS, U-ABCD, U-Swingarm, U-Carousel, plus the MightyMatic and MasterMatic hoists.

    Craft B+, memorability D: overall C.

    Wildcards — big swings: all 10 grounded ideas
    IdeaTitle and conceptScoresMade the page?
    wild-blackbody-hero Turn Up the Heat: a black-body setpoint heroThe hero goes dark using KDL's own .kdl-hero--dark scrim. W5 I4 effort Mrevise Merged into 06.1
    wild-ride-the-load Ride the Load: Upton's own PLC screen as a scroll storyA sticky, full-width redraw of Upton's own HMI screen: the same stations and overhead hoist rail in KDL line art (gray-700 strokes, copper moving parts, Lilex labels). W5 I4 effort Lrevise Merged into 05.1
    wild-xray-cutaway X-Ray the Furnace: an explorable submerged-electrode cutawayAt the top of the page sits a cutaway of the submerged-electrode salt bath, like a patent drawing come to life: steel shell, three refractory layers, bath, and an… W5 I4 effort Lrevise On the page · 04.7
    wild-periodic-table The Periodic Table of Heat TreatmentThe pill bar becomes a periodic table: 37 element tiles, each with a two-letter symbol (An Annealing, Tp Tempering, Aus Austempering, Mq Marquenching, Nt Nitriding, Ps… W4 I4 effort Mrevise On the page · 06.7
    wild-shop-traveler Build Your Shop Traveler: a playful RFQ builderA shop traveler is the paper ticket that follows a job through a heat-treat shop, and this builder recreates one. W4 I5 effort Mrevise On the page · 07.6
    wild-data-plates Stamped Data Plates, with a card-to-plate 'furnace door' transitionEach product page header gets a riveted, brushed-steel data plate on the right: - four corner rivets; - an embossed UPTON INDUSTRIES wordmark; - Lilex rows: MODEL U-E ·… W4 I3 effort Mrevise Merged into 05.2
    wild-thermal-bento Firing Line-Art: bento tiles that light upThis keeps the owner's photo-less rule: no photos go in. W4 I3 effort Mkeep Merged into 04.1
    wild-desludger-404 Lost in the Bath: the clam shell desludger 404The headline reads 'This page sank to the bottom of the bath.' Below it is a side-view drawing of a glowing salt bath with dark lumps of sludge on the floor, one of them… W5 I2 effort Skeep On the page · 08.4
    wild-road-to-90 Road to 90: an hour-meter odometer and 2027 anniversary hookThe middle stat becomes a mechanical hour-meter. W3 I3 effort Srevise Merged into 05.5
    wild-shift-modes Night Shift, plus two secret modes (OVERTEMP and Blueprint 1937)A small rocker switch in the header labeled DAY / NIGHT SHIFT. W4 I2 effort Lrevise On the page · 08.5

    Sheet 11 / 11

    Colophon

    How this was made

    Nothing on upton.test has been changed. This page is a proposal: the review read the theme code and the live pages, and every demo runs here, not on the site.

    The route

    1. Op 10

      10 critics, one lens each. Homepage, catalog, product detail, applications, navigation, conversion, motion, art direction, mobile and wildcards. Each graded the site and wrote 10 ideas grounded in the theme files and the live DOM.

    2. Op 20

      10 skeptics, one per critic. Every one of the 100 ideas was checked against the code and the running site, then marked keep or revise with grounding notes. Those notes are under "What we checked" on each card.

    3. Op 30

      One creative director. Picked the direction (Drawn & Fired), merged overlapping ideas and curated 35 into 6 themes, a report card and a routing card.

    4. Op 40

      11 live demos. Each is a self-contained fragment that uses Upton's own photos, GA drawings and model codes wherever it can, and still makes sense with motion reduced. All are on this page.

    5. Op 50

      Assembled from data. _build/build.mjs writes this page from curated.json and lens-results.json, 36 before shots and the demo fragments. Re-run it and the page stays in step with the data.

    Honesty rules

    • No invented Upton facts. No installed base, customers, certifications, equipment temperatures, prices, lead times or response times.
    • Facts used as given: founded in 1937 with the submerged-electrode design, now the industry standard for electric salt bath furnaces; about 45,000 sq ft on 7 acres in Roseville, MI; equipment preassembled and fully tested before shipment; 586-771-1200; 30435 Groesbeck Hwy; model codes printed on Upton's GA drawings.
    • Anything else in a demo wears Sample or Verify with Upton engineering.
    • Stamps are opinions. None of them says "certified" or "approved".
    • Owner decisions stay put unless a card says, in words and with a copper tag, that it reverses one.

    Made with

    • IBM Plex Sans and Lilex, self-hosted. No CDNs, no web fonts from anyone else, no network requests.
    • Upton's own photos from its media library, and its 21 general-arrangement PDFs converted to vector linework.
    • Chrome and Playwright for every screenshot and measurement; pdftocairo, ImageMagick and cwebp for the assets.
    • Works offline: double-click index.html. Print it and every detail opens.