Building the eLockr Design System

Streamlining design and development workflows for a consistent user experience.

eLockr Design System
Company eLockr
Role System Architect
Team Solo Designer

The Backstory

eLockr lets companies issue digital, fraud-proof work records. For the first year, I was the sole designer. I moved fast and kept every design rule—like specific blues and button padding—in my head. With only one person touching the files, I didn't need documentation.

The Backstory

The Problem

As the design team expanded, inconsistencies emerged in color usage, typography, and spacing. Design reviews shifted focus from solving user problems to debating technical pixel values. The lack of a shared source of truth created a bottleneck and led to "design drift" across different product features.

The Problem

The Solution

A scalable, logic-first design system was built using an incremental approach and Figma Variables. Key implementation steps included:

Color and spacing primitives

Primitives & Tokens

Standardized a 50–900 scale for neutrals and brand colors, then mapped them to semantic names (e.g. Surface/Error) so we could rebrand or add modes by updating one place.

Semantic tokens

Semantic Tokens

Mapped primitives to intent-based semantic names (e.g., Surface, Error, Primary) so one change could update the entire system.

Atomic Components

Mapping colors to intent-based names (e.g., Surface/Error) to allow for easier future rebranding or theme updates.

Button component states
T-Shirt Sizing

T-Shirt Sizing

Creating standardized tokens (S, M, L) for spacing and corner radiuses to align design language with engineering code.

Impact * Increased Speed

Accelerated the onboarding process for new designers and reduced time spent on repetitive UI queries.

Speed

Border/Default tokens killed the 'Which grey?' guesswork.

Consistency

Three designers, zero drift—all screens looked like one person built them.

Developer Happiness

Engineers mapped tokens to CSS, killing the spacing guesswork.

Want to see more?

Get in touch.