Identity

The mark, and the three passes it took

The finished mark is the P&ID symbol for a control valve: two triangles seated on a pipe run, with a stem and an actuator above it. It is the drawing convention every engineer in this trade reads every day, and it is literally the thing that holds a setpoint. Getting there took four concepts and three rounds, and the rejected work is on this page because the reasoning is the deliverable.

Pass 1 — four concepts

Each rendered at 72px and at 24px on both a light and a dark field, because the 24px column is what actually decides an icon (PITFALLS §J6: an icon that needs interior detail fails at button size, on the most important control on the site).

A valve-on-the-linekept The P&ID symbol for a valve, sitting on a pipe run. Right meaning, wrong proportions: the bowtie is too wide and too shallow, so the mark is a letterbox and at 24px the run swallows the valve.

B notched-dialkilled A ring with the setpoint gap at twelve o'clock. Rejected outright — a heavy ring with a gap at the top and a bar inside it is the universal power symbol, and nothing survives that collision.

C duct-skilled A monogram S drawn as a constant-width duct run. The most successful shape of the four and the only one that held at 24px unchanged — but it means nothing beyond the letter.

D settle-tracekilled A damped oscillation converging on the datum. Lovely idea, unusable drawing: at 96px it reads as a handwritten "Aa" because the overshoot spike becomes a letterform.

Pass 2 — proportions

A kept its meaning and lost its letterbox. B and D were dead; C got one more chance and did not earn a third. E was a new idea that failed the same 24px test.

A2 valve-squaredkept Triangles taller, run reduced to stubs. Holds at 16px. WINNER of this round.

A3 valve-gappedkilled The gap turns the triangles into two arrows converging. Legible, but an open valve is not what holds a setpoint.

C2 duct-s-balancedkilled Equal arms, optically corrected. Still a monogram.

E damper-bladekilled A VCD blade across a duct section. Rejected: below 48px a box with a diagonal reads as a prohibition sign or a broken-image placeholder.

Pass 3 — the actuator

A2 still read as a bowtie or a media transport control. Adding the stem and the diaphragm block is what makes it a control valve — and it gave the mark the vertical presence it had been missing.

F1 valve-stem-nodefinal A2 plus the actuator — stem and diaphragm block. This is what makes it a CONTROL valve, i.e. the thing that receives a setpoint, rather than a bowtie. Vertical presence solved. FINAL.

F2 valve-stem-barkilled Same, with a thin bar instead of a solid block. Weaker at 16px.

F3 valve-seatedkilled A flat seat where the triangles meet. Loses the valve reading and becomes two arrows facing off.

A2 valve-squared-refkilled Carried forward for comparison. Flatter, less distinctive.

The suite

Primary lockup logo/primary.svg Mark and wordmark, horizontal. The default in page chrome above 48rem.

Primary with descriptor logo/primary-descriptor.svg For letterheads and anywhere the trade needs naming.

Stacked lockup logo/stacked.svg Narrow chrome, square avatars, the mobile drawer.

Icon alone logo/icon.svg viewBox cropped to the mark bbox so it fills its frame. Must read at 24px.

Monochrome, light field logo/mono-light.svg Single ink. Fax, embroidery, one-colour print.

Monochrome, dark field logo/mono-dark.svg Same geometry, inverted ink.

Reversed logo/reversed.svg For brand-coloured fields.

Favicon logo/favicon.svg A redraw, not the mark shrunk: the run stubs go, everything else grows.

Size tests

The icon down to 16px on the page field, then on ink, then the favicon redraw. The favicon is a different drawing: the run stubs are the first thing to disappear at small size and losing them costs no meaning, because the valve body already implies the line it sits on.

Why a gradient, and which two stops

A theme logo ships as a data: URL and cannot read page CSS, so currentColor is out (PITFALLS §C4). That leaves two options: palette-neutral by design, or a self-sufficient gradient. This suite takes the gradient, because the two stops say something — copper is the heat side of this trade and petrol is the cool side, and the mark runs from one to the other.

Both stops are solved, not picked: a stop clears 3:1 against both a near-white and a near-black field only if its relative luminance sits inside roughly 0.125–0.298. Copper lands at 0.155 and petrol at 0.235, which measures 5.12:1 and 3.68:1 against white and 3.68:1 and 5.12:1 against the darkest page in the set.

Two further traps are handled in the source: the gradient is gradientUnits="userSpaceOnUse", because the pipe run is a perfectly horizontal path and a default bbox gradient is degenerate on a zero-height box — the element is then not rendered at all (§C1). And every gradient id is namespaced per variant, because this page inlines several of them at once (§C3).

#BA4A12
L 0.155
copper

#1192A9
L 0.235
petrol

These two hexes are the only raw colour values in the whole theme that live outside tokens.css — and they live inside the SVG files rather than in a stylesheet, because a logo that reads the palette is a logo that disappears on one of the six.

The wordmark is outlined to paths from Chakra Petch Bold rather than set as <text>, for the same reason: a data-URL logo cannot load a webfont, and a <text> element would silently render in whatever the viewer happens to have installed.

Against all six palettes

The switcher bottom-right changes the page under the marks. The gradient variants do not move, which is the point; the monochrome and reversed variants are the ones to use when the field is known.