---
title: "Spotler Design System"
client: "Spotler Group"
year: "2024 to Present"
location: "Netherlands"
disciplines: ["Design System","Accessibility","Documentation"]
canonical: "https://dejanskondric.com/work/spotler-design-system"
author: "Dejan Škondrić"
---

# Spotler Design System

The foundation for consistent, user-friendly experiences across all Spotler platforms — V1 established it, V2 moved it into ZeroHeight.

## Overview

Spotler Design System is the foundation for creating consistent, user-friendly experiences across all Spotler platforms. V1 established a unified visual language, streamlined component usage, and robust documentation focused on scalability, flexibility, and accessibility. V2 then evolved the system into ZeroHeight to improve discoverability and cross-team adoption, adding dedicated Accessibility and Micro Interactions sections, updated usage guidelines, clearer Do’s and Don’ts, and a more structured approach to component documentation.

## Role

I led the design of the Spotler Design System across both releases, establishing a cohesive visual language and intuitive user experience in V1, then driving the V2 evolution focused on usability, structure, and adoption. UX engineers and developers contributed across teams to refine the system end-to-end.

## Research

V1 focused on five key areas: Design Principles, Foundations (colors, typography, iconography, spacing), Laws of UX, a comprehensive Components library, and Decision Trees to help teams choose the right components for specific use cases. V2 expanded into five enhanced areas — updated components, design principles, foundations, accessibility, and micro interactions — with before-and-after comparisons evaluating coverage and how the updated system improves alignment and usability across Spotler’s core products.

## Challenge

- Different teams used varying styles and components, leading to a lack of cohesion across products.
- The system needed to accommodate future growth and evolving user needs without becoming too complex.
- Teams lacked clear, discoverable guidelines on component usage, slowing design and development.
- Many components weren't optimized for accessibility, limiting usability for people with disabilities.
- Integrating the system with legacy products created compatibility and design coherence issues.
- Documentation was scattered across Figma files and outdated resources, making it hard to locate or trust.
- No central guidance for motion or micro interactions, resulting in inconsistent behavior across products.
- Developers often lacked the context or clarity needed to implement components as intended.

## Solution

- Established a unified, modular component library ensuring consistent usage and a cohesive experience across all products.
- Built a scalable, modular structure that grows with product needs without becoming overly complicated.
- Embedded WCAG-aligned accessibility into every component, improving usability for all users.
- Migrated the entire system to ZeroHeight, a single, searchable platform simplifying discovery and access for all teams.
- Refreshed component pages with clearer usage rules, visual examples, and structured Do's and Don'ts.
- Added a dedicated Micro Interactions section with principles and best practices for intentional motion.
- Clarified the Figma ↔ ZeroHeight relationship — Figma for specs and tokens, ZeroHeight for consumption and developer handoff.

## In closing

The Spotler Design System grew from a structured foundation into a scalable, accessible, and discoverable platform. V1 established cohesion across the product suite. V2 brought that cohesion into ZeroHeight with a searchable home, sharper inclusive-design standards, and a clearer separation between Figma (specs) and ZeroHeight (consumption), positioning the system to scale alongside Spotler’s product ecosystem.


---

[Dejan Škondrić](https://dejanskondric.com/) · https://dejanskondric.com/work/spotler-design-system