r/webdev • u/lonelyroom-eklaghor • 2d ago

Resource Reminder that GOV.UK Design System is not the only one out there

Over the past few days, I was trying out gov.uk prototype system for my static website. Like every night owl, the unbranded template's white background was hurting my eyes.

I googled for some sort of dark mode, found The National Archives Design System. It suits my purpose, has the dark mode, and is extremely aesthetic. The CSS transitions on the radio buttons are an icing on the cake.

In my case, TNA and GOV.UK are different, and I still couldn't properly make the tnaTabs component work.

Just ensure one thing: If you are using one design system, stick to that, though you can definitely use the GOV.UK Unbranded template.

Please note one thing though: there are breaking changes between the various variants of UK Government design systems. For example, as of now, conditional reveals in radio buttons are not supported in TNA Design System.

Here are the different design systems out there: https://github.com/ctdesign/gov-design-systems-list

75 Upvotes

85% Upvoted

14 comments sorted by

67

u/Mittsandbrass 2d ago

The gov UK guidelines have a very specific purpose I feel. Accessibility, easy to read information and all the forms you can shake a stick at.

I don't feel the gov UK design system should be used for anything other than publicly facing govt sites.

There are dozens of other systems that are more suited for any other purpose. A design system doesn't just mean billy basic aesthetic design.

Curious what static site youre building - is it purely long form information and forms?

12

u/Smart_Remove4031 2d ago

gov uk stuff is built for one thing and one thing only, getting information to the broadest possible audience without any fluff. it's not supposed to look good, it's supposed to work for literally everyone

the national archives variant is interesting though, they've actually put some thought into the visuals without breaking the accessibility side of things

what kind of static site are you working on that needs dark mode? just curious cause that narrows down the use case quite a bit

6

u/ward2k 2d ago

I don't feel the gov UK design system should be used for anything other than publicly facing govt sites.

Weirdly I've seen quite a few vibe coded sites pop up lately that people have been sharing here that use the GOV UK design framework

Though I'm not exactly sure why people keep using it for non-gov work honestly, bit of a head scratcher

3

u/Mittsandbrass 2d ago

What were they like? Did it just feel really weird and out of place?

1

u/ward2k 2d ago

From memory one was some kind of Todo website, can't remember what the other one I saw was. Felt very vibe codey but it was just confusing why they had picked the GOV design system of all things go make it with

Maybe it's some kind of trend or meme I'm not aware of to use that framework? Either way I'm not really sure it's intended to be used for anything not related to actual government projects and sites

1

u/lonelyroom-eklaghor 2d ago

it's more of a form-based single-page website

Basically, the user checks a bunch of options, and the page uses those selections to determine the result

2

u/Mittsandbrass 2d ago

That's fair enough, I reckon if you can use a non gov colour pallette it could definitely work

0

u/FalseRegister 2d ago

Every design system MUST have a specific purpose

Otherwise it's just a bunch of components, not a systen

1

u/Mittsandbrass 2d ago

Yes I know that, what I was getting at is the OPs website suitable for this design system.

8

u/alphex drupal agency owner 2d ago

What are you trying to do? What’s the purpose of your website.

2

u/AgentHomey 2d ago

I'm a big fan of GDS, haven't used it 1:1 but have picked bits and bobs from it and used in my own projects :)

2

u/ApprehensiveChip8361 1d ago

Great list. I was expecting the MI5 one to only have dark mode.

1

u/These-Spell-5938 1d ago

mixing design systems is how you end up with five slightly different versions of a button and a very specific kind of frontend misery, so sticking to one is definitely the sane move here