design system for skilltype v2

Crafting the building blocks of a unified product experience

Contributions

Strategy

Strategy

Product Design

Product Design

collaborators

CTO

CTO

2 SW Engineers

2 SW Engineers

Duration

January 2021 – March 2021

January 2021 – March 2021

Context

A core component to building Skilltype V2 was establishing an initial version of its design system. Establishing these foundational structures and guidelines first would allow us to dive into the features and work streams easily, while maintaining consistency throughout the process.

As the first designer, I also viewed this project as an opportunity to set a core principle for our design process and culture moving forward, thinking about the long-term vision of growing the design team.

A core component to building Skilltype V2 was establishing an initial version of its design system. Establishing these foundational structures and guidelines first would allow us to dive into the features and work streams easily, while maintaining consistency throughout the process.

As the first designer, I also viewed this project as an opportunity to set a core principle for our design process and culture moving forward, thinking about the long-term vision of growing the design team.

A core component to building Skilltype V2 was establishing an initial version of its design system. Establishing these foundational structures and guidelines first would allow us to dive into the features and work streams easily, while maintaining consistency throughout the process.

As the first designer, I also viewed this project as an opportunity to set a core principle for our design process and culture moving forward, thinking about the long-term vision of growing the design team.

incorporating tailwind css

Embedding collaboration into the design language

Skilltype V2 presented a unique opportunity by rebuilding the platform with a cleaner codebase, and leveraging Tailwind CSS as the front-end framework.

By integrating Tailwind's core concepts, the design system enables a unified language and understanding of the UI, fostering seamless collaboration between designers and engineers. This empowers them to address minute details effortlessly while scaling the system to handle intricate and complex challenges effectively.

This opportunity allowed me to instill essential values as a cornerstone of our design culture, emphasizing the importance of designers' technical understanding of product development and fostering a deeply ingrained culture of collaboration in our design practice.

Utility-first Primitives

Tailwind CSS provides a set of pre-defined CSS classes that exist based on how they alter styles properties. We use these pre-defined classes as foundational structures to our design system such as units of measurement, typography, color scales, and so on.

Constraints-based

Tailwind CSS embraces working within a constrained set of values for atomic-level details such as spacing or typography. Applying the same concept enforces a level of consistency and reduces decision fatigue–allowing designers to focus their energy on solving problems.

Display Large

Font size: 60px / 3.75rem | Line height: 72px / 4.5rem

Tailwind Class: text-6xl/18

Display Medium

Font size: 48px / 3rem | Line height: 60px / 3.75rem

Tailwind Class: text-5xl/15

Display Small

Font size: 36px / 2.25rem | Line height: 44px / 2.75rem

Tailwind Class: text-4xl/11

Headline Large

Font size: 30px / 1.875rem | Line height: 38px / 2.375rem

Tailwind Class: text-6xl/18

Headline Medium

Font size: 24px / 1.5rem | Line height: 32px / 2rem

Tailwind Class: text-2xl

Headline Small

Font size: 20px / 1.24rem | Line height: 28px / 1.875rem

Tailwind Class: text-xl

Title Large

Font size: 18px / 1.125rem

Line height: 28px / 1.75rem

Tailwind Class: text-lg

Title Medium

Font size: 16px / 1rem

Line height: 24px / 1.5rem

Tailwind Class: text-base, font-medium

Title Small

Font size: 14px / 0.875rem

Line height: 20px / 1.25rem

Tailwind Class: text-sm, font-medium

Body Large

Font size: 16px / 1rem |

Line height: 24px / 1.5rem

Tailwind Class: text-base

Body Medium

Font size: 14px / 0.875rem |

Line height: 20px / 1.25rem

Tailwind Class: text-sm

Body Small

Font size: 12px / 0.875rem |

Line height: 20px / 1.25rem

Tailwind Class: text-xs

Label Large

Font size: 14px / 0.875rem |

Line height: 20px / 1.25rem |

Tailwind Class: text-xs, font-medium

Label Medium

Font size: 12px / 0.75rem |

Line height: 16px / 1rem |

Tailwind Class: text-xs, font-medium

Label Small

Font size: 10px / 0.625rem |

Line height: 14px / 0.875rem

Tailwind Class: [Custom] text-2xs, font-medium

Want to work together? Get in touch!

© William Tigno 2023