DESIGN

There is a moment in building a page where it stops being a pile of parts and starts being a thing with a character. It is never one big design decision. On this site it happened through a handful of small rules, each of which is boring on its own and which together explain why the page looks like this page.

The numbers below are counted from the stylesheet, not remembered.

One shape for every box, cut on one corner

Twenty times in the stylesheet a box gets told to lose its corners. Not all four, and not the soft rounding a button usually gets. The same two diagonal cuts, one on each end:

clip-path: polygon(
  16px 0, 100% 0, 100% calc(100% - 16px),
  calc(100% - 16px) 100%, 0 100%, 0 16px
);

That draws a rectangle with the top left and bottom right corners sliced off at 45 degrees. It is not round. It is not a square corner either. Once it is on the cards, the panels and the sign in box, the eye stops reading each one as a box and starts reading the cut as "this is something on ferno".

The value is a variable in spirit even though it is repeated by hand: small boxes are cut by 10 pixels, large ones by 16. The rule is that the cut scales with the corner it is cutting, because a 10 pixel chamfer on a tall panel disappears while a 16 pixel chamfer on a small chip swallows it.

Accent colour, written once

The stylesheet has 33 custom properties and two that do the heavy lifting on every card and panel: --accent and, for text, --accent-ink. A card sets its accent. Everything else inside derives from it, including colours that are mixed on the fly with color-mix, which appears 21 times.

That is why a border, a bullet, a label and a glow all agree with each other without anyone picking them one by one:

border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);

This is not just tidy maintenance. It is what makes the difference between a featured thing and a normal thing a matter of one number. The two desks set their accent to the colour of their own mark and the whole panel follows. The brand marks elsewhere on the site keep their own identity colour, because for those the colour is the identity.

A row where the two halves mean different things

The clearest recent example is the list of features on each desk. It holds six points, three on the left and three on the right, and the two columns are not equivalent. The left column is what the desk does today, in strong accent colour with solid square markers. The right is what is being built, in the same accent at reduced strength with hollow markers.

Nothing was invented for this. There is no third colour and no extra font. The difference is carried by one variable being mixed with transparency, and by a marker being drawn as an outline instead of a fill:

.desk__col--plan .desk__facts li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent);
}

That is enough for a reader to sort the two halves in one glance without reading a word. Planned work should look planned. Dressing a roadmap in the same ink as a shipped feature is how a page starts to overclaim.

Two fonts, with jobs

There are exactly two typefaces in the system, each declared once and each with a job it never leaves. A pixel face for headings, labels and buttons, used at small sizes where a bitmap grid still works. A modern sans for anything longer than a label, because a paragraph set in a pixel font is a puzzle rather than text.

The split is the whole reason the site can look retro and stay readable. Retro typography fails when it is used for body copy. A heading in pixels is a mood. A paragraph in pixels is a decision the reader pays for.

Icons on one grid

Ten marks on the hub, all drawn on the same 24 by 24 grid. The GitHub, Discord and X marks are pulled from simple-icons at build time, so they are the real logos rather than approximations. The few marks with no entry in that set are drawn by hand, but on that same grid, so they sit at the same weight and optical size as the ones that were not.

Mixing an official mark with a hand-drawn one is where most icon rows fall apart. The official marks are built to a consistent hairline and the hand ones typically are not, so the eye catches the odd one out immediately. Drawing to the same grid is the fix, and it costs almost nothing if you decide it before you draw.

Motion that respects the person watching

The stylesheet has 20 keyframe animations and one block that turns all of it off. One. Every entrance, every glow and every sweep is wrapped by a single prefers-reduced-motion rule that collapses duration to almost nothing and forces the content visible so a stalled animation can never hide a section.

That is a design decision as much as an accessibility one. The fire and the entrances are the character of the site, and character that someone cannot switch off is not character, it is friction. Keeping the override in one place rather than sprinkling it per animation is what makes that promise cheap to keep.

What actually makes a visual system

Not a colour palette, and not a font pairing. It is a small set of rules that get applied without being reconsidered: one corner treatment, one accent derived everywhere it is needed, one typographic split, one icon grid, one motion escape hatch, and a clear visual difference between a promise and a plan.

Get those and a page looks deliberate even while it is half built. Miss them and a page looks busy at every stage, because every part is making its own small decision about what it is.