Verizon Media / Edgecast
Bindable design system
A themeable design system built in Aurelia JS for Verizon Media’s streaming products — tokens, layouts, components and value converters that designers and engineers could both rely on.
A design system that doesn’t force one look.
The usual downside of a design system is that it locks every product into one visual style. Bindable avoided that with theming through CSS custom properties: teams could use the default look, or re-skin it without forking components. That mattered in an organization stitched together from several products and brands.
The documentation was organized the way both designers and engineers think: tokens, layouts, components, elements, access modifiers and value converters — each with usage, properties and theming variables.
Color tokens, named for their role.
Component docs with properties and variants.
Value converters and edge cases.
A lot of an ops UI is formatting: durations, dates, money, yes/no, empty values. Bindable’s value converters made those consistent everywhere — so “N/A” looks the same in every table, and nobody writes their own date formatter at 5 p.m. on a Friday.
Value converters, documented with real table usage.
Timeline component for scheduling views.
Reviewing icon alignment API details.
Toast service usage.