Brand · Design
The Hinge: how the Clockborn identity is built
Great identities decide every rule once and then protect it. Ours has one structural idea — the hinge — and everything else follows from it.
One line, one rule
The hinge sits at exactly half the cap height of the wordmark. It runs through every letter of CLOCK and stops at the K. The gap is 0.14 of the stem weight: a true hairline, crisp from about 300 pixels wide. Below 120 pixels the hinge would fill in unevenly, so a solid cut of the wordmark takes over automatically. The copper B never changes.
Colour with a job
Four colours, each with a role and a share. Midnight Ink (#0D1117) is the ground and the type, about 60% of everything we make. Bone (#F4F1EA) is paper and light ground, about 30%. Steel (#8A94A3) is for hinge lines and hardware, about 8%. Forge Copper (#D9541E) is the B, and nothing else — about 2%. Scarcity is what makes it mean something.
Three voices of type
Barlow Condensed speaks in headlines, signs and interface labels — tall and machined, like the wordmark, but never used to retype it. Fraunces, in its soft cut, carries our sentences: warm and human against the precise mark. IBM Plex Mono labels data, specifications and code. All three are released under the SIL Open Font License, free for commercial use.
Motion turns on the hinge
Things in the Clockborn world do not slide or bounce at random. They open along the hinge, flip like a flap, or settle into place. Our opening animation draws a line of time across the screen, unfolds CLOCK from it, gathers the line into a copper spark at the seam and lets the B be born — then the screen opens along the hinge to reveal the site.
Built to be fast
The website is part of the identity, so it follows the same discipline. Every logo is a hand-fitted vector curve that stays sharp at any size, from a 16-pixel favicon to a 4K display. Pages ship with their styles inline, fonts are cut down to the characters we use, and there is no tracking code at all. The full system, with downloads, lives on our brand page.