It sounded so simple. Architect and build a modern CSS framework for a "Living Design System" — at enterprise scale. What could go wrong? Before the game begins, strategy seems so simple. But after the first move, it quickly becomes a game of chess. From naming, and taxonomy, to adoption, versioning, and deprecation, every move influences the next. Because unlike chess, with a living Design System, the game never ends.

1. Avoiding checkmate
Strategies for Design Systems
Stephanie Rewis (@stefsull)
Principal Engineer, Design Systems, UX Engineering
Salesforce

4. The Sliding Scale of
Giving a F***
by Cap Watkins

5. When you each feel passionate about a technical
matter, how do you decide the outcome?

7. How can my app
look like this?

8. Can I use the CSS in
my app?

10. Every game begins
with an inventory

11. Inventory - Values
• $card-color-background maps to
background-color: #f4f6f9
• t(cardColorBackground) is the format used
internally
The values found in the inventory are mapped to a
variable or constant.

12. global:
type: color
category: background-color
cssProperties:
- 'background*'
- 'border*'
- box-shadow
imports:
- "../../../../design-tokens/force-base/aliases/
color.yml"
props:
CARD_COLOR_BACKGROUND:
value: '{!WHITE}'
comment: Default Card component background
color.
Inventory - Values

13. Types of Design Tokens
Fonts
Font Sizes
Font Weights
Line Heights
Background Colors
Text Colors
Border Colors
Shadows
Spacing
Sizing
Animation Durations
Media Queries
z-indexes

14. Inventory - Patterns
• Demand content and data-rich interfaces
• Lack vertical rhythm
• Lists are generally used for their semantics
• Heading levels should be used for their semantics
Enterprise Applications:

15. Inventory - Components
We broke components down into their smallest
objects and patterns.

17. Understand the board

18. Make your moves clear

19. BEM

20. Know who you’re playing with

21. XML and BEM

22. Anticipate Change
It’s gonna come

23. Research & Refactoring

24. Hello, Sass Deprecate!
$app-version: '2.3.0';
.slds-notify_container {
@include deprecate('4.0.0', '`notify-
container` is deprecated, use
`notify_container` instead.');
// deprecated properties here
}

25. Keep your
game
consistent

26. Play fair with others

27. Namespacing
.button
becomes
.slds-button

28. Scoping
• <div class=“custom-class">
<!-- Your components here -->
</div>
• ul li { property:value; }
• .custom-class-a li { property:value; }
• .custom-class-b li { property:value; }

29. Find a version of versioning
that works for you

30. Semver Versioning

31. Verb Visual Change
Does output CSS
change
Do I need to
change my HTML
Breaking
Change
Add X
Rename X X X
Update X X X X
Refactor X X
Patch X
Docs

32. Make
your
own rule
book

33. Metadata & Documentation
/**
* @summary Data tables are an enhanced
version of an HTML table and are used to
display tabular data.
*
* @base
* @name data-tables
* @selector .slds-table
* @category structure
* @type data-display, data-entry, navigation
* @role grid
* @support dev-ready
* @layout adaptive
*/

34. Avoid stalemate
Get your execs on board

35. 0 to Platform in 1 year!

36. Plan your support strategy
before you need it

37. Plan your support strategy
before you need it
• Standards and Accessibility audits
• Office hours/Advisory board
• 5 chat channels
• 2 internal groups
• Email
• Meetings
• Trailhead (SF gamified learning system)
• Open source “issues”
• Salesforce Stack Exchange
• Internal support system for external customers

38. Adding to the Plan
• Slimming down the number of channels
• Rotate support through team members
• Adding documentation for:
• new users
• bug busting
• Internal classes and brown bags

39. Know when to expand the game

40. Shared governance
• Platform Foundation UX
Design patterns and Guidelines
• UX Creative
Visual Design
• UX Engineering, Design Systems
Component patterns and accessibility

41. Let others play the
game with you

42. Create a way
to socialize
design and
pattern
changes with
the larger
team

43. Thank you!