Design System
for Skilltype V2
Leveraging Tailwind CSS to establish a design system from scratch to create a more efficient, consistent, and scalable design process.
Role
Founding Product Designer
collaborators
CTO
•
2 SW Engineers
Duration
January 2021 – March 2021
Contributions
Strategy
•
Product Design
•
Design System Management
•
Handoff & QA
Background
Context
Skilltype V2 was an initiative that aimed for a complete refresh of the platform, allowing for a cleaner codebase, smoother scaling, and unlocking the ability to consistently deliver exceptional user experience throughout Skilltype's product ecosystem.
To accomplish the project, we needed to create a starting point for Skilltype's design system that can be scaled further as we rebuild the platform.
One of the major requirements for Skilltype V2 was using Tailwind CSS –a utility-first CSS framework composable into any design directly on markup- for its new front-end.
Goals
Establish an initial version of Skilltype V2's design system – a strong foundation and a clear blue sky for possibilities. This version focuses on foundational pieces and basic components that can be used to build larger, more complex components, pages, and UX patterns.
Process
Getting to know Tailwind CSS
I explored the framework looking for possibilities that can be unlocked through Tailwind CSS. and found a significant opportunity to streamline our design and development process using the framework's core principles.
Opportunities for designers
A shared vocabulary between design and engineering
Establishing a constraints-based design process
Integrating Tailwind into the design system
This can be achieved by using Tailwind CSS classes similar to design tokens. Doing so creates a unified way to describe typography styles, spacing, sizing, color. As a result, components are designed with Tailwind CSS in its DNA.
Design System Structure
The design system follows Material design's structure to organize components and global styles. This model includes initial and future components to anticipate how they would fit in.
