Token-Based Design System for B2B Signature Platform
Bozena Bulat
B2B Signature Platform — Token-Based Design System
A from-scratch redesign of an eIDAS-compliant digital signature platform built on an enterprise CRM, used by enterprise customers for legally binding document workflows. I turned an inherited brand layer into a token-based design system that other designers later built on without breaking what's underneath.
Role: design system architecture, token-based theming, component library, information architecture, workflow design. Started solo; the team grew on top of the foundation. 2025.
A system that can't be changed isn't a system — it's a style guide
The setup — a redesign that started with a logo and a colour palette
The product had been in market and was being prepared for a new phase of growth. What I was given was a brand layer — logo, palette, typography, voice — established by a separate studio before I joined. What I was asked to build was everything between brand and product: the system that turns a few visual decisions into a working interface.
Building the system — icons, tokens, components, screens
The system was built in a deliberate order. Each layer constrained the one above it, which is what made it hold together as it grew.
Icons first. The smallest decision that touches every screen — nav, forms, empty states, toasts. Choosing the library (Remix, for breadth and geometric consistency) before defining components gave the system one voice from the first button onward.
Tokens, in three layers. Global tokens hold primitives: brand black, brand white, the colour ramp, type scale, spacing. Alias tokens describe intent, not value —
foreground.1, surface.primary, border.subtle. Component tokens bind aliases to UI elements — button.primary.background, dialog.surface, field.border.rest.Components as token consumers. A button has no hardcoded colour; it references a token. The library covered what the product actually needed: buttons and toggles, dialogs, fields, date pickers, message bars, toasts, text areas.
Screens last. By the time the first surfaces were designed, the system underneath was already stable. Screens demonstrated the system rather than driving it.
The separation did real work. Globals could change without touching components. Aliases let the same primitive serve different intents across light and dark contexts. Component tokens kept the library composable — a new component meant binding existing aliases, not introducing new primitives.
The system in practice — three surfaces, one system underneath
Signature creation
A signature can be saved, drawn, typed, or imported from a device, URL, or cloud storage. The challenge wasn't the variety — it was making seven options feel like one decision. I structured it as a single tabbed surface, with the import path expanding inline instead of branching into a separate screen.
In a high-volume environment search isn't a feature, it's the primary way users find anything. I designed it as an overlay that opens with three regions visible immediately — recent searches, quick links, action items — so the user doesn't have to type to start finding.
Digital signature settings
Enterprise settings pages become long lists of checkboxes grouped by whoever wrote the backend. The platform had four operational concerns users actually cared about — how envelopes are sent, signed, delivered, and what triggers notifications. Each got its own surface, so users go straight to the setting they came for.
What held
When the team grew and other designers built on top of what I'd set up, some decisions held and others got changed. The token architecture absorbed both without breaking — which is the test that matters. Across all three surfaces, the work the system did was invisible. That's the point.
This is the public version. Happy to walk through the rest in a conversation.
Like this project
Posted Sep 24, 2026
Token-based design system for an eIDAS-compliant e-signing platform on an enterprise CRM. Three token layers, one component library, a team built on top.
Likes
1
Views
1
Timeline
Jun 1, 2025 - Dec 20, 2025
