Bend it once,
bend it right.
A precision tube bending workshop in Nerang, on the Gold Coast, under new ownership. 25 years of boat-building tolerance now standing behind the bender.
This document is the whole system — mark, palette, type, grid, components, motion, and how it behaves in the world. It is rendered from the shipped tokens and components, so it cannot drift from the site it describes.
Logo & marks
The knot is the equity — four decades of it on invoices, signage and the side of a ute. It stays. What changes is the drawing: true radii, one consistent wall thickness, honest over-under crossings, and a pivot dot and radius arc that say out loud what the business actually sells.
On Ink the tube inverts to Paper — and so does the annotation, back to Highway Blue. The dot and arc sit on the tube, so they always take the colour that contrasts with it. One SVG, two custom properties, no second file.
One loop, all round
Minimum clear space on every side equals the diameter of the large
loop. Nothing enters it — not text, not a rule, not a photo edge.
Lockup reserves it for you with clearSpace.
Then switch marks
The lockup scales as drawn, no optical corrections — which is
exactly why it has a floor of its own, above the mark's. Below
174px of mark width the wordmark's second line falls out of the
type scale; below 24px the knot's second loop fills in. Two
boundaries, two swaps. Brandmark makes them.
The knot, cropped
App icon, favicon, avatar, embroidery. The crop edge does the work — the aperture and pivot dot stay open at 22px.
The solid bend
Tube in Paper, centreline in Signal. For process steps, loading states and drawing stamps. Under 24px the dashed centreline stops resolving, so it drops and the tube thickens.
The logo is not the answer to a small slot
174px — lockup. TUBE BENDING at 15px, on --step-label.
76px — primary mark. What the 68px header bar gets.
22px — cropped mark. Favicon, avatar, stamp.
46px lockup — never. TUBE BENDING at 4px.
The wordmark's cap height is 0.253 of the mark's width and its
second line is 0.34 of that, so markWidth alone
decides how big TUBE BENDING is. At 174px it lands on
--step-label; at the 46px a navigation bar wants, it
sets at four pixels and reads as a grey smear. So a small slot
takes a smaller asset, never smaller type — the mark
stands alone and the name is carried by the link's accessible name
and the page title. Brandmark takes the width you have
and picks; Lockup warns at build time if it is handed
a literal below the floor. The number lives in
brand/floor.ts rather than in tokens.css:
it selects an asset, and CSS cannot branch on a length.
- Re-colour the tube. Ink or Paper only.
- Outline, emboss, bevel or drop-shadow it.
- Stretch, shear or rotate the knot.
- Drop the pivot dot or the radius arc.
- Set the wordmark in another typeface.
- Place it on a photograph without a solid panel.
An abstracted single loop, a monospace HTB stamp, and a pure centreline diagram. All three were cleaner than the knot and all three threw away four decades of recognition. Kept on file, not in use.
Colour
- 01 / Ink #0E1114 Type, reversed panels, the mark
- 02 / Graphite #22282E Body copy, tiles
- 03 / Steel #5A6672 Secondary text, labels
- 04 / Mist #AEB7BF Field borders, disabled
- 05 / Hairline #DCE2E6 Every 1px rule
- 06 / Fog #E3E7EA Table headers, quiet fills
- 07 / Paper #F4F6F7 Page ground
- 08 / Hull #122B4E One deep break per page
- 09 / Highway Blue #2A5BD7 Action, and annotation on a Paper tube
- 10 / Signal #4FB0D8 Annotation on a Graphite tube, motion
| Pairing | Ratio | Verdict |
|---|---|---|
| Paper on Ink | 17.47:1 | AAA |
| Mist on Ink | 9.31:1 | AAA |
| Signal on Ink | 7.70:1 | AAA |
| Ink on Paper | 17.47:1 | AAA |
| Graphite on Paper | 13.73:1 | AAA |
| Steel on Paper | 5.41:1 | AA |
| Highway Blue on Paper | 5.42:1 | AA |
| Steel on Fog | 4.72:1 | AA |
| White on Highway Blue | 5.87:1 | AA |
| Ink on Signal | 7.70:1 | AAA |
| Paper on Hull | 13.08:1 | AAA |
| Mist on Paper | 1.88:1 | NON-TEXT |
| Hairline on Paper | 1.21:1 | NON-TEXT |
| Highway Blue on Ink | 3.22:1 | FORBIDDEN |
80 / 15 / 5. Eighty percent neutral ground, fifteen ink, five blue. If a page feels blue, it is broken.
Blue earns its place. Highway Blue marks something you can act on. Signal marks something a human measured. Never a wash, never a gradient, never a mood.
Two grounds. Paper everywhere; Ink for workshop and quote sections. Hull once per page at most, as a full-bleed break.
Mild steel is grey. The Broadwater is blue. A boat builder's eye reads both without being told — the palette is the client's own two materials, not a trend.
A panel never restates colours on its children. Setting
data-ground="ink" or "hull" re-points every
semantic token beneath it — text, borders, accents, and the mark's
two inks — so a component dropped onto a dark panel needs no
override at all.
Typography
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 Ø ± × ° — /
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 Ø ± × ° R CLR OD
| Role | Specimen | Size / leading / track |
|---|---|---|
| Display | Bent to spec | 42–68 / 0.95 / −4.5% |
| H1 | Mandrel & rotary draw | 36–48 / 1.05 / −3.2% |
| H2 | Marine handrail, 316 stainless | 28–34 / 1.15 / −2.2% |
| H3 | What we can and can't bend | 21–23 / 1.35 / −1.2% |
| Body | Send a drawing, a sketch on the back of an envelope, or the old part in a box. We'll tell you honestly whether it can be bent, and what it will cost. | 17–19 / 1.625 / 0 |
| Small | Supporting detail, captions, card copy. Steel on Paper, never below 15px on screen. | 15–16.5 / 1.45 / 0 |
| Label / mono | CLR 76.2 · Ø 50.8 · WALL 2.0 · JOB 4417 | 14–15 / 1.45 / +12% |
One family for everything readable, two weights. Tracking tightens as size grows — never the reverse.
Plex Mono is never a paragraph: a measurement, a label, a job number, a nav item. Caps, +12% tracking (+16% on cover & colophon), 12–15px.
Sentence case. No italics. Measure caps at 60ch.
Every spec is set in mono with its unit — 50.8 mm, not "about two inch". Tolerances get a ± and a real figure.
Figures are tabular everywhere, so a column of specs lines up on the decimal and can be scanned down rather than read across.
Big numbers in Archivo 600 with the unit in Highway Blue — one per section, never a wall of stats.
Short sentences. Real numbers. No superlative we can't measure. "We" and "you", never "the customer".
Say: Send us the old part, we'll match it.
Not: Leverage our world-class capability.
The latin subsets do not carry U+2300 (⌀) or
U+2192 (→). Diameter is set with
Ø, which is in-subset and what a
fabricator types anyway; arrows are drawn as SVG by
Arrow so their stroke matches every other line in the
system
Grid & space
Editorial asymmetry, not centred symmetry: hero copy on 7, imagery on 5. Cards run 3 or 4 up. Text blocks never exceed 8 columns, so the measure stays readable without a max-width hack.
All twelve spans exist, including the ones no page uses.
.grid__3 did not, and the job tag that asked for it
rendered at a twelfth of the width with the mark hanging out of
the side — an undefined span is not a no-op, it is one column.
A row is one composition, so it finishes on one line. Grid already stretches the cells; what leaves a hole under the shorter column is the content not filling the cell it was given. Three devices, and between them they are the whole rule:
Figure fillcrop to the cellFigure ratiocrop per placementmargin-top: autoactions to the foot
Exactly one member of a row keeps an intrinsic height. Make it the paragraph or the stack of tiles — the things whose height is their content — and let the photograph crop to it. Both at once and nothing sets the height; neither and the row collapses.
fill grows only. A grid row is sized
from its items' content, so a figure taller than its neighbour
makes the row taller and then fills the row it just enlarged. The
ratio a filling figure starts from must therefore be landscape, and
a portrait-composed shot needs an explicit one — the composed ratio
stays in the shot list, and the plate says which crop the slot is.
Stretching a short tile to fill a tall row is not one of the devices. It moves the hole inside the tile instead of removing it, which is how a 314px job tag came to hold 118px of content and read as the wrong size all over again.
8 · 16 · 24 · 32 · 48 · 56 · 88
24 between cards. 56 page margin. 88 between sections. Nothing in between gets invented.
- Workshop phone≤ 640 · 1 col
- Tablet on the bench641–1024 · 6 col
- Office desktop1025+ · 12 col
- Border radius0 — always
- Chamfer8 · 18 · 24px, bottom-right
- Minimum tap target48px — gloves on
- Minimum lockup174px of mark
Graphic language
Dot grid
14px dots behind hero and part panels. Alignment made visible — the sheet the job is drawn on. The dot takes its colour from the ground it sits on, so it recedes on Ink and on Paper alike.
Chamfered panels
One chamfer, bottom-right, on dark panels and primary buttons. The only shape the brand owns. No radius anywhere.
// MANDREL
Section markerDouble slash
Section eyebrows carry a // — Signal on dark, Highway
Blue on light. Borrowed from the shop's own drawings, and added by
the .eyebrow class rather than typed into copy.
The bend, drawing itself
Motion is a line completing a path — never a fade, never a slide-up. One animated element per viewport, and the finished line is the fallback state.
The poster reference earns three things and no more: overscale mono numerals in title blocks, a printer's registration cross at the corner of a full-bleed break, and a trace of ink-on-uncoated-paper tooth over dark grounds at 2.8% opacity. Halftone, overprint and visible grain were tried and cut — they read as a design studio, not as a precision workshop.
Imagery
Two families, no third. Reportage — people, machines, dust, shot black-and-white on the day, grain welcome. Parts — a single bend on Fog grey, lit evenly like a product, colour but nearly neutral.
Never stock. Never a blue filter — the blue belongs to the interface, not the photograph. Crop tight enough that you can see the tolerance.
Figure enforces this: a reportage slot is desaturated
in CSS, so a colour file dropped in by mistake cannot break the
direction. A missing file renders its own brief instead of a broken
image.
- 01 Bender mid-cycle, mandrel engaged · shallow depth · natural light · B&W · 16:9 Placeholder
- 02 Hands checking a radius against a template · no face · B&W · 3:4 Placeholder
- 03 The die wall — thirty years of tooling · straight on · B&W · 4:3 Placeholder
- 04 One part, top-down on Fog · even light · nearly neutral · 3:4 Placeholder
- 05 Owner portrait, workshop behind, hands visible, no smile required · B&W · 4:3 — MUST BE PHOTOGRAPHED
Every slot is flagged until a real photograph replaces it. The owner portrait is deliberately never generated — a synthetic likeness of a named person is a false photograph, not a placeholder.
Components
Focused · 1px Highway Blue, no glow
Spec table
Tabular figures| OD mm | Wall mm | Radius mm CLR | Bend 90° ex GST |
|---|---|---|---|
| 25.4 | 1.6 | 38 | $16.00 |
| 38.1 | 1.6 | 57 | $21.00 |
| 50.8 | 2 | 76 | $28.00 |
| 76.2 | 2 | 114 | $44.00 |
Mandrel bending
A mandrel inside the tube holds the wall while it bends, so the radius comes out round instead of wrinkled and flat. This is what you want anywhere the bend will be seen, or has to flow.
25yr
Boat-building tolerance, now behind the bender. One stat per section, unit in Highway Blue, never a grid of four.
“Rang at four, part was bent by nine the next morning.”
Motion
- Hover, focus, field 120ms
- Panel, card, reveal 400ms
- Line drawing itself 1200ms
- Easing, everything .2, .7, .2, 1
- Reduced motion final frame
No parallax, no scroll-jacking, no counters spinning up. A tradie on 4G sees the finished state first and the animation second.
Where the browser supports animation-timeline, motion is
linked to scroll position so a line tracks the reader instead of
firing on a timer they already scrolled past. Where it does not, an
observer draws it once on entry. Under
prefers-reduced-motion the final frame renders
immediately — not a faster animation, the finished state.
Four steps, drawn as one continuous line down the page.
Scroll-linked: the rail draws as you move and holds at each station. Composed of per-step segments, so no step needs to know about any other and the join is invisible.
- 01
Bring it in or send it through
A drawing, a sketch on the back of an envelope, a photo on your phone, or the old part in a box. Walk-ins are always welcome.
- 02
We check it can be bent
Wall thickness against radius, material against angle. If it will wrinkle or split we tell you before the job starts, not after.
- 03
Bent, measured, signed off
Bent on the mandrel, checked against the drawing, and initialled. Every bend leaves here measured.
- 04
Picked up or shipped
Off the rack in Nerang, or freighted anywhere in Australia.
In the world
Workshop sign / 2400 × 900 · reversed · mark at 25% of height
Adrian Dokter
Owner & operator
07 5596 4744
HIGHWAYTUBEBENDING.COM.AU
Card / 90 × 55 · uncoated 400gsm
4417
Job tag / 105 × 74 · wired to the part
Ute door
Reversed lockup on an Ink panel, never cut vinyl straight onto white paint. Phone number in mono beneath, nothing else.
Bent & checked
19 Aug 2026 · AD
Sign-off stamp
Goes on the drawing and in the quote email. Initials by hand. The cheapest trust signal the business owns.
Embroidery & hi-vis
Cropped mark only — stitch can't hold the second loop. Single
colour, no annotation, 40mm minimum. Use
htb-crop-mono-*.svg from the brand kit.
highwaytubebending.com.au Favicon & social
Cropped mark reversed on Ink, 32px and 512px from the same file.
Avatar never gets the wordmark. Built by
npm run brand:build.
- htb-lockup-on-paper.svgPrint, light ground
- htb-lockup-on-ink.svgReversed, with ground
- htb-crop-on-paper.svgSquare mark
- htb-crop-on-ink.svgSquare, reversed
- htb-crop-mono-ink.svgEmbroidery, one colour
- favicon.svg32 – 512px
The masters in src/assets/brand/ colour themselves from two
custom properties, which a signwriter's software cannot read. These are
generated from those masters with the variables resolved, so the
geometry only ever lives in one place.
One mark, ten colours, two typefaces, four devices. Everything else is discipline.