An identity built on an 8×8 grid
A brand system delivered as construction rules and design tokens, not as a PDF.
- Client
- JoFunction
- Disciplines
- Brand identity, Design system, Art direction
- Technology
- Design tokens, SVG, CSS custom properties
- -0.03emDisplay type — Space Grotesk, tracking -0.03em
- Mark construction on the 8×8 unit grid
- App tile — 24% corner radius
- Display type — Space Grotesk, tracking -0.03em
- Mark construction on the 8×8 unit grid
- App tile — 24% corner radius
Overview
JoFunction needed an identity that could hold together across a product studio, an advertising network, a store and an education programme — surfaces that normally pull a brand apart.
The challenge
Most identity work stops at presentation. The moment engineering starts picking values out of a document, the system begins to drift. The brand also had to survive extremes of scale: the same mark on a 24-pixel favicon and on the side of a building.
Strategy
Treat the identity as an engineering artefact. Every decision — stroke weight, clear space, corner radius, minimum size — expressed as a rule with a number attached, so there is nothing left to interpret.
Design
The mark is constructed from strokes of a fixed weight on an 8×8 unit grid, with a 24% corner radius on the app tile and clear space set at two stroke units. Function Orange carries the accent role; Ink carries the surface. Space Grotesk handles display, IBM Plex Sans handles everything that has to be read.
Engineering
Colour, type, spacing, radius, motion duration and easing are published as design tokens and consumed directly by the front end. A separate micro-SVG version of the mark takes over below 24 pixels, where the full construction would break down.
Outcome
The identity ships as a working system. New surfaces inherit the brand automatically, and the rules that keep it consistent live in the codebase rather than in a document.
Technology
- Design tokens
- SVG
- CSS custom properties
- Tailwind CSS