Horizon Stays: guest web, iOS app and staff back office, one design system.
Horizon: a design system for a UK holiday-home booking product, proven by shipping a web app, an iOS app and a back office on top of it.
Horizon Stays, the guest web home, built from Horizon components and tokens.
| 23 | 179 + 50 | 328 | 3 |
|---|---|---|---|
| components, all released | light tokens + dark overrides | staging tests passed | surfaces: web, app, back office |
This section sets up the project: what Horizon Stay is, the problem I started with, and the question I wanted to answer. Horizon Stay is a UK holiday-home booking product with a guest website, an iOS app and a staff back office. Everything after this is evidence for one claim: that a single design system can carry a product from raw screens to working code.
💭 Can one design system carry a product from raw screens to working code without design and build drifting apart?
This section explains how the system was built from the raw file: the order I worked in, the decisions behind it, and the foundations (colour, type, spacing) and components that came out of it. The pictures are the real tokens and the real Figma component pages.
The path from the raw file to a published system and a product. Each step leaves evidence the next one reads.
I audited the raw file first (11 audits), then built tokens, then components, and only then the product. These are the decisions behind that order.
| Decision | Why |
|---|---|
| Tokens before components | Hardcoded values cannot be themed or kept in sync |
| Figma is the source of truth | Tokens export from Figma as JSON and the build follows them |
| One component per Figma node | Props are named like Figma, so there is no lookup |
| Build up, never sideways | Organisms compose molecules and atoms, never the reverse |
| A literal needs a written ruling | A value with no token is a gap to record, not a number to round |
| Status comes from evidence | A typed status drifts. A link or a test row does not |
| Builder never checks own work | Engineer builds, QA tests, PM audits, nobody grades themselves |
| Humans hold irreversible steps | Sign-off, version tag and npm publish stay with a person |
| Docs come from intent files | When to use, when not to, accessibility and tokens, per component |
| Prove it on a real product | A system looks finished until something real uses it |