Design system
The tokens in DESIGN.md as they render. Lowest text contrast on this page: 4.88:1.
Type
Geist, Piazzolla for titlesPage title, 24px Piazzolla
30px figure 1,284.50
Section heading, 16px semibold
Body, 14px on 20px. A quote lists filament, printer time, labour and setup, then one markup line, then the total. Nothing is hidden in a tooltip.
Small, 12px, secondary ink. Used for meta, hints and table headers.
ord_8f3k2m9q mono for IDs and keys only
Colour
light only- groundPage ground
- surfacePanels, inputs
- raisedWells, hover
- activeActive nav, selected row
- borderPanel edges
- ruleRow rules
- controlInput and button borders
- inkText
- mutedSecondary text
- faintMeta, placeholders
- accentThe one hue: main data element, focus
- accentInkThe hue as text
- primaryPrimary button
- positivePositive text
- negativeNegative text
- warningWarning text
Icons
one outline set, 16px, 1.5px stroke- Quotes
- Orders
- Files
- Printers
- Settings
Contrast
every pairing that carries words, WCAG 2.2 AA is 4.5:1| Use | Foreground | Background | Ratio | AA |
|---|---|---|---|---|
| body on the page | #141414 | #f4f3f1 | 16.61:1 | pass |
| body on a panel | #141414 | #ffffff | 18.42:1 | pass |
| body on a well | #141414 | #ebe9e5 | 15.19:1 | pass |
| secondary on the page | #5f5e5a | #f4f3f1 | 5.85:1 | pass |
| secondary on a panel | #5f5e5a | #ffffff | 6.49:1 | pass |
| secondary on a well | #5f5e5a | #ebe9e5 | 5.35:1 | pass |
| meta, placeholders on the page | #6b6a66 | #f4f3f1 | 4.88:1 | pass |
| meta, placeholders on a panel | #6b6a66 | #ffffff | 5.41:1 | pass |
| amber as text on the page | #9a4507 | #f4f3f1 | 5.87:1 | pass |
| amber as text on a panel | #9a4507 | #ffffff | 6.50:1 | pass |
| primary button label | #ffffff | #1a1a1a | 17.40:1 | pass |
| white on amber (chart labels only) | #ffffff | #b45309 | 5.02:1 | pass |
| positive text | #247b50 | #ffffff | 5.22:1 | pass |
| negative text | #c4242a | #ffffff | 5.78:1 | pass |
| warning text | #92400e | #ffffff | 7.09:1 | pass |
| positive pill | #04250e | #dcfae5 | 14.77:1 | pass |
| negative pill | #831c1e | #ffedea | 8.63:1 | pass |
| warning pill | #92400e | #fffbeb | 6.84:1 | pass |
| neutral pill | #3d3d3d | #ebe9e5 | 8.96:1 | pass |
Inputs
label above, limits besideButtons
one filled primary per screenNear-black for the one primary, white with a border for the rest, text for a cancel. The destructive action is outlined in the negative colour, never filled, and asks for confirmation that names the object.
Status
one pill per row- Waiting on the shop
- Invoice sent
- Paid
- In the queue
- On the printer
- Print failed
- Post-processing
- Shipped
- On hold
- Cancelled
A pale tint with dark ink of the same hue. The words are the shop's own: a customer reads “On the printer”, never “status 4”.
Print progress
the element only this product hasA job's progress drawn as its layers rising from the bed, in the one hue. The text beside it carries the same numbers, so nothing depends on the picture.
Figures
right-aligned, tabular, fixed decimals| Line | Quantity | Rate | Amount |
|---|---|---|---|
| Filament, PLA matte black | 42 g | $0.020/g | $0.84 |
| Printer time, P2S | 3.4 h | $0.25/h | $0.85 |
| Fabrication labour | 0.25 h | $40.00/h | $10.00 |
| Setup | 1 | $5.00 | $5.00 |
| Subtotal | $16.69 | ||
| Shop markup, 30% | $5.01 | ||
| Total | $21.70 | ||