Components
Demo dataEvery shared primitive in Northern glass with its states, in the page’s language. Screens use these and nothing else for their controls. Every figure is demo data from the demo quotes.
Surfaces
Four surfaces over one cool ground: light glass for content, raised glass for sheets, deep glass where the product works, red glass for the quote’s money. Depth is tint, blur and edge, never a drop shadow on a flat ground.
Light glass
The panel most content sits on: white at 38 to 70 percent over the ground, blurred, with a luminous top edge.
Raised glass
Sheets and the configurator: a step whiter and a step more blurred, so it reads above the page.
The top bar, the content record and the checkout totals. Its text reads light; every token inside re-scopes.
$3,359.39Red glass
The quote rail, the drop zone, a part’s price and the desk’s reply: red is a feature of the system, never an error.
$3,359.39DB-1042 rev B · 120 × 90 × 70 mm · 6061-T6

A block inside a panel holds data: the quote’s lines, a form’s group, a fact.
Buttons
The primary action is red with a glow, 48 px; every other button is a glass pill. Disabled keeps the edge and says why. Loading pulses the edge once.
On red glass the primary button inverts
Chips and status
Outline chips for facts and filters; filled chips for state: cyan is live, mint is metal and the record, violet is the quote desk, ink is a selected filter. Status words always carry an icon.
Form fields
Native controls as glass pills, 44 px tall. A disabled field says why. Errors are ink with the word Error.
As it appears on the drawing’s title block.
Error: Enter the purchase order number from your company’s PO.
The email is set when the account is created, at checkout.
Read only: the serial is CanadaFab’s.
Choices
Choices as glass cards; the chosen one is edged in red over a red tint. A switch that’s on is red: the chosen state.
Material picker
The stock-aware picker: the form and size from our dated supplier table, then every grade in one of three states.
Grades are named to ASTM, CSA and AA; a size with no stock goes to the quote desk.
Price breaks
Five quantity breaks, the current one outlined in red; past the ceiling the desk prices it. The unit prices come from the engine as it reprices.
- 1on change
- 5on change
- 10on change
- 25on change
- 50$94.00
- 100+The desk prices it
Part rows
One row per part: the render on its tile, the kind named honestly, the status chip, the files line, the spec chips, the quantity and the price with the ship date as the headline. The bulk bar changes the selected rows together.
Prismatic, 3 setupsPricedsensor-bracket-rev-b.step · DB-1042-B.pdf, paired by name
- 6061-T6, bar 3 × 4 in
- As machined
- ISO 2768-m
- 4 × M4 × 0.7 from the drawing
QuantityShips by$4,700.0350 × $94.00
Prismatic, 2 setupsPricedmotor-mount-plate-rev-a.step · no drawing yet, needed to order
- 6061-T6, plate 0.5 in
- Black anodize, type II
- ISO 2768-m
QuantityShips by$1,325.0510 × $132.51- TurnedWith the quote desk
encoder-hub-rev-a.step · DB-1130-A.pdf, paired by name
- 6061-T6, round bar Ø2 in
- As machined
- Tight tolerance
QuantityPriced by a personReply by 17:00 todayThe line waits
Add more parts. Drop STEP or IGES models and PDF drawings here; drawings pair with their model by name.
The encoder hub needs a person: Bore Ø12 +0.005/0 and 0.005 runout are tighter than the rules price. The quote desk prices it and the line fills in here. Everything else is priced now.
The rail
Red glass, 400 px wide beside the rows: two tiers with the ship date as the headline, the four lines, the total in tabular figures, the minimum order shown once. Deep glass carries the same lines as the checkout totals.
Checkout totals
CF-Q-26-0921Two placeholders, to confirm
Review flags and reasons
Where the rules can’t price, the field says so in words and the line shows With the quote desk, with the reason word for word and the turnaround. Never red.
A flag on the field and on the line
With the quote desk First article inspection with a CMM is priced by a person; the line shows with the quote desk until it replies.
Why this part is with the quote desk
- FEN-04Bore Ø12 +0.005/0 and 0.005 runout are tighter than the rules price. Reply by 17:00 today.
- FEN-07First article inspection with a CMM report.
The quote desk prices it and the line fills in where it was. Nothing is sent to a shop without your go.
The content record
The Canadian content record as deep glass: the country of melt, seven steps signing as the order moves, the summary. The leaf on the rule is CanadaFab’s own.
- 10Smelted and castCanadaMTC-26-0814, 4H2217
- 20Bought, cut to sizeCanadian metal supplier, QuebecBR-26-0814, 25 / 25
- 30Carried to the shopQuebec to Dartmouth, NS7741 2290 18
- 40MachinedShop NS-014, Dartmouth, NSOps 10 to 40
- 50InspectedDartmouth, NSIR-26-0417, 25 / 25
- 60ShippedDartmouth, NS to Kanata, ON7741 2291 02Signs on pickup
- 70Record issuedcanadafab.caCF-26-10352Signs on delivery
Shops and provinces: Canadian metal supplier, Quebec; Shop NS-014, Dartmouth, NS. Carriers: Carrier A, 2 legs, Canadian. Demo record, demo data.
Timelines, steps and tabs
An order by leg, left to right, with a live bar through the done legs; the vertical timeline for a history; step pills for a flow; pill tabs and pages.
Metal (Done)
Bought, cut to size
Quebec
BR-26-0814 · 20 Oct
Carried (Done)
Quebec to Dartmouth, NS
7741 2290 18 · 22 Oct
Machined (Done)
Shop NS-014, ops 10 to 40
Shop NS-014, Dartmouth, NS
28 Oct
Inspected (Done)
IR-26-0417, 25 of 25
IR-26-0417 · 29 Oct
Shipped (In progress)
Dartmouth, NS to Kanata, ON
7741 2291 02 · Due 2 Nov
Record (Not yet)
Signs when delivered
canadafab.ca
Smelted and cast(Done)
Mill certificate MTC-26-0814, heat 4H2217Bought and cut to size(Done)
Quebec, buy request BR-26-0814Machined(In progress)
Dartmouth, NS, shop NS-014Shipped(Not yet)
Waybill 7741 2291 02
Data table and facts
Hairlines between rows, headers as small labels, amounts right-aligned in tabular figures; rows stack on a phone.
| Line | Detail | Amount (CA$) |
|---|---|---|
| Metal | 6061-T6 bar, 3 × 4 in, cut to 124 mm, with its mill certificate | $1,194.19 |
| Machining | Shop NS-014, Dartmouth, NS | $1,597.22 |
| Freight | Carrier A, two legs | $181.50 |
| HST 13% | Ship to Kanata, ON | $386.48 |
| Total | $3,359.39 | |
- Quote
- CF-Q-26-0921
- Order
- CF-26-10352
- Quantity
- 25 pieces
- Ship to
- Kanata, ON
- Part
- Sensor bracket, rev B
- Material
- 6061-T6 aluminum
- Record issued
Notices and empty states
Notices are glass blocks with an icon. An error says Error in words with an ink edge; it’s never red.
The metal line uses the dated price table
The draft saved itself
One tolerance is tighter than the automatic range
Error: The file didn’t upload
No orders yet
Accept a quote and its order appears here with its timeline, documents and record.
Files, people and keys
- Read
sensor-bracket-rev-b.step
458 KB, STEP
- Reading
DB-1042-B.pdf
413 KB, drawing
Mill certificate and heat
MTC-26-0814 · 4H2217Dialog, sheet and menu
A dialog is raised glass over the dimmed page. A sheet rises 48 px from the foot of the page over the dimmed quote and closes back along the same path; the part sheet and checkout are sheets.
Drop zone
Red glass with a dashed edge, live before any account. The compact one is the add-parts row at the foot of the workspace.
Drop a STEP file for a full price
The ship date and the price in Canadian dollars in about 20 seconds (to confirm). Drawings pair by file name. Nothing is kept until you ask us to.
- STEP
- STP
- IGES
- IGS
- SLDPRT
- X_T
- PDF drawings
Or try the sample part: a sensor bracket in 6061-T6, 25 off.
Add more parts.
Drop STEP or IGES models and PDF drawings here; drawings pair with their model by name.
Motion
One orchestration per transition, 200 to 400 ms on the spring curve, shared elements carried across. Under reduced motion every transition shows its final state at once. No loops, counters or parallax.
- Arrive to Drop, 320 ms
- The file chips fly into the first row; the page settles 24 px up and dims to 70 percent.
- Drop to price, 280 ms
- Per row, 60 ms apart: the kind chip resolves, the ship date fades up, the price 120 ms later; the rail total ticks once.
- Row to Shape, 400 ms
- The row scales into the sheet; the thumbnail travels to the viewer; the quote dims to 55 percent. Closing runs the path back.
- A reprice, 200 ms
- The changed line pulses its edge once in cyan.
- Decide to Commit, 360 ms
- Checkout slides up 48 px as a sheet; the total detaches from the rail and lands in the checkout header.
- Commit to Follow, 400 ms
- The timeline draws its legs left to right, 80 ms apart; each signed record step lifts its check in mint.
Hover 200 ms, press 120 ms, state change 200 ms, open 320 ms, enter 360 ms, settle 400 ms. Reduced motion: the final state at once.