Product design and development can cover a range of devices and platforms: iPhone, iPad, Android phones and tablets, responsive web applications and web sites, desktop apps… and if you work in a very large organization, you may have a range of products and features within each of these areas. In order to stay productive and effective across teams, platforms, and/or devices, systemic design and development is imperative. Style Guides are a great step towards keeping everything aligned. But how can the style guide be a maintainable, useful resource rather than a distraction? Learn from a product designer's perspective from past and current projects how she and her teams have strived to maintain a "single source of truth" for a truly living spec through a living style guide and prototype — all of which can improve your product design and development lifecycle.

1. In Search of the
Single Source
of Truth
@JINA // DEVCONFU // JŪRMALA // 2014

2. @jina

3. Senior Product Designer

4. — NATE FORTIN
“A fractured process
makes for a fractured
user experience.”

5. Style Guides
are all the rage
…AND THEY HAVE COME A LONG WAY.

6. 2004 // PDF Style Guide

7. PDFs are a pain
to maintain.
HEY, THAT RHYMES.

8. 2007–2008 // Wordpress Style Guide

9. alistapart.com/article/writingainterfacestyleguide

10. Design & Brand Standards
Front-end Development Standards
Keeping Style Guides Current & Useful

11. Wordpress was
only slightly easier.
…AND NOBODY EXCEPT ME WOULD UPDATE IT.

12. 2010–2011 // Living Style Guide with Sass

14. Engine Yard App Cloud Style Guide, Early 2011

15. ZOMG!

16. Engine Yard App Cloud Style Guide, Early 2011

17. Sass & Style Guides
are awesome together!

18. blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides

19. Make Documentation
a regular part of
your workflow.
01 //

20. Don’t try to document
everything at once.
YOU’LL LIKELY GIVE UP.

21. Document
going forward.

22. Making
something new?
Document it.

23. Revising something?
Refactor it.
Then document it.

24. During design & code
reviews, make sure
decisions are documented.

25. 2012–2013 // Living Style Guide with Sass for Web App & Site
Github Wiki for iOS & Android

26. Do CSS Style Guide, Late 2013

27. Do Responsive Layout Guide, Early 2013

28. For mobile, changes to
colors & sizes were a
nightmare to update.
PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹

29. Document your ideal
CSS Architecture.
02 //

30. vendor/
dependencies/
base/
components/
regions/
helpers/
responsive/
tools/
}my ideal css architecture

31. Make a
UI Library.
03 //

32. oocss.org

33. ux.mailchimp.com/patterns

34. Create pages

35. Create systems

36. bradfrostweb.com/blog/post/atomic-web-design

37. 01 // Base HTML elements
02 // Modular components
03 // Page regions
04 // Layout system

38. Show the object
with all of its
associated states.

39. developer.android.com/design

40. developer.android.com/design/building-blocks/seek-bars

41. Show the code you
want people to use,
not the final output.

42. Add development tools
for rapid development
and testing.
04 //

43. starbucks.com/static/reference/styleguide

44. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

45. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

46. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

47. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

48. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

49. starbucks.com/static/reference/styleguide/layout_promo_e.aspx

50. Try a responsive
sandbox during
development.

51. Do Responsive Layout Guide, Early 2013

52. Keep documentation
current & useful.
05 //

53. jacobrask.github.io/styledocco

54. 2013 // Living Style Guide with Sass + ERB & YAML

55. sass-lang.com

56. sass-lang.com/styleguide

57. github.com/mattkersley/Responsive-Design-Testing

58. sass-lang.com/styleguide/responsive-test

59. We open sourced the
website. Anyone can
contribute to design.

60. What if a new color
gets added?
THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.

61. Can the CSS & Style Guide both
share the same attributes in
one single configuration?

62. Single Source of Truth

63. Don’t Repeat Yourself

64. colors:
- name: hopbush
hex: "c69"
- name: bouquet
hex: "b37399"
- name: venus
hex: "998099"
- name: patina
hex: "699"
- name: nebula
hex: "d2e1dd"
- name: white
hex: "fff"
<% data.color.colors.each do |swatch| %>
$<%= swatch.name %>: #<%= swatch.hex %>;
<% end %>
data/color.yml _color.scss.erb

65. colors:
- name: hopbush
hex: "c69"
- name: bouquet
hex: "b37399"
- name: venus
hex: "998099"
- name: patina
hex: "699"
- name: nebula
hex: "d2e1dd"
- name: white
hex: "fff"
%ul.swatches
- for swatch in data.color.colors
%li{class: "swatch-" + swatch.name}
%pre
%code
= "$" + swatch.name
%br/
= "#" + swatch.hex
data/color.yml _color.haml

66. Sass Color Style Guide

67. 2014 // Living Style Guide & Prototype with Sass & Angular as Spec
+ Living Variables System for All Devices & Platforms

68. sfdc-styleguide.herokuapp.com

69. Prototypes
Aura (our web framework)
Native iOS
Native Android
Native Windows

70. How do we keep
our colors, spacing,
& sizes consistent?

71. Theo
BY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!

72. Theo: theme tokenizer
with JSON input
Sass
Stylus
LESS
Aura
plist
XML
{

73. sfdc-styleguide.herokuapp.com

74. @SalesforceUX

75. dribbble.com/salesforce

76. sass-lang.com

77. @TeamSassDesign

78. dribbble.com/TeamSassDesign

79. themixinsf.com

80. susy.oddbird.net

81. artinmycoffee.com

82. — GUSTAVE FLAUBERT
“Be regular and orderly in your
life so that you may be violent
and original in your work.”

83. T W I T T E R , D R I B B B L E , I N STAG RA M , & G I T H U B
@jina