Concept
Northline
E-commerceA storefront concept for a considered-purchase catalogue, where the product page has to do the work a showroom used to.
- Commerce strategy
- Interface design
- Storefront engineering
ConceptDesign system · 2024
Helix
Decide once. Apply everywhere.
A design system concept built to answer one question: how much of a product interface can be decided once and reused everywhere?
Overview
Status
Internal design and engineering exploration
Disciplines
- Design systems
- Tokens
- Accessibility
- Documentation
Capabilities used
The challenge we set ourselves
Design systems usually fail in the same place — the gap between a Figma library and what engineering actually ships.
We wanted a system where the tokens are the single source of truth for both, and where drift is visible rather than gradual.
Approach
StrategyDesignTechnology
01
Strategy
Token-first. Colour, type, spacing, radius and motion are defined as data, and both design and code consume the same values. Nothing is described in prose that could be described as a token.
02
Design
A component set designed with every state included from the start — empty, loading, error, disabled, dense — because those states are where systems actually break.
03
Technology
Tokens compiled to CSS custom properties and a component library documented alongside its own source, so the documentation cannot go stale independently of the code.
Outcome
What the exploration produced
A token specification, a component library covering the full state matrix, and contrast checks built into the token pipeline so an inaccessible pairing fails the build.
- Token specification
- Component library
- State matrix
- Automated contrast checks
Why there are no numbers here. This is an internal concept, not a client engagement. We do not publish conversion rates, revenue or satisfaction figures that no real deployment produced.
More work
Start here
Build something like this.
If this is close to the problem you have, tell us about it. We will be specific about how we would approach yours.