Building a style guide for all Australians

on YouTube ↗19m

" summary

A government-wide design system is delivered as a working CSS framework and living design guide in under three months, aimed at taming over 2,200 Australian Government websites. Implementation uses KSS + gulp + Sass (later a Jekyll build), builds documentation from CSS comments, and enforces semantic markup so pages survive with styles removed. It ships accessibility checks, screen reader readiness, and real-world proof: the Digital Marketplace prototypes quickly and the new DTA site moves to the guide in two weeks.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 1:00Digital Product Studio
3. 1:45The DTA
4. 3:50Why build a style guide
5. 6:45Dos Donts
6. 7:55Testing
7. 12:40Markup
8. 14:10Writing the code

" related talks

• 42mDesigning Inspired Style GuidesAndy Clarke · Talk.CSS max-content Edition
• 46mInclusive Development: Using Style Guides to Improve Website AccessibilityCarie Fisher · MidCamp 2017
• 34mCreating A Design Guide For Enterprise SoftwareMichael Senkow, Voranouth Supadulya · ConveyUX 2017
• 28mThe Night of the Living Style GuidesSarah Semark · Front End North 2018
• 38mEmpathetic Design SystemsJennifer Wong · NDC Oslo 2019
• 30mThe ABC of Coded Style GuidesHenning Muszynski · OdessaJS 2018
• 50mCreating a design system that people actually useRebecca Hill · Frontend United 2019
• 34mCreating Living Style GuidesNicole Sullivan · JSConf US 2013