Skip to content

Components

Demo data

Every 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

Demo data

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.

Deep glassDemo data

The top bar, the content record and the checkout totals. Its text reads light; every token inside re-scopes.

$3,359.39

Red 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.39

DB-1042 rev B · 120 × 90 × 70 mm · 6061-T6

Glass blockCF-Q-26-0921

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.

Waiting on the motor mount plate’s drawing, needed to order.
Open the order

On red glass the primary button inverts

Waiting on the motor mount plate’s drawing, needed to order.
On deep glass the primary action is the leaf’s red with ink text

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.

Prismatic, 3 setupsPricedWith the quote deskMetalSelectedReady to acceptExpires in 3 daysIn review25 pieces
QCNSONCheck discs: passed, signed, a person, not yet

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.

Lead time
Finish
Each certificate shows the heat number and the country of melt.
Rates come only from carriers on the Canadian-carrier register.

Material picker

The stock-aware picker: the form and size from our dated supplier table, then every grade in one of three states.

Material, stock-aware
Grade

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.

  1. 1on change
  2. 5on change
  3. 10on change
  4. 25on change
  5. 50$94.00
  6. 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.

  • Sensor bracket, rev B

    Prismatic, 3 setupsPriced
    Prismatic, 3 setupsPriced

    sensor-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
    Quantity
    Ships by$4,700.0350 × $94.00
  • Motor mount plate, rev A

    Prismatic, 2 setupsPriced
    Prismatic, 2 setupsPriced

    motor-mount-plate-rev-a.step · no drawing yet, needed to order

    • 6061-T6, plate 0.5 in
    • Black anodize, type II
    • ISO 2768-m
    Quantity
    Ships by$1,325.0510 × $132.51
  • Encoder hub, rev A

    TurnedWith the quote desk
    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
    Quantity
    Priced 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-0921
Metal cut to size, with its mill certificate$1,194.19
Machining, a partner shop$1,597.22
Freight, two legs, Canadian carriers$181.50
HST 13%$386.48
Total$3,359.39

Two placeholders, to confirm

The C$150 minimum order and the Economy tier’s date and price are placeholders from the design until Aaron sets them; the engine’s tiers come from shop capacity.

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.

On the row or the line:With the quote desk
Thin wallNone under 1.5 mm
Bores Ø30 H7Gauged on every part

Why this part is with the quote desk

  1. FEN-04Bore Ø12 +0.005/0 and 0.005 runout are tighter than the rules price. Reply by 17:00 today.
  2. 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.

Canadian content recordCR-26-10352
Country of meltCanada6061-T6, heat 4H2217, mill certificate MTC-26-0814. Aluminum counts as Canadian only if smelted and cast in Canada.
  1. 10Smelted and castCanadaMTC-26-0814, 4H2217
  2. 20Bought, cut to sizeCanadian metal supplier, QuebecBR-26-0814, 25 / 25
  3. 30Carried to the shopQuebec to Dartmouth, NS7741 2290 18
  4. 40MachinedShop NS-014, Dartmouth, NSOps 10 to 40
  5. 50InspectedDartmouth, NSIR-26-0417, 25 / 25
  6. 60ShippedDartmouth, NS to Kanata, ON7741 2291 02Signs on pickup
  7. 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.

Quotes in Canadian dollars. Files and accounts held in Canada.

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.

  1. Metal (Done)

    Bought, cut to size

    Quebec

    BR-26-0814 · 20 Oct

  2. Carried (Done)

    Quebec to Dartmouth, NS

    7741 2290 18 · 22 Oct

  3. Machined (Done)

    Shop NS-014, ops 10 to 40

    Shop NS-014, Dartmouth, NS

    28 Oct

  4. Inspected (Done)

    IR-26-0417, 25 of 25

    IR-26-0417 · 29 Oct

  5. Shipped (In progress)

    Dartmouth, NS to Kanata, ON

    7741 2291 02 · Due 2 Nov

  6. Record (Not yet)

    Signs when delivered

    canadafab.ca

  1. Smelted and cast(Done)

    Mill certificate MTC-26-0814, heat 4H2217
  2. Bought and cut to size(Done)

    Quebec, buy request BR-26-0814
  3. Machined(In progress)

    Dartmouth, NS, shop NS-014
  4. Shipped(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.

Quote CF-Q-26-0921, four lines
LineDetailAmount (CA$)
Metal6061-T6 bar, 3 × 4 in, cut to 124 mm, with its mill certificate$1,194.19
MachiningShop NS-014, Dartmouth, NS$1,597.22
FreightCarrier 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

Prices come from the supplier’s demo price list of 1 Oct 2026.

The draft saved itself

Every change is kept as you make it; nothing is sent until you ask for the quote.

One tolerance is tighter than the automatic range

The quote desk reviews it before the quote goes out.

Error: The file didn’t upload

Check the connection and try again. Nothing was sent.

No orders yet

Accept a quote and its order appears here with its timeline, documents and record.

Files, people and keys

  • sensor-bracket-rev-b.step

    458 KB, STEP

    Read
  • DB-1042-B.pdf

    413 KB, drawing

    Reading
sensor-bracket-rev-b.stepDB-1042-B.pdfFile chips: a dropped file before it becomes a row, a drawing paired by name.
Sam (demo)/Press / to search

Mill certificate and heat

MTC-26-0814 · 4H2217

Dialog, 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.

More

Request a review

The quote desk checks the tolerances and replies by email.

Sensor bracket, rev B

Prismatic, 3 setupsPriced

DB-1042 rev B · 120 × 90 × 70 mm · 6061-T6

The part in the viewer, the checks beside the model, the configurator on the right, every change repricing in place. The sheet closes back along the path it rose on.

Ships by30 Oct 2026$3,359.39

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.

Live: no account needed

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.