Design Language

Elements.

Every part this site is built from, on one page. If a part is not here, it is not in the design.

Colour

Red, black, and cream. Sharp edges, no radius, no shadows except the hard offset on cards. Depth comes from border thickness.

  • Primary --color-primary #1A1A1A Text, borders, black slabs
  • Accent --color-accent #C62828 Red. Used sparingly, so it lands
  • Accent dark --color-accent-dark #8E0000 Hover states, tag text
  • Accent tint --color-accent-tint #F0DCD5 Tag backgrounds
  • Background --color-bg #F5F0E8 Cream page ground
  • Surface --color-surface #FFFDF7 Cards and raised panels
  • Muted --color-muted #555555 Secondary text

Type

Three families, three jobs. Nothing shares a role.

Bebas Neue / Headings

Build. Teach. Organise.

Source Serif 4 / Body

Different domains fail in the same way. People stop caring about how things work, and the system rots from the inside.

Space Mono / Labels and UI

Health Tech / Defence / Civic Technology

Core Elements

Buttons / Primary, Ghost, Small
Primary Ghost Small ghost
Buttons / On dark
White Ghost dark
Tags / Default and muted
  • TypeScript
  • Astro
  • Node.js
  • +4
Principle list / Inline
  • TDD on every project
  • Pair programming
  • Daily code reviews
Principle list / Stacked
  • TDD on every project
  • Pair programming on every feature
Manifesto list / Giant type ledger, light and dark
  1. 01 The Craft Test first, in pairs, reviewed daily.
  1. 02 The CRM Members, volunteers, every conversation.
Mark list / Red square, word, note
  • Humility Stay grounded, however strong you become
  • Ownership If I shipped it, I answer for it
  • Curiosity Read the source when the docs run out
Spec sheet / Industrial data plate
Code
Test first
Mouse
None
The work
Understanding
Step list / Cascading steps with red chips, for black bands
  1. 01 Name it The problem, stated plainly.
  2. 02 Prove it Built where it is hardest first.

Cards

Cards lift towards the cursor and cast a hard black offset. The hover is the only movement they are allowed.

Project card
Civic Technology

Specimen Project

A short summary of what was built and why it mattered, in one or two sentences.

  • TypeScript
  • Vue
  • PostgreSQL
  • +1
Post card

Specimen Post

The opening argument of a piece of writing, stated plainly enough to decide whether to read on.

  • Craft
  • Teams

Editorial Blocks

Section heading / With index

Specimen Heading