How it was made

The SetupTruebar Engineering — a Malaga machine shop, drawn as a drawing

A jobbing machine shop’s hardest sales problem is that nobody outside the trade knows what a part costs, and the honest answer — “it depends on the setup” — sounds like a dodge. This page turns that answer into an orthographic drawing you can operate: pick the process, the material, the run time, the batch and the finish, and watch the metal come off the billet while the title block prices it. Everything is drawn in SVG from the pinned rates; nothing is a photograph and nothing is a guess.

The concept

The drawing office, not the shop floor

Truebar Engineering is a fictional jobbing shop on the Malaga industrial estate: two CNC lathes, three mills, a surface grinder, and a manual lathe that still earns its keep on one-offs. Its customers are maintenance supervisors with a broken shaft, purchasing officers with a shutdown four days away, and product designers with a 3D file and no idea what a setup costs. The page has one job: turn “what would it cost to make this” into a phone call with the process, the material, the run time and the batch already priced.

Almost every machine shop site on the web leads with a photograph of a spindle in coolant. We went the other way and built the page as the thing the customer actually receives: a drawing sheet, with a title block, dimension arrows, a bill of material and a wired-on material tag. It signals competence in a way a stock photo cannot, and it gives the estimator somewhere to live that isn’t a form.

Palette

Bond paper, graphite, engineer’s blue, brass

Argued from the four things on a drawing-office desk: the paper, the pencil, the marking blue, and the swarf that gets walked in from the floor. Every ratio below was computed with WCAG arithmetic from the shipped hex — not estimated — and re-measured against the actual grounds during Pass 1.

#E9E7E2

Bond paper

page ground · cards #FCFBF8

A neutral warm-grey bond, not a cream. Cream plus a serif is the house style of every AI-designed “artisan” page; a drawing sheet is cooler and flatter than that, and the neutral ground is what lets engineer’s blue read as ink rather than decoration.

#1D2024

Graphite

13.23:1 on ground · 15.80:1 on card · 10.94:1 on the hairline tint

Body ink and the primary button fill (white labels, 16.35:1; hover #131619, 18.16:1). It is a pencil black with a trace of blue in it, so it sits with the marking blue instead of fighting it.

#2C3E8F

Engineer’s blue

7.75:1 on ground · 9.25:1 on card · white on it 9.58:1

Dimension lines, section hatching, chip outlines, and the secondary CTA (hover #223071, white at 12.14:1). It clears 4.5:1 as text on both grounds, so unusually for a mid-tone accent it needed no minted ink twin.

#9A7326

Brass

3.50:1 as text — marks and fills only

Swarf, the material tag’s wire, the drawn-cap count. White on brass measures 4.33:1, so brass is never a button fill under white labels and never sets small copy.

#7C5C1B

Brass ink

4.99:1 on ground · 5.96:1 on card

The pre-minted deeper twin, used for the job string under the total, the swarf caption, the “×25 — 12 shown” count and the minimum-invoice note. It sits in the 4–6 band, so it labels — it never sets a paragraph.

#565C66

Soft ink

5.45:1 on ground · 6.51:1 on card · 4.51:1 on the hairline

Secondary copy, control labels, footer. Derived rather than inherited: the brief’s ink/line split means a mid-tone accent never gets to be the small-text colour, so the soft ink is its own token and was chosen by measurement.

Scene fills, each measured with the ink that sits on it: mild steel #C8C4BB (graphite 9.40:1) · 6061 aluminium #CFD2D4 (10.76:1) · 304 stainless #C4CBCB (9.93:1) · brass 385 #C3A44F (6.81:1) · acetal #E4E2DC (12.62:1) · the material tag’s brass wash #E2D6B4 (11.30:1), inverting to graphite with paper text (13.23:1) on the brass chip so the brass fill can’t swallow the brass-coloured marks. The anodised finish washes the finished parts in #34509B (white 7.59:1). Service-area map labels are body-ink graphite with a #FCFBF8 halo painted behind the glyphs (paint-order: stroke), which measures 15.80:1 wherever a label crosses the ocean or a lead line — the palette’s line tokens never label a map. The form’s placeholder ink was darkened to #5F656E in Pass 3 after it measured 4.06:1 at its first value.

Type

Three faces, one job each

Chivo 900 for display. A grotesque with square terminals and real mass, argued from the stencilled part numbers stamped on a job traveller — it gives the $720 in the title block the weight of a punched figure rather than a price tag.

Atkinson Hyperlegible for body. Chosen as a drawing-office argument rather than an accessibility badge: it was designed so that 0 and O, and 1, l and I, cannot be confused. That is exactly the failure mode of a hand-written job card, and it is why every quantity, diameter and part number on this page is set in it.

Roboto Mono 500 in exactly one role — dimension and specification strings. Ø60 × 100 · 20 MIN · ×10, the eyebrows, the control labels, and every number drawn onto the sheet. Nothing else is allowed to use it, which is what keeps it reading as machine notation instead of a style.

The display moment is the title block itself: the batch total set enormous in Chivo 900 at −0.035em tracking, with the job string beneath it in mono at wide tracking. That pairing — a stamped figure over a machine string — is the whole art direction in two lines.

Signature

The Setup — a constant billet with the metal taken off it

Everything on the sheet is inline SVG built in JavaScript — no library, no canvas, no raster. The centre of it is a constant Ø60 × 100 mm billet, drawn in section at a scale the page solves for the available box, with a real 50 mm scale bar beneath it. Nothing about the part scales with price. What changes is how much of it is left.

The RUN TIME stepper sets a removal fraction f = (minutes ÷ 60) × 55%, so an hour on the machine takes 55% of the billet’s 6,000 mm² section. Each process owns a normalised removal profile — a list of x-bands with a top weight and a bottom weight — and the drawing solves one scalar k = 6000f ÷ Σ(length × (w_top + w_bot)) so the hatched area is exactly the target, whatever the shape. Turning takes it off as a stepped diameter about the axis; 3-axis milling as a face skim plus three pockets from above; four-axis from above and the flank, with a dashed A-axis arc under the vice; grinding as an even skim off the top face which starts taking the bottom face too once the top has given up 16.5 mm. The band weights were chosen so that at the maximum 55% every process still leaves a web of at least 4 mm — the harness asserts it rather than trusting it, and prints the finished size on the drawing (Ø43.9 at rest; Ø11.7 at sixty minutes).

The second-read detail is the swarf. The pile at the base is a quadratic mound whose area is (2/3) × width × height, solved so that it equals the hatched removal area divided by four — the same metal, drawn again at half the drawing’s linear scale. The caption says so on the sheet, and the verification harness parses the mound’s own path data and re-derives the area to prove it. Step the run time and the hatch and the heap grow together, because they are the same number twice.

The MATERIAL chip recolours the billet, the swarf and the tag; on brass the hatching and the tag invert to graphite so a brass fill can’t swallow brass-coloured marks, and on acetal the ghosted stock outline darkens to graphite so it stays visible against the pale fill. The QUANTITY stepper lays finished parts on the bench, each drawn from the same profile and washed in the finish colour, capped at twelve with the honest count printed beside them (“×25 — 12 shown”; a single part is drawn in full and prints no count at all, so no singular template is needed). A slow tool pass runs at rest — the tool tracks the cut surface, one chip curls at the tip, flakes fall to the pile — on a rAF loop with dt = min(max(now − last, 0)/1000, 0.05), paused on document.hidden, and parked mid-pass under prefers-reduced-motion. The chip never drops below 0.55 opacity, so the signature is visibly alive at any capture instant rather than being phase-tuned to one.

The title block, and why the sheet is as tall as it is

The price badge is the drawing’s title block, seated inside the sheet’s inner border along the bottom: the business and drawing number, the batch total, the job string, the process line, and the numbered notes. Its height is measured, never assumed — the sheet’s height is max(base aspect, (measured title-block height + 2 × frame pad) ÷ 0.26), so the drawn subject always keeps at least 74% of the sheet no matter how the notes wrap. That single line is what stops the block compressing the billet at tablet-landscape widths, where a pixel-height badge over a proportional scene collides and every state assert stays green while it does. Below 641 px the block docks beneath the artwork instead and switches to the short note forms; the ledger and the plain-text mirror carry the full templates at every width.

Honest numbers

The pricing model, and what we checked

Machining is billed by the minute at the machine’s hourly rate; material and finish are per part; setup is charged once per job, outside the multiplication. A $220 minimum invoice bills instead of the job total, never on top of it.

Rest state — CNC turning, mild steel 1020, 20 minutes, ×10, as machined
Line	Working	Per part
Material	Mild steel 1020, Ø60 × 100 billet	$14
Machining	$120/hr × 20 ÷ 60	$40
Finish	As machined	$0
Per part	14 + 40 + 0	$54
Batch	$54 × 10 parts	$540
Setup	CNC turning, charged once	$180
Total	540 + 180	$720

Integer safety by construction

Every hourly rate — $96, $108, $120, $144, $168 — is divisible by 12, and the run-time stepper moves in fives. That makes rate × minutes ÷ 60 equal to (rate ÷ 12) × (minutes ÷ 5), an integer in every cell. Enumerated over the full process × material × run time × finish × quantity grid, 5,880 reachable cells produce zero non-integer intermediates. There is no rounding rule on this page because there is nothing to round; a fractional dollar anywhere would be a bug, not a decision.

Reachability, enumerated rather than spot-checked

Claims of the form “this only happens at…” are arithmetic, so they were run over the real stepper grid in an independent oracle rather than reasoned about:

The $220 minimum can only bind at quantities of 1, 2 or 5. The cheapest reachable part is $22 (mild steel, five minutes on the manual lathe, as machined); ten of those plus the $60 setup is $280, so from ten parts up nothing in the model falls under the minimum. The FAQ says exactly this.
Per-process floors are not all the minimum. Manual lathe, surface grinding and CNC turning all floor at $220 because their cheapest job is under it — but 3-axis milling floors at $266 and four-axis at $388, held up by their own setups. The intuitive answer (“everything floors at the minimum”) is wrong, and the enumeration is what caught it.
The grid floor equals the services grid’s cheapest anchor. The estimator’s cheapest output anywhere is $220, which is the “minimum invoice $220” cell in the rates grid — the page does not argue with itself.
The drawn cap is reachable and honest. Quantities of 25, 50 and 100 print “×n — 12 shown”; 1, 2, 5 and 10 are drawn in full and print nothing.

The worked examples on the page were all measured from the running code and cross-checked against a reimplementation of the rates in separate code: $4,760 (four-axis, 304 stainless, 45 min, ×25, deburr & tumble), $5,540 (3-axis, 6061, 30 min, ×50, clear anodise), $4,020 (grinding, mild steel, 10 min, ×100, black oxide), and the minimum boundary walk $220 / $220 / $220 / $320 at ×1, ×2, ×5, ×10 on a manual-lathe acetal one-off — the fourth of which is where the minimum stops binding and the note disappears from all three surfaces.

The material→finish force

Finishes are gated by what the metal will actually take. Choosing a material that can’t take the current finish forces deburr & tumble, disables the impossible chips with the reason printed on the page, and remembers what you had. Going to another material that also can’t take it holds the forced value rather than stepping through intermediates; returning to one that can restores it. Explicitly choosing a finish while it is free clears the memory. The full drive: 6061 + clear anodise at $1,300 → 304 stainless forces deburr, $1,460 → brass 385 holds deburr, $1,680 → 6061 restores anodise, $1,300.

One spec gap we had to resolve, and how. The concept pinned three reasons for disabled finishes — “anodising is an aluminium process”, “black oxide and zinc plating are ferrous processes”, “nothing plates onto acetal”. None of them honestly covers zinc plating on 304 stainless, which is ferrous. Rather than print a reason that is technically false, that cell got its own line: “stainless is already corrosion-resistant — we don’t plate it”, which is what a shop would actually say. Flagged here rather than absorbed silently.

Two drawing conventions declared on the sheet itself. Clear anodise is colourless on the metal; the drawing tints anodised parts engineer’s blue so the finish reads on the sheet. And the swarf pile is drawn at half the drawing’s linear scale — real chips take up far more room than the solid they came from, so drawing the true bulk would swamp the sheet. Both are stated in the artwork rather than left to be discovered.

Conversion

Why the page is arranged this way

The phone number is the first button

Most breakdown work arrives as a call, often from a plant floor with the machine still stopped. At 375 px the business name, the one-line value proposition naming the trade and the suburb, a full-width tel: button and three trust lines all sit above the fold without scrolling, and a sticky call/quote bar rides the bottom of every screen. “Send a drawing” is the secondary action, not the primary one.

The estimator sells the setup, not the part

The commercial argument of a jobbing shop is that the tenth part is cheap because the setup is charged once. The ledger deliberately breaks that out — per part, × batch, setup, total — so a purchasing officer can see what the second twenty-five would cost. That is the conversation we want them ringing about.

Six fields, and every one of them is billable information

Name, phone, suburb, what the part is, how many, and what you’ve got for us (drawing, 3D file, the broken part, a sketch, or just the housing). The job note is pre-filled from whatever the Setup is showing — process, material, run time, batch, finish and the price — so the enquiry lands with a scenario attached instead of “can you quote this”. Edit it and the page stops overwriting you; the “send this job to the shop” button rewrites it on demand.

Three declarations that are always visible

What the setup includes, that run time is an estimate until the first part is off the machine (and the invoice is the shorter one if the cut is faster), and the $220 minimum. They ride the title block, the ledger and the plain-text mirror at every width. The one that costs us work — the minimum — is also the one in the FAQ, with the honest note that it only ever binds on one, two or five parts.

The whole drawing is also duplicated as “the drawing, as text”: a quiet list under the ledger stating the process, material, removal fraction, batch, finish, arithmetic and every declaration in plain sentences. It is there for screen readers, but it is also what makes the declarations auditable — every one of them has to appear on three surfaces, and the harness checks all three.

Local SEO

What we’d implement for the real business

The live page carries only WebPage and BreadcrumbList structured data, and both say plainly that it is a demonstration. Publishing LocalBusiness or Review markup for a business that does not exist would put fiction into a real search index, so we don’t — the sales evidence lives here instead, as a code sample.

For the real shop this is the block we’d ship, keyed to a verified Google Business Profile and a reviews feed. Note the type choice: schema.org has no machine-shop or precision-engineering subtype, and the trade is emphatically not AutomotiveBusiness, so the correct top-level type is LocalBusiness with the specialty carried by additionalType, knowsAbout and a real hasOfferCatalog.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://truebarengineering.com.au/#shop",
  "name": "Truebar Engineering",
  "additionalType": "https://www.wikidata.org/wiki/Q1049158",
  "description": "Jobbing machine shop in Malaga: CNC turning and milling, surface grinding, manual lathe work, one-offs, spares and short production runs.",
  "url": "https://truebarengineering.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "image": "https://truebarengineering.com.au/img/shop-floor.jpg",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 7, Kalamunda Road",
    "addressLocality": "Malaga",
    "addressRegion": "WA",
    "postalCode": "6090",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.85, "longitude": 115.89 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday"],
      "opens": "07:00", "closes": "16:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Friday", "opens": "07:00", "closes": "14:00" }
  ],
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    "Malaga", "Wangara", "Bayswater", "Bassendean",
    "Osborne Park", "Welshpool", "Canning Vale", "Kwinana"
  ],
  "knowsAbout": [
    "CNC turning", "CNC milling", "four-axis machining",
    "surface grinding", "reverse engineering",
    "EN 10204 3.1 material certification", "CMM inspection", "AS 1100"
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Machining services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "CNC turning" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "120.00", "priceCurrency": "AUD",
          "unitCode": "HUR", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Surface grinding" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "108.00", "priceCurrency": "AUD",
          "unitCode": "HUR", "valueAddedTaxIncluded": true } }
    ]
  },
  "review": [
    { "@type": "Review",
      "author": { "@type": "Person", "name": "<real reviewer name>" },
      "datePublished": "2026-07-14",
      "reviewRating": { "@type": "Rating", "ratingValue": 5, "bestRating": 5 },
      "reviewBody": "<verbatim from the reviews feed>" }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "<computed from the feed>",
    "reviewCount": "<computed from the feed>"
  }
}
</script>

Alongside it: a verified Google Business Profile with the “machine shop” primary category and “engineer” and “metal fabricator” secondaries, service-area pages for the industrial suburbs the shop actually delivers to, FAQPage markup on the questions block, and Service pages per process so “CNC turning Perth” and “surface grinding Malaga” have somewhere real to land. Every review figure comes from the feed — never typed in by hand.

For the real client

What changes when it’s not a demo

The drawing stays — it is the thing that makes the page look like a machine shop rather than a template. What gets wired up:

Fusion 360 CAM for the programming side: the run times in the estimator stop being a stepper and start being seeded from the shop’s own posted cycle times, per process and per material, so the “estimate until the first part is off the machine” note gets shorter every quarter.
A quoting layer — Paperless Parts if they want file upload and automatic geometry pricing, or a Xero-linked job-cost sheet if they’d rather keep quoting in the office. Either way the enquiry lands as a draft quote with the process, material, batch and finish already populated, not as an email someone re-types.
Katana or Odoo for work-order tracking, so “where is my job” is a link in the confirmation email rather than a phone call that stops a machine.
Xero for the invoice, with the minimum-invoice rule encoded once rather than remembered five times a week.
Google Business Profile plus a reviews feed driving the testimonials block and the AggregateRating above. Their photographs replace nothing on this page — they go on the process pages, where a shot of the actual four-axis trunnion earns its keep.

Process

Three iteration passes

Pass 1 — Craft

Five collisions the asserts could not see

The first sheet drew the Ø60 dimension in a left gutter that the chuck jaws also occupied — the “Ø60” label rendered underneath the work-holding at 1200 px and was simply unreadable. The dimension moved to the right of the billet and the 100 dimension moved above it, which also freed the whole bottom lane for the tool.
The turning tool travelled straight over the “100” dimension label and the 50 mm scale bar. The scale bar was re-anchored to the right of the swarf lane and the tool bodies were cut down from 24 mm to 12 mm of schematic shank, which is all a section drawing needs.
The swarf caption ran off the right edge of the sheet at every width above 900 px. It now sits left-anchored under the pile, and the pile’s width is clamped to the lane while its height is re-solved to keep the area exact.
The sheet’s “SCALE 1:1 · ALL DIMENSIONS IN MILLIMETRES” footer strip was drawn underneath the title block — correct in the DOM, invisible on the page. It moved to the top-left of the sheet, where a projection note belongs anyway.
The material tag printed the process label right-aligned on the same baseline as the finish line, so “AS MACHINED · $0/PART” and “CNC TURNED” overprinted each other at 1000 px and below. The process moved up to share line one with the material name, and drops out entirely below 470 px where there is no room for it.
Contrast was re-measured from the shipped tokens rather than the spec: everything held except the form’s placeholder ink at 4.06:1, re-minted to #5F656E (5.68:1).

Pass 2 — Depth

Making the drawing argue for itself

Added the finished-size callout on the part: the drawing now prints the diameter (or thickness) left at the deepest cut, halo-painted in the material’s own fill so it reads over the section without a leader line. At rest that is Ø43.9; at sixty minutes of turning it is Ø11.7 out of a Ø60 bar, which is the whole “you are paying for the metal we take away” argument in one number.
Rebalanced the sheet so the billet stops being height-starved: the tag, swarf and bench bands became content-proportional with hard caps instead of fixed fractions, and the billet grew from a measured 262 px to a measured 322 px wide at the 1200 px layout without touching the constant-scale rule.
Gave each process its own work-holding — collet chuck, three-jaw chuck with a hand wheel, magnetic chuck, vice and parallels — and a four-axis A-arc under the vice, so the process chip changes the whole setup rather than just the tool.
Tied the swarf pile to the removal area as an exact quarter-area relationship rather than a rough proportional one, and captioned it on the sheet. The harness now re-derives the mound’s area from its own path data.
The tool pass got a chip that pulses on a sine with a floor of 0.55 opacity, and three flakes that fall to the pile on lathe work and fly up off the cutter on milling and grinding.

Pass 3 — Hardening

375 px, resize, keyboard, and one ornament removed

Found a real bug while chasing a screenshot artifact: a viewport resize was replaying the entrance choreography. Puppeteer resizes the viewport to take a clipped or full-page screenshot, which caught the scene mid-fade — but the same thing happens to a visitor rotating a phone. The redraw now carries an explicit mode (first on load, snap after a state change, none on a pure relayout), so a resize repaints without animating anything.
At 375 px the sheet’s base aspect went from 1.12 to 1.32 so the billet is drawn at a measured 193 px rather than 148 px, the “STOCK Ø60 × 100” note shortens to “STOCK”, the tag drops to two data lines, and the right-hand dimension gutter widened so “Ø60” can never touch the sheet border. A harness assert now walks every text node in the SVG at 375, 1000 and 1200 across four scenarios each and fails if any glyph crosses the sheet edge.
Masthead checked first, per habit: the wordmark’s right edge is compared against the call button’s left edge explicitly at 375, and the page’s scrollWidth is exactly 375 with no element poking outside the viewport box. This page’s own masthead failed that check — the “BUILD NOTES · GENERATIVE ASSETS” sub-line ran under the back button at 375, because a nowrap span cannot shrink. It drops out below 460 px, and the guide now gets the same explicit edge-vs-edge assert the site does.
Drove the whole surface rather than loading it: empty submit (panel stays hidden, seven fields raise validation), filled submit (nothing invalid, confirmation shows with the scenario attached), every process/material/finish chip, both steppers walked end to end against the oracle, a rapid-fire burst of twenty-odd clicks in one evaluate, and the keyboard path — Enter on a chip, Space on a stepper, Enter on a FAQ summary. Both pattern attributes were proved by driving checkValidity on a deliberately invalid value, because a v-flag regex that fails to compile leaves a field silently validating nothing.
Reduced motion parks the tool mid-pass with the full scene drawn — a settled frame, not a blank one — and the rAF delta is clamped at zero as well as capped, so a vsync timestamp that precedes its own scheduling can’t drive geometry negative.
Ornament removed (the Chanel rule): the finished part carried a “FINISHED PART” caption across its centreline. With the stock ghosted and labelled, the removal hatched and captioned with its percentage, and the finished size now printed on the part, the caption was the third thing saying the same thing. It went; the drawing got quieter and clearer.
Final tally: 287 asserts green, zero console errors, zero failed requests, and the rest state measured from the running page at $720 against a grid floor of $220.