Not one single thing

Before you change anything

The short version, for anyone (or anything) implementing against this system. Everything below this section is the long version.

I

Identity foundations

Two registers

This is the first rule because everything else bends around it. The work goes out under two registers and they are kept apart: art runs a chapter-variable visual language, and business goes out monochrome as Astle Creative. Merging them is the one thing the system forbids outright.

It is enforced in code rather than by discipline. BaseLayout stamps data-register on the root element, and the stylesheet answers:

:root[data-register="studio"] {
  --accent: var(--ink);
  --accent-press: var(--graphite);
}

One line covers light and dark, because --ink is itself theme-dependent and resolves at use. The vermilion is an art-register device and never appears on a business page.

The two panels below carry the real declarations. The second mirrors the root rule onto itself, because :root[data-register] only ever matches the root element; on the site it is set once, on <html>, and the whole page inherits it.

Palette

Monochrome first, with a whisper of warmth so the neutrals never read as default grey. Each swatch below paints itself with the token named on it, so what you see is what the site holds. Hex values are parsed from the stylesheet at build time.

Light value, then dark. Flip the theme with the control in the masthead and every swatch follows, because none of them carries a colour of its own.

Three voices in tension

A three-way argument, and the tension is the point. Never blend them. Against all three sits a fourth, wordless voice: the hand-drawn marks.

Scale and measure

II

Marks

The FA sunmark

The primary identity mark. Hand-brushed, uneven, stamp-like. Reach for this before any other mark when a single symbol has to stand for Finn or for Astle Creative.

It ships as a supplied vector pair and must be copied, never recreated. The hashes below are computed from the bytes in this repository at build time, so they can be checked against any other copy.

"Dark" and "light" name the mark colour, not the page theme. Both grounds are genuinely transparent: the only full-bleed rect in either file sits inside a clipPath and renders nothing.

How this site renders it

At chrome sizes the site ships one black-ink source and recolours it: --mark-inv is 0 in light and 1 in dark, and .mark applies brightness(0) invert(var(--mark-inv)). One file covers both themes and runs through the WebP pipeline, which does not process SVG.

18px · footer

26px · nav

64px · stamp

Three sizes, one source, recoloured by filter. Below roughly 16px the irregular edges stop reading and the mark becomes a smudge; that is the floor.

Above chrome size, and anywhere the mark sits over photography, the filter cannot be trusted against an arbitrary ground. There, swap to the variant that contrasts, the way the favicons do. The favicons are the only place on the site that currently consumes the white variant.

Secondary marks

The collage cutouts

The cutouts are the library of artistic elements. This system defines how to use them and does not restate what is in it: they have their own index and their own page. Elements are decorative unless they carry meaning, they sit on a checkerboard in the gallery so transparency stays legible, and they are never recoloured to match a page.

Open the collage cutouts →

III

Image language

Age is a dial, not a default.

The identity has halftone, engraving, photocopy and worn print in it, and none of that means everything should look old. Contemporary paper, card, plastic and clean digital surfaces are equally valid. An imperfection is a decision with a reason: it shows a process, dates a source, or gives the eye something true to hold. Applied by habit, it is costume.

The library names its materials

125 elements, grouped by the prefix that says what each one is made of rather than what it depicts. 99 of them were renamed from subject and joke names to these. The taxonomy is the rule: reach for a material, not a motif.

• mark- 39 Hand-drawn and scanned marks
• photo- 22 Photographs
• clipping- 15 Cut and collaged fragments
• print- 15 Printed matter, scanned
• texture- 9 Surfaces and grounds
• comic- 8 Halftone and comic reproduction
• engraving- 8 Engraved and line illustration
• digital- 7 Made on screen
• badge- 1 Fabric and applique
• sticker- 1 Adhesive and label stock

The range, in real assets

Six of 125, chosen to show the spread. Halftone and engraving sit in the same library as a clean photograph and a flat digital render, and nothing forces a vintage pass over the top.

Cropping and placement

Work cards crop to a uniform 4/3. Natural heights were tried and abandoned: a grid of mixed aspect ratios reads as a mistake rather than a decision. Because a fixed crop will cut the wrong part of some images, each chapter carries its own focal point in src/lib/work-chapters.ts, so the crop is authored rather than centred by default.

Collage stamps are the deliberate exception to the content column. They sit outside it and bleed into the shell, which is why .frame runs to 78rem with overflow-x: clip rather than letting them cause a horizontal scroll.

Provenance

Four kinds, kept distinct. The caption carries the difference.

Authentic

A photograph or scan of a thing that existed. Caption says what and when if it matters.

Manipulated

A photograph altered beyond crop and levels. The caption says so.

Assembled

Collage and hand-made composition. Credited as artwork, not as a photograph.

Generated

Made by a model. Labelled, every time, without exception.

When not to use an image at all

The certificates piece lists eight courses. The badges were set in type rather than shown as a picture of the issuer's artwork, because the badges are in four colours that are not ours, and because a picture of a list is how the copy and the heading came to disagree in the first place. Type cannot drift from itself. A screenshot can.

Alt text

Describe what is in the picture, not what it is for. A decorative mark takes an empty alt and aria-hidden. A mark carrying identity takes real alt text. Never restate a caption the screen reader has just read.

IV

Digital design language

Page archetypes

Six, and no page invents a seventh without a reason.

Links and emphasis

Links inherit their colour and carry a 1px underline at a 0.15em offset. The guest appears on hover, as the underline colour, and nowhere else. Emphasis inside the mono body is an underline at 1.5px, never a weight change and never a colour swap: a monospace bold reads as a different typeface, which breaks the voice.

Here is a link, and here is emphasis, in the body voice.

Interaction states

Every interactive thing needs a visible keyboard state. The ring is 2px of ink at a 2px offset, and it is not optional.

Technical and filmic detail

Hairlines, measurement marks, metadata lines and film tags earn a place when they carry navigation, provenance or real technical information. They become decoration the moment they carry none, and the system has already paid for that once: a dashed film-strip spine was documented as "the recurring structural rule" for two months without ever being built. The test is whether removing the detail loses the reader anything.

V

Motion and atmosphere

This is a short section and it should be. Counted from the stylesheet at build time: 2 transitions on the whole site, both on the work card, and a global reduced-motion block that is present.

The gate

Before any motion moves from scoped to approved it needs all six:

1. A stated design purpose. Not "it felt flat".
2. Reduced-motion behaviour that is a real alternative, not a freeze.
3. A performance budget, measured on a phone.
4. Responsive behaviour down to 320px.
5. Keyboard and screen-reader behaviour, and no new focus traps.
6. A fallback that renders before JavaScript and survives without it.

Motion should demonstrate technical proficiency without costing anyone usability. The reduced-motion block at the foot of the stylesheet is the floor, and it is already global.

VI

Retired

Dropped rules are recorded rather than deleted, so nobody reinstates one by reading an old file. A documented mark with no asset is how the next person ends up drawing their own.