Hostari Design System
Hostari aims to provide appealing games and match the features of competitors while offering top-notch server hosting. Despite a small team, we prioritize releasing games that users desire and maintaining consistency in website elements for ease of use.
This is why we created the Hostari Design System.
01
Introduction
Some key things I had to remember when creating a design system:
Capitalize on patternsthat are already in use. Identify what’s common and less common(which can be turned into variants).Make sure to
standardize naming conventions, accessibility requirements and file structuringComponents range in complexity.
Reduce components to a single function, button or dropdownYour technical approach doesn’t matter as much as creating a living, breathing system that’s
flexible, maintainable, stable, scalable and successful in the long-term
02
Process
We
created a visual inventory of the existing componentsin our website. This was made faster by using CSS Stats.Next, we
decided on the fundamental elements and components that were essential to our design system. We came up with 3 fundamental elements and 15 design components.We alsoprioritized adding design tokensfor each visual specification so that our front-end engineers could easily label them and we could easily update any component in the future.After planning the contents of our initial design system, we began designing the guidelines and components.
We also
consulted our engineering team if the components we have made are feasible, and started totest them on existing designs and featureswe were planning to build.For the final step of our process, we published the guidelines and components on Zeplin and we are currently collaborating with our engineers to export to Storybook.
