02 / Internal system
Atlas
The token and component system every Invisent build starts from — one set of values shared by the design files and the production code.
- System
- Invisent
- Year
- 2025
- Sector
- Design systems
- Capabilities
- Brand SystemsDigital ExperienceDevelopment
- 01Two-layer tokens
- 02Stateful components
- 03Motion contract
- 04Bilingual typography
Internal system. Built and operated by Invisent for its own use. No client data is involved and no performance claim is made on this page.
Context
Design systems usually fail in the gap between the file and the build. The palette is decided in one place, re-typed in another, and six months later the two disagree by a few percent of opacity that nobody can trace.
Challenge
We needed a foundation that could carry very different client identities without resetting the engineering each time: a system where the structure is constant and the identity is a set of values that can be swapped.
Approach
Atlas separates two layers. The primitive layer holds the raw decisions — colour ramps, the fluid type scale, the spacing rhythm, the motion curves. The semantic layer names them by role: surface, line, ink, signal, focus. Components only ever read the semantic layer, so changing an identity means changing values, not components.
Accessibility is built into the primitives. Every semantic ink and surface pair is defined together with the contrast ratio it must hold, so a theme cannot be introduced that quietly fails an audit.
System
- 01
Two-layer tokens
Primitives hold the raw values; semantic tokens hold the roles. Components never touch a primitive directly.
- 02
Stateful components
Every component ships with default, hover, focus-visible, active, loading, empty and error states, because the missing ones are what make a build feel unfinished.
- 03
Motion contract
Three durations, three easings, and one rule: only transform and opacity animate, and everything collapses when motion is reduced.
- 04
Bilingual typography
Latin-extended coverage and layout rules tested with Turkish copy, which runs longer and breaks differently from English.
Where it sits in the chain
- 01FoundNot part of this entry
- 02ReadIn scope
- 03ChosenNot part of this entry
- 04AskedNot part of this entry
- 05AnsweredNot part of this entry
- 06CountedNot part of this entry
Derived from the disciplines this entry used: a stage is marked when one of them owns its invisible half.
Measurement
A design system is measured by what it prevents, which is hard to count. Two things are countable and we watch both: how many one-off values get added outside the token set, and how much stylesheet weight every build inherits from it.
Both are checked against a budget on each release rather than quoted once on a page. Neither says anything about whether the system is pleasant to work in — for that we ask the people using it.
Outcome
Atlas is the reason a new Invisent build starts at the component stage instead of the decision stage. This website is built on it, which is the most direct demonstration available: the tokens rendering this page are the ones in the system.
Capabilities involved
- Brand SystemsIdentity built as a working system — tokens, type, motion and language — not a logo with a PDF attached.
- Digital ExperienceInterface design for sites, products and campaigns, designed at the component level and proven on a real phone.
- DevelopmentProduction engineering: typed content, server rendering, performance budgets and a build someone else can maintain.
—Start
Have a system worth building?
Tell us what the business needs to do. We will tell you what it takes to build it, and what it takes to keep it running.