CASE 01 · DESIGN SYSTEMS
Skeletor: a design system used by around 15 applications
- Role
- Main developer
- Years
- 2020 — 2026
- Current version
- 4.2
- Company
- Game Strategies
Aa sansation
The challenge
In 2020 Game Strategies had products in Angular, Vue and React, each with its own styling layer. It needed a single visual source of truth that worked in any framework and that a small team could maintain for years.
Three decisions
Web components, not one library per framework
With Lit and Shadow DOM, the same component works in the Angular LMS, the Vue campus and the micro-frontends without being rewritten.
Tokens as the single source of truth
Colours, typography and icons are generated with style-dictionary and distributed via npm and CDN. A brand change reaches every app.
Accessibility and modern CSS as a requirement
In 2026 I rebuilt GlTable with CSS grid, container queries, ARIA roles and keyboard sorting, and created GlTabs with RTL and high contrast support.
Results
~15
applications use it
27/35
original components are mine; the rest, the team's
87
npm releases (system and tokens)
6
years of continuous evolution
How it started, in 2014
The idea behind Skeletor was already in this portfolio's SASS framework: toggleable modules, breakpoint maps and a mixin per breakpoint.
// settings.scss · pixeltomas, 2014
$breakpoints: (
'small' : 20em,
'medium' : 48em,
'large' : 60em,
);
@mixin respond-to($breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}From a SASS framework to a design system
Skeletor didn't come out of nowhere: it's the third version of the same idea.
- pixeltomas's SASS framework
Toggleable modules, breakpoint maps and mixins for this portfolio.
- GameLearn SASS framework
The platform style guide: components documented with their HTML and SCSS variables.
- Skeletor
Lit web components with design tokens that work in any framework.
What I learned
I learned to love my work.