Reference

Brand guide.

Four colours, three typefaces, one mark. Everything here is painted from the live values the site ships, so it cannot drift from what is actually in use.

Palette

The four colours.

Used at full strength. Everything else in the system is a tint or shade of one of these.

Prussian Blue

The primary

Headings, body text, the dark surface, and the primary button. Where the brand feels solid.

Smart Blue

The interactive

Anything you can act on: links, hovers, focus rings, plus the one accented line in the hero. Clears AA on every light ground.

Khaki Beige

The neutral

Warm structure. Every tint in the paper and rule scale derives from it, and at full strength it carries text on dark.

Vivid Tangerine

The accent

One accent, used sparingly. Marks, fills, and the primary button's label. Never body text.

Working tones

Derived from the four.

The steps needed to set a page: backgrounds, body copy, hairlines. Each one is a tint or shade of a brand colour, never a new hue.

Porcelain

The ground. The lightest surface, cards and panels

Paper

Default background. Porcelain warmed with Khaki

Paper deep

Alternating bands and the footer

Rule

Hairlines and dividers

Ink 2

Body copy. Prussian Blue stepped toward Smart Blue

Muted

Captions, labels, metadata. The same ramp, one step further

Blue deep

Hover state for anything set in Smart Blue

Usage

How the colours behave.

Most of these come down to one thing: two of the four brand colours cannot legibly carry text, so they never do.

Let Prussian Blue carry the weight. It is the primary, not a text default.
Use Smart Blue for anything a person can act on, and nothing they cannot.
Use Khaki at full strength for text on dark surfaces, where it is warmer than a grey.
Keep Tangerine scarce. One accent per view is usually the right amount, and the primary button already spends it.
Never set text in Vivid Tangerine or Khaki on a light background. Both fail contrast at every size.
Never use Smart Blue for a heading that is not interactive. The hero's second line is the one sanctioned exception.
Never introduce a fifth colour. Tints and shades of the four, only.
Never place the mark on a dark surface. There is no light variant yet.

The evidence

WCAG 2.1 ratios, measured in your browser from the current values. 4.5:1 is the threshold for text.

Prussian Blue on Paper

Body copy on Paper

Muted on Paper

Smart Blue on Paper

Smart Blue on Paper deep

Porcelain on Smart Blue

Khaki on Prussian Blue

Tangerine on Prussian Blue

Vivid Tangerine on Paper

Khaki on Paper

Typography

Three faces, three roles.

Archivo carries personality, Plex Sans carries the reading, Plex Mono carries the structure. Nothing borrows another's job.

IBM Plex Sans

Body

We are a contract engineering studio. You bring the idea and the deadline; we do the design, the build, and the launch.

Drawn for technical documentation, so it stays even at long measure and pairs with Archivo without competing.

Weights: 400 · 500 · 600
Setting: 16–18px · line-height 1.65

IBM Plex Mono

Utility

SELECTED WORK · 2023 · TYPESCRIPT

Carries labels, metadata, and anything that should read as specification rather than prose.

Weights: 400 · 500 · 600
Setting: 11px · 0.16em tracking · uppercase

The mark

Icon and wordmark, together.

They travel as one lockup. The icon may appear alone where space is tight; the wordmark should not appear without it.

Clear space

Keep space equal to the icon's height clear on every side. Nothing sits closer than that.

Minimum size

Do not render the wordmark below 100px wide, or the icon below 16px. Below that the bracket stops resolving.

Light surfaces only

The artwork is dark-on-transparent. It belongs on Porcelain, Paper, or Khaki tints, never on Prussian Blue.

Do not rebuild it

Never retype the wordmark, recolour the tiles, change the spacing between icon and word, or add effects.

The icon is the palette

Its four tiles are the four brand colours, exactly: Prussian Blue, Smart Blue, Khaki Beige, and Vivid Tangerine. The mark is not decorated with the palette. It is the palette, which is why nothing may be recoloured or substituted.