Colophon
How this site was made
The reasoning behind the design decisions. Nobody usually asks, but there should be an answer when they do.
- The mark
- The mark is the object, drawn: six plates pinned through one rivet, spread evenly either side of vertical. The symmetry is a requirement rather than a preference — on social the mark sits centred in a square with no wordmark to lean on, and an asymmetric mark in that slot always looks like it slipped. The tip symbols are deliberately absent: at that scale they are four pixels of noise, and they are the one part of the system allowed to differ. The mark shows what the six have in common. It had to do the same job in one colour, at sixteen pixels and in blind embossing — which is why there is no shadow, no gradient and no fine detail.
- Type
- Switzer was chosen because it draws six weights out of a single body — the same idea as the system itself. Figures are set in Geist Mono, because Switzer ships no tabular figures and numbers that need to align were not allowed to shift.
- Colour
- The brand has no single accent colour; colour belongs to the tool. One CSS variable flows down the page, and when a section claims it, every rule, dot and focus ring underneath retunes itself. Six values, one mechanism.
- Motion
- Expo for entrances, quart for exits, a spring curve reserved for the fan. Motion is not decoration — it explains where something came from. If the system asks for reduced motion, all of it stops.
- Stack
- Next.js App Router, Tailwind v4, Motion, next-intl. Images were generated, then cut out of their backgrounds and placed one by one. Fonts are served from our own origin, with no third-party request.
Tool colours
- Product Management
- Exchange & Crypto Infrastructure
- Banking Applications
- Artificial Intelligence
- Digital Strategy
- Brand
Scale
- Display 1I picked them all.
- Display 2I picked them all.
- Display 3I picked them all.
- Display 4I picked them all.
- LedeI picked them all.
- BodyI picked them all.
- Eyebrow / monoI picked them all.