style guide best practices at beyond tellerrand
TRANSCRIPT
![Page 1: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/1.jpg)
STYLE GUIDES@brad_frost
![Page 2: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/2.jpg)
![Page 3: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/3.jpg)
Great news, team. We got the green light to redesign the homepage.
![Page 4: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/4.jpg)
![Page 5: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/5.jpg)
That’s great news, boss!
![Page 6: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/6.jpg)
Yeah, the current homepage is super ugly!
![Page 7: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/7.jpg)
Yeah and don’t even ask about the code quality lol.
![Page 8: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/8.jpg)
Exciting! It will be great to do things right this time.
![Page 9: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/9.jpg)
Yeah we’re going to use BEM…
![Page 10: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/10.jpg)
And the visuals will be clean and flat.
![Page 11: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/11.jpg)
Yeah and we’re definitely looking into React.js
![Page 12: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/12.jpg)
And maybe this will give us the chance to finally
migrate to a new CMS.
![Page 13: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/13.jpg)
Grunt.
![Page 14: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/14.jpg)
Make it so.
![Page 15: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/15.jpg)
LATHER. RINSE. REPEAT.
![Page 16: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/16.jpg)
![Page 17: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/17.jpg)
![Page 18: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/18.jpg)
![Page 19: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/19.jpg)
![Page 20: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/20.jpg)
![Page 21: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/21.jpg)
![Page 22: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/22.jpg)
![Page 23: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/23.jpg)
![Page 24: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/24.jpg)
![Page 25: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/25.jpg)
![Page 26: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/26.jpg)
![Page 27: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/27.jpg)
![Page 28: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/28.jpg)
![Page 29: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/29.jpg)
![Page 30: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/30.jpg)
global
![Page 31: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/31.jpg)
north america
![Page 32: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/32.jpg)
latin america
![Page 33: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/33.jpg)
chile
![Page 34: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/34.jpg)
europe
![Page 35: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/35.jpg)
india
![Page 36: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/36.jpg)
australia
![Page 37: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/37.jpg)
china
![Page 38: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/38.jpg)
hong kong
![Page 39: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/39.jpg)
taiwan
![Page 40: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/40.jpg)
![Page 41: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/41.jpg)
huge jerk.
![Page 42: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/42.jpg)
![Page 43: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/43.jpg)
![Page 44: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/44.jpg)
![Page 45: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/45.jpg)
![Page 46: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/46.jpg)
![Page 47: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/47.jpg)
![Page 48: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/48.jpg)
![Page 49: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/49.jpg)
We don’t have time for cohesion and continuity!
![Page 50: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/50.jpg)
We’re too busy DISRUPTING!
![Page 51: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/51.jpg)
ONE BRAND
![Page 52: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/52.jpg)
MOREDEVICESENVIRONMENTS
PEOPLELANGUAGES
CONTENT
BROWSERS
MEDIUMSCOUNTRIES
SCREENSIZES
FEATURESPRODUCTSSERVICESFUNCTIONALITY
CUSTOMERSFORMATS
USERS
FORMFACTORSCONTEXTS
![Page 53: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/53.jpg)
STYLE GUIDES
![Page 54: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/54.jpg)
![Page 55: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/55.jpg)
![Page 56: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/56.jpg)
http://cargocollective.com/mcalkins/Walmart-brand-book-design
![Page 57: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/57.jpg)
brand.wvu.edu
![Page 58: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/58.jpg)
![Page 59: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/59.jpg)
![Page 60: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/60.jpg)
![Page 61: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/61.jpg)
![Page 62: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/62.jpg)
![Page 63: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/63.jpg)
![Page 64: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/64.jpg)
![Page 65: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/65.jpg)
https://frontify.com/
![Page 66: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/66.jpg)
BRAND STYLE GUIDES๏ Purpose: establish guidelines for using core brand assets ๏ Audience: the entire organization, vendors and anyone
making use of brand assets ๏ Can include: Logos, typography, color palette, file templates,
assets, downloads, etc
![Page 67: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/67.jpg)
![Page 68: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/68.jpg)
https://www.google.com/design/spec/material-design/
![Page 69: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/69.jpg)
![Page 70: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/70.jpg)
![Page 71: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/71.jpg)
![Page 72: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/72.jpg)
http://www.lightningdesignsystem.com/
![Page 73: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/73.jpg)
DESIGN LANGUAGE GUIDELINES๏ Purpose: establish a design language for cohesive user
experience across a suite of products and services ๏ Audience: anyone creating user experiences for the
organization, mostly designers ๏ Can include: design principles, brand overlap, aesthetics, ux
principles, motion, etc
![Page 74: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/74.jpg)
![Page 75: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/75.jpg)
voiceandtone.com
![Page 76: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/76.jpg)
![Page 77: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/77.jpg)
![Page 78: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/78.jpg)
![Page 79: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/79.jpg)
styleguide.mailchimp.com
![Page 80: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/80.jpg)
VOICE AND TONE GUIDELINES๏ Purpose: establish and encourage a cohesive, appropriate
tone across the entire user experience ๏ Audience: content creators and editors, anyone writing copy
for the brand ๏ Can include: interface copy, marketing, documentation, blog
posts, legal, alerts, etc
![Page 81: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/81.jpg)
![Page 82: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/82.jpg)
http://www.economist.com/styleguide/
![Page 83: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/83.jpg)
![Page 84: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/84.jpg)
![Page 85: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/85.jpg)
![Page 86: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/86.jpg)
http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html
![Page 87: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/87.jpg)
WRITING STYLE GUIDES๏ Purpose: establish and encourage a cohesive writing style
across all properties ๏ Audience: content creators and editors, anyone writing copy
for the brand ๏ Can include: grammar, proper content structure, general
writing best practices
![Page 88: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/88.jpg)
![Page 89: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/89.jpg)
![Page 90: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/90.jpg)
code block
.thisishowwedoit {
}
CSS SYNTAX GUIDELINES
![Page 91: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/91.jpg)
code block
.this-is-how-we-do-it {
}
CSS SYNTAX GUIDELINES
![Page 92: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/92.jpg)
code block
.thisIsHowWeDoIt {
}
CSS SYNTAX GUIDELINES
![Page 93: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/93.jpg)
code block
.this__is__how__we__do—-it {
}
CSS SYNTAX GUIDELINES
![Page 94: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/94.jpg)
code block
.- -...- - ..- - —— .. . ..—— — {
}
CSS SYNTAX GUIDELINES
![Page 95: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/95.jpg)
https://github.com/styleguide
![Page 96: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/96.jpg)
https://github.com/styleguide/javascript
![Page 97: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/97.jpg)
https://github.com/styleguide/javascript
![Page 98: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/98.jpg)
CODE STYLE GUIDES๏ Purpose: establish code standards for teams to write more
cohesive, efficient, and maintainable code ๏ Audience: front-end developers, back-end developers, 3rd
party developers, summer interns, developers developers developers
๏ Can include: development principles, HTML structure guidelines, CSS architecture, syntax, best practices, JS style and best practices, backend language syntax and best practices
![Page 99: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/99.jpg)
![Page 100: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/100.jpg)
http://walmartlabs.github.io/web-style-guide
![Page 101: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/101.jpg)
![Page 102: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/102.jpg)
![Page 103: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/103.jpg)
![Page 104: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/104.jpg)
![Page 105: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/105.jpg)
![Page 106: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/106.jpg)
PATTERN LIBRARIES๏ Purpose: establish and maintain an effective interface
design system to create consistent UIs, speed up production, and create a watering hole for the team
๏ Audience: anyone touching the project: designers, developers, project managers, product owners, etc
๏ Can include: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI
![Page 107: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/107.jpg)
styleguides.io
![Page 108: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/108.jpg)
![Page 109: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/109.jpg)
![Page 110: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/110.jpg)
MAKING PATTERN LIBRARIES HAPPEN
![Page 111: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/111.jpg)
$ELL IT.
![Page 112: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/112.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion
![Page 113: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/113.jpg)
Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. -Jakob Nielson
http://www.nngroup.com/articles/top-10-mistakes-web-design/
![Page 114: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/114.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production
![Page 115: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/115.jpg)
We just copied and pasted a pattern, changed a few things, and in twenty minutes we had built a system that was responsive; it looked great on mobile and it was nice to look at. [The status page] was one of those pages that not a lot of people will see. We call them the dark corners. -Federico Holgado
http://styleguides.io/podcast/federico-holgado/
![Page 116: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/116.jpg)
By having a pattern you could actually use that's already 95% of the way there, it brings up the quality of everything so those dark corners actually aren't so dark any more. -Federico Holgado
http://styleguides.io/podcast/federico-holgado/
![Page 117: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/117.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow
![Page 118: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/118.jpg)
Mostly designers will come up with rough representations of where things might live without going into too much detail because there's no longer a need to do that work up front and we can just tweak it in the browser afterwards. -Ian Feather
http://styleguides.io/podcast/ian-feather/
![Page 119: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/119.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary
![Page 120: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/120.jpg)
It is the common ground that designers and developers are all seeking…and I find that a style guide is really effective at providing that common ground. -Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
![Page 121: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/121.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test
![Page 122: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/122.jpg)
Pattern libraries make what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You have a view into how your code base is looking across a site versus having various artifacts show up across hundreds of pages. -Lincoln Mongillo
http://styleguides.io/podcast/lincoln-mongillo/
![Page 123: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/123.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference
![Page 124: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/124.jpg)
BENEFITS OF PATTERN LIBRARIES๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference ๏ Future-friendly foundation
![Page 125: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/125.jpg)
SHOW, DON’T TELL.
![Page 126: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/126.jpg)
http://cssstats.com
![Page 127: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/127.jpg)
![Page 128: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/128.jpg)
![Page 129: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/129.jpg)
http://bradfrostweb.com/blog/post/interface-inventory
![Page 130: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/130.jpg)
![Page 131: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/131.jpg)
![Page 132: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/132.jpg)
ROUND UP THE TROOPS
1
![Page 133: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/133.jpg)
![Page 134: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/134.jpg)
PREPARE TO SCREENSHOT
2
![Page 135: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/135.jpg)
http://bradfrost.com/blog/post/conducting-an-interface-inventory/
![Page 136: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/136.jpg)
SCREENSHOT EXERCISE
3
![Page 137: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/137.jpg)
INTERFACE INVENTORY CATEGORIES๏ Global ๏ Image types ๏ Icons ๏ Navigation ๏ Forms ๏ Buttons ๏ Interactive Components ๏ Media
๏ Headings ๏ Blocks ๏ Lists ๏ 3rd party stuff ๏ Advertising ๏ Messaging ๏ Animation ๏ Colors
![Page 138: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/138.jpg)
![Page 139: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/139.jpg)
![Page 140: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/140.jpg)
PRESENT FINDINGS
4
![Page 141: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/141.jpg)
http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg
![Page 142: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/142.jpg)
![Page 143: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/143.jpg)
REGROUP & NEXT STEPS
5
![Page 144: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/144.jpg)
๏ Documents your interface design patterns ๏ Points out inconsistencies ๏ Helps get buy-in from organization ๏ Establishes scope of work ๏ Is the genesis of a shared vocabulary ๏ Lays the groundwork for a future pattern library
INTERFACE INVENTORY
![Page 145: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/145.jpg)
AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.
![Page 146: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/146.jpg)
IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.
![Page 147: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/147.jpg)
special thanks to Wolfram Nagel, SETU GmbH
![Page 148: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/148.jpg)
special thanks to Wolfram Nagel, SETU GmbH
![Page 149: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/149.jpg)
special thanks to Wolfram Nagel, SETU GmbH
![Page 150: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/150.jpg)
special thanks to Wolfram Nagel, SETU GmbH
![Page 151: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/151.jpg)
special thanks to Wolfram Nagel, SETU GmbH
![Page 152: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/152.jpg)
ATOMIC DESIGN
![Page 153: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/153.jpg)
![Page 154: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/154.jpg)
![Page 155: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/155.jpg)
![Page 156: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/156.jpg)
![Page 157: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/157.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 158: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/158.jpg)
ENTER KEYWORD
SEARCH THE SITE
SEARCH
![Page 159: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/159.jpg)
![Page 160: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/160.jpg)
![Page 161: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/161.jpg)
![Page 162: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/162.jpg)
![Page 163: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/163.jpg)
![Page 164: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/164.jpg)
![Page 165: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/165.jpg)
![Page 166: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/166.jpg)
![Page 167: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/167.jpg)
![Page 168: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/168.jpg)
![Page 169: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/169.jpg)
![Page 170: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/170.jpg)
![Page 171: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/171.jpg)
![Page 172: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/172.jpg)
ABSTRACT CONCRETE
![Page 173: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/173.jpg)
ABSTRACT CONCRETE
CREATORS CLIENTS
![Page 174: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/174.jpg)
REFERENCE BUILD REVIEW
![Page 175: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/175.jpg)
![Page 176: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/176.jpg)
DAVE OLSEN@dmolsen
![Page 177: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/177.jpg)
WHAT PATTERN LAB IS๏ A design system builder ๏ Your comprehensive interface design system ๏ A style guide starter kit ๏ A design toolkit (viewport resizer and other tools)
![Page 178: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/178.jpg)
![Page 179: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/179.jpg)
![Page 180: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/180.jpg)
![Page 181: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/181.jpg)
![Page 182: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/182.jpg)
https://mustache.github.io/
![Page 183: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/183.jpg)
![Page 184: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/184.jpg)
MOLECULE GUTScode block
<div class="block block-post"> <a href="{{ url }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div>
![Page 185: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/185.jpg)
BASIC INCLUDEcode block
{{> molecules-block-post }}
![Page 186: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/186.jpg)
![Page 187: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/187.jpg)
![Page 188: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/188.jpg)
ORGANISM GUTScode block
<header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </header>
![Page 189: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/189.jpg)
ORGANISM INCLUDEcode block
{{> organisms-header }}
![Page 190: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/190.jpg)
![Page 191: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/191.jpg)
![Page 192: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/192.jpg)
![Page 193: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/193.jpg)
TEMPLATE GUTScode block{{> organisms-header }}
<main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <section> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }}
![Page 194: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/194.jpg)
![Page 195: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/195.jpg)
CONTENT STRUCTURE ACTUAL CONTENT
![Page 196: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/196.jpg)
![Page 197: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/197.jpg)
![Page 198: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/198.jpg)
![Page 199: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/199.jpg)
PIPING IN REAL CONTENTcode block{
"title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }
![Page 200: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/200.jpg)
patternlab.io
![Page 201: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/201.jpg)
![Page 202: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/202.jpg)
![Page 203: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/203.jpg)
![Page 204: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/204.jpg)
![Page 205: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/205.jpg)
![Page 206: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/206.jpg)
![Page 207: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/207.jpg)
![Page 208: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/208.jpg)
![Page 209: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/209.jpg)
![Page 210: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/210.jpg)
![Page 211: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/211.jpg)
![Page 212: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/212.jpg)
![Page 213: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/213.jpg)
![Page 214: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/214.jpg)
![Page 215: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/215.jpg)
![Page 216: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/216.jpg)
http://trentwalton.com/2011/07/14/content-choreography/
![Page 217: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/217.jpg)
![Page 218: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/218.jpg)
…OR DID THEY?
![Page 219: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/219.jpg)
![Page 220: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/220.jpg)
websitedesign & development
![Page 221: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/221.jpg)
style guidewebsitedesign & development
![Page 222: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/222.jpg)
style guide
websitedesign & development
![Page 223: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/223.jpg)
style guide
websitedesign & development
![Page 224: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/224.jpg)
design system
style guide
websitedesign & development
![Page 225: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/225.jpg)
style guide
design systemdesign & development website
![Page 226: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/226.jpg)
A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. -Nathan Curtis
https://twitter.com/nathanacurtis/status/656829204235972608
![Page 227: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/227.jpg)
MAKE IT MAINTAINABLE
![Page 228: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/228.jpg)
YOU SEEK THE HOLY GRAIL.
![Page 229: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/229.jpg)
http://rizzo.lonelyplanet.com/
![Page 230: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/230.jpg)
style guide
design systemdesign & development website
Pattern API
![Page 231: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/231.jpg)
style guide
pattern labdesign & development website
Grunt copy CSS, JS, Patterns
![Page 232: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/232.jpg)
MAKE IT CROSS-DISCIPLINARY
![Page 233: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/233.jpg)
![Page 234: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/234.jpg)
![Page 235: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/235.jpg)
MAKE IT APPROACHABLE
![Page 236: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/236.jpg)
http://www.yelp.com/styleguide
![Page 237: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/237.jpg)
http://purple.herokuapp.com
![Page 238: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/238.jpg)
http://ux.mailchimp.com/patterns/
![Page 239: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/239.jpg)
MAKE IT VISIBLE
![Page 240: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/240.jpg)
When you place style guides behind constraints, teams either take an outrageously long time to get access, or they never get access. -Nathan Curtis
http://styleguides.io/podcast/nathan-curtis
![Page 241: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/241.jpg)
http://www.starbucks.com/static/reference/styleguide/http://www.starbucks.com/static/reference/styleguide/
![Page 242: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/242.jpg)
styleguides.io/examples.html
![Page 243: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/243.jpg)
![Page 244: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/244.jpg)
When I saw Salesforce’s style guide I thought it was beautiful and it's why I wanted to join this team. -Jina Bolton
styleguides.io/podcast/jina-bolton
![Page 245: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/245.jpg)
MAKE IT AGNOSTIC
![Page 246: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/246.jpg)
![Page 247: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/247.jpg)
![Page 248: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/248.jpg)
![Page 249: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/249.jpg)
WARNING: NAMING THINGS IS REALLY FREAKING HARD.
https://www.flickr.com/photos/131260238@N08/
![Page 250: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/250.jpg)
![Page 251: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/251.jpg)
![Page 252: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/252.jpg)
MAKE IT CONTEXTUAL
![Page 253: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/253.jpg)
![Page 254: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/254.jpg)
MAKE IT LAST
![Page 255: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/255.jpg)
http://www.google.com/design/spec/whats-new/whats-new.html
![Page 256: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/256.jpg)
![Page 258: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/258.jpg)
![Page 259: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/259.jpg)
atomicdesign.bradfrost.com
![Page 260: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/260.jpg)
atomicdesign.bradfrost.com
ONLY
$10!!!
![Page 261: Style Guide Best Practices at Beyond Tellerrand](https://reader038.vdocuments.us/reader038/viewer/2022102316/587560381a28ab00528b7051/html5/thumbnails/261.jpg)
THANKS! @brad_frost