Designing Inspired Style Guides
summary
Argues that most style guides are functional but ugly and demonstrates concrete fixes: six inspired guide templates built with semantic HTML, CSS custom properties, SVG and a little native JS (no framework required) that surface color and type in art-directed pages, show accessibility contrast, typographic scales and responsive icon rules. Shows real projects (Sun Life, WWF, Royal Mail) where templates include full-page organisms and templates and improve clarity and designer/developer collaboration.
AI-written summary · about
chapters (8)
- 0:00Start
- 2:32Atomic Design
- 4:21Voice and Tone Guidelines
- 4:41Front End Code Guidelines
- 17:30Inspired Guide Design Templates
- 21:08Color Contrast Accessibility
- 31:08Imagery
- 39:38Example Design Principles
related talks
23mWhat They Don't Tell You About Creating New Style Guides
34mCreating Living Style Guides
45mYour Styleguide is an API
01h 05mStyleguide-Driven Development
42mThe Dream of Styleguide Driven Development
19mBuilding a style guide for all Australians
45mMaintainable Style Guides
16mStyling for Inclusion: How Shaping a Style Guide ...