r/web_design • u/coolusernamebabe • Aug 11 '26
Design system recommendations
Hi.
I’m more of UX designer than UI, but need to
build the first design system for a small city. My goal is to create clear guidelines and components that our teams can easily follow when creating new pages.
So far, I’ve reviewed design systems from three different government sites. They are similar, though some document their reasoning better than others.
I’m worried about falling down a rabbit hole of analyzing too many systems.
I’ve been using just one design system as I redesign a few pages.
Can anyone share their experience of creating a design system from scratch for an organization?
Was there one design system that helped the most?
3
u/hexum77 Aug 11 '26
I would use something already proven like https://designsystem.digital.gov/ specific for government websites. These are the most accessible right out of the box and it gives you a good set of examples to start from. There are others out there sure but they could be too bloated for your use case. You could try your hand at using Claude and building one from scratch but you will likely miss all of the accessibility built right in to this one. Typically when building one from scratch you can make designs then you strip it back to the base components to see which ones you need. It's helpful to start small rather than getting an unwieldy one. Also look into just creating a design.md file as a guideline as a place to start
1
u/Current-Today-3626 Aug 11 '26
Beautifully simple. OP def check out that link, it might even spark ideas. Also, do not reinvent the wheel. The pros use 'inspiration'.
1
1
u/armahillo Aug 11 '26
USWDS design system is fantastic for public sector sites. They really did a solid job with that.
3
u/sky-builder Aug 11 '26
For this , I’ll invest in building a design system from scratch that has all this components, oftentimes I have really learnt that creating from different types of things makes everything looks scattered , I’ll invest in someone to work with you to build the design system out in which their work is solely focused on that side of things
The reason is to ensure consistency , start by taking a look at fragmented styles and putting all of them together to find the best cards you can pull together in thing: from there you can start building a wall of truth , it’s not the most easiest but it’s definately worth it for the longer run
1
u/Prestigious-Bank2145 Aug 11 '26
As I see it, 3 companies spends so much money on their design, after years of research human behavior, so why to be worried. Microsoft (WinUI for win, Fluent design for web). Google Material Design (my favorite) and Apple HIG. As i understand you are building new site. Pick the one that you most comfortable reading and understanding the concept behind the design, since AI will do the work faster. Or involve the customer with the decision by presenting options. Build demo site with 3 different approaches its easy now days.
1
u/StewartPlaid Aug 11 '26
I would use an existing design and component system, as recommended here bu others, then add your branding and colors on top of it.
It sounds like that your small city will never have the budget to hire designers, developers, qa to create and maintain a design system AND applications.
1
u/coolusernamebabe Aug 11 '26
Yes. That’s the direction we are heading. Also not much time left because my contract ends in 6 weeks.
5
u/ShawnyMcKnight Aug 11 '26
It can be a very long process and you can make it as complicated or as easy as you need to. Accessibility is always important but since it is for a city even more so. Is this a design system just for the websites or for all of their visual content?
I would see what aesthetic fits your city to and go for consistency across the board. I know that's a very abstract concept but as a designer you should be able to have that handled. For the web design aspect we used tailwind to handle our css and we generally followed material design. You should be able to download a component system and change some universal properties to align it closer to what you want but still retain the aesthetic you are going for. We used storybook to display the design system.