# 08 · Graphic elements

Ten devices recur across the artwork, and two rules govern all of them: scale is binary and the only diagonal is 12°. Everything else on this page is a description of something that already exists.

*Updated 2026-08-11. Source: https://brand.haux.studio/graphic-elements*

## Two rules sit above every device

Before any specific device, the two constraints that decide whether a composition belongs to the system: how big the mark is allowed to be, and which angles exist.

Scale is binary. The diagonal is 12°.

### The scale rule is binary

The mark is either 30% of the frame or smaller, or 140% and larger. Nothing sits in between, and the gap is the rule rather than a tolerance.

In the middle band the mark competes with the type for the same attention and wins neither. Below 30% it reads as a mark; above 140% it reads as a surface, and both are useful.

The oversized case runs 140 to 210% of the frame, cropped so only a fragment enters. Past 210% the fragment stops being recognisable as the mark at all.

### 12° is the only diagonal permitted

The angle comes from the wing-edge construction of the mark, so a rule, a crop, a type block and a mask all share one geometry. Any second angle reads as a second system running underneath the first.

Verticals and horizontals are always available and remain the default. The 12° is a device to be used once in a composition, not a texture to fill it with.

> 12° or square. There is no third angle.
>
> — Taken from the wing edge of the mark

## Ten devices, grouped by what they do

Each device below already appears in produced work. Where a device has a construction that cannot be faked with CSS, the construction is stated, because the shortcut is always the first thing attempted.

#### Container shape

A notched octagon: a squared superellipse with concave cuts at each corner.

The container is a squared superellipse whose four corners are cut inwards rather than rounded. Those concave corners are the whole identity of the shape, and they are what makes it recognisable at thumbnail size.

Concave corners cannot be produced by border-radius. Every implementation is an SVG path or a clip-path polygon, and any attempt to approximate it in CSS resolves to a plain rounded rectangle.

##### Three jobs, one shape

It works as an outline lockup, drawn as a stroke around a mark or a line of type.

It works as a photo mask, with the image cropped to the notched edge rather than to a rectangle.

It is the silhouette the aura is built from, which is why the two devices have to stay in step.

*Gap: the canonical path has not been exported. Until it is, every build redraws the shape and the corner cuts drift between artefacts.*

#### The aura

Five nested copies of the container silhouette, each inset further, with a fixed blend stack.

The aura is built, not blurred. It is five copies of the container silhouette, each one inset further than the last, with the blend modes fixed in order.

The stack runs normal, overlay, color-dodge, multiply, normal, from the outermost copy inwards. Those are the CSS keyword spellings, kept as written so the value can be pasted rather than translated. Reordering the stack produces a different object, not a variation of the same one.

##### It is not a Gaussian blur

Rebuilding it as a blur loses the construction. The banding between the five layers is the effect, and a blur averages away exactly the thing that makes it read as built.

The dodge layer is what produces the hot inner edge and the multiply layer is what stops the whole object floating. Remove either and the aura reads as a glow, which is a different and much more common device.

*Gap: the inset distances are not published. They are currently judged by eye per artefact, which is the reason two auras rarely match.*

#### Selection device

A highlight rectangle behind a line of type, with two grab handles, one flipped.

A coloured rectangle sits behind one line of type, with a grab handle at each end and the second handle flipped, exactly as a text selection renders in an interface.

It is the identity’s wink at being a product design studio, and it is the most ownable device in the system. Nothing else here would be hard for another studio to arrive at independently.

##### Where it goes

Put it on the line you would say out loud. Its job is emphasis with a joke attached, so it only works on a line worth emphasising.

Proposed and not yet decided: one selection per artefact, and the handles always drawn at the same weight as the type they sit against.

*Gap: the highlight colour is undecided. It is orange in most existing work and takes the artefact accent in the rest, and those two rules produce different results on an orange ground.*

#### Cropped mark

The mark at 140 to 210% of the frame, positioned so only a fragment enters.

Scaled past the frame, the mark stops being a logo and becomes a surface. Position it so a single recognisable fragment enters the composition and the rest runs off the edge.

The fragment has to be a fragment of something identifiable: an edge, a wing, a corner of the counter. A crop that lands on flat interior area is just a shape.

This is the upper half of the binary scale rule. Anything between 30 and 140% is out of the system.

#### Type as texture

Ghost bleed, tiling, and the centre-axis lock. Three ways the wordmark stops being a signature.

##### Ghost type bleed

Set the wordmark at roughly 2.5 times the frame width, at 5 to 8% opacity, running off both edges. It reads as a watermark that was never meant to be read.

Above 8% it competes with the content and below 5% it disappears in print. Both failures look like a mistake rather than a choice.

##### Tiled type

The wordmark repeated on a regular grid becomes a field rather than a signature. Use it as a ground behind a single foreground object, never behind running text.

Tiled type and ghost bleed do not appear together. Both are the same move at different scales, and using both reads as indecision.

##### Centre-axis wordmark lock

The wordmark sits on the vertical centre line of the frame, locked to the top or the bottom edge. It never sits in a corner.

Corner placement is the default for most identities, which is precisely the argument for the centre axis here. It is the cheapest way to make a frame recognisable at a glance.

#### Surface treatments

Halftone dissolve, grunge silhouette, and tone-on-tone. Three ways a flat area stops being flat.

##### Halftone and dither dissolve

An image or a shape dissolving into a halftone or dither grid is used to end an element rather than to fill one. The dissolve runs in the direction the composition already reads.

It is a print reference, so it should look like a print artefact: hard dots, no anti-aliased softness, no gradient standing in for the grid.

*Gap: dot size, screen angle and threshold are not recorded. Every use so far has been tuned by eye, so no two dissolves match.*

##### Grunge-textured silhouette

A solid silhouette carrying a distressed texture, so the fill reads as printed rather than rendered. The texture belongs to the shape and never to the background.

Applied to both, the composition reads as a photograph of a poster instead of a poster.

##### Tone-on-tone

Two values of one hue, and only one hue. A tone-on-tone panel that reaches for a neutral as its second value is no longer tone-on-tone, it is a two colour panel with low contrast.

This is the treatment that makes a quiet frame still look deliberate. It also keeps the accent budget intact, since two values of one hue read as one colour.

## The five ways these devices get broken

Every pair below has happened. Each one is the shortcut that gets taken when the construction is not to hand.

**Scale is binary: 30% and under, or 140% and over.**

- Do: Mark at 18% of the frame in the corner lockup, or at 170% cropped to a wing edge.
- Don't: Mark at 70%. Too large to sit as a mark, too small to work as a surface, and it competes with the headline.

**The aura is built, not blurred.**

- Do: Five nested silhouettes, insets increasing, blend stack in the published order.
- Don't: One Gaussian blur behind the shape. Faster to make, and it loses the banding that the device is made of.

**The container is a path, not a radius.**

- Do: An SVG path or clip-path polygon carrying the concave corner cuts.
- Don't: border-radius set high enough to look similar. It resolves to a rounded rectangle at every size.

**One diagonal, and it is 12°.**

- Do: Every angled edge in the composition cut at 12°, with everything else square.
- Don't: A 30° crop introduced to balance a 12° rule. Two angles read as two systems.

**The wordmark holds the centre axis.**

- Do: Wordmark centred on the vertical axis, locked to the top or bottom edge.
- Don't: Wordmark set in the bottom right corner, which is where every other identity puts it.

## What is not built yet

Five of these devices are documented but not produced as assets. Recording that is worth more than asserting a decision nobody has made.

No exported path exists for the container shape. It is redrawn per artefact, so the corner cuts already differ between pieces made two months apart.

The aura is documented as a construction and has never been built as a component. Its five inset distances are judged by eye each time.

Halftone parameters are unmeasured. Dot size, screen angle and threshold need recording from the existing work before the next use, not after.

The selection device has no agreed colour rule, which matters most on an orange ground where the current practice produces two different results.

There is no pattern library file. Ten devices described in prose and none of them available as an asset is the single largest gap on this page.

*The fix for all five is the same and it is small: one file, ten artboards, exported. Until that exists, this page documents intent rather than practice.*