03 · Projects
Client confidentiel
Streaming – Subscription platform
The request
A subscription streaming platform was redesigning its whole product, with no settled visual language and no library. The brief covered the high-fidelity mockups. A seven-month engagement as the only designer, under a non-disclosure agreement.
The solution
From the first screens, I suggested building a design system alongside the mockups: primitives, a semantic layer, components and patterns, with WCAG constraints carried by the tokens. I delivered a Figma kit, PDF guidelines and a Claude skill that reviews the developed interfaces and flags gaps with the guidelines, so the system holds after handoff.
Two token layers, not one
Raw values, colours, spacing, radii, live in a primitives collection. A second, semantic collection names intentions: surface, border, text, state. Components only ever read that second layer. That is what makes it possible to change a brand colour without opening a single component, and to discuss decisions with the client in terms of roles rather than hex codes. The same logic applies beyond colour: typography, spacing, radii, border widths, motion durations and breakpoints are variables too.
bg/base points at color/ink/900, border/accent at color/fuchsia/500. Changing the product background means moving that link, not opening the screens.A semantic token puts a name on an intention. It is that name, not the colour, that the developer finds in the code.
From token to component
Components are built with auto layout, variants and component properties, and filled only with semantic tokens. When you select a modal and read bg/overlay as its fill rather than a colour code, that is the sign the system holds: no value is hard-coded inside a component.
bg/overlay, a token and not a colour.What was delivered
- a Figma kit: tokens as variables, components and patterns published as an asset library;
- guidelines as a PDF: anatomy, states, usage rules, accessibility constraints;
- a Claude review skill: it reads the interfaces as built and flags deviations from the guidelines.
Quality control is part of the delivery
A design system degrades the moment it leaves Figma. The developer interprets, undocumented cases get invented, and six months later the product no longer resembles the library. The third deliverable answers that. The skill reads the interfaces produced, checks them against the guidelines and returns the gaps. The check becomes a step in development, instead of a design review that keeps getting postponed.
Accessibility
WCAG constraints are carried by the semantic tokens: a text/surface pair is validated once, at system level, and every component using it inherits the contrast. Checking a screen then comes down to checking that it did not bypass the system.
