The presentation gives a thorough overview of how Ruter Design System simplifies, streamlines and assures quality in Ruter's product development.

1. Ruter Design System
A design system for public transport
Christian Nordström, Design Manager, Ruter
Ingrid Hagelund, Designer, Making Waves
Ronny Siikaluoma, Designsystem Lead, Making Waves
12.2.2019

2. 60+

4. 50%

5. DIGITAL

6. VEHICLES

7. WAYFINDING

8. INDUSTRIAL

9. PRINT

10. SERVICE DESIGN

11. MARKETING

12. EXPERIENCE

14. OUTDATED

15. Defining

16. DESIGN SYSTEM MATURITY
Hard-to-cross «chasm» for most organizations
Static
One-time PDF with brand guidelines
Manual Style Guide
Simple copy/paste code snippets
Inconsistency
The lack of a design system
Automatic
Reusable components as part of application build process
Living Design System
A process built into the organization

17. DESIGN SYSTEM MATURITY
Hard-to-cross «chasm» for most organizations
Static
One-time PDF with brand guidelines
Manual Style Guide
Simple copy/paste code snippets
Inconsistency
The lack of a design system
Automatic
Reusable components as part of application build process
Living Design System
A process built into the organization

18. Product
What is offered?
DEFINING THE DESIGN SYSTEM

19. UI Kits
Code components
Documentation
DEFINING THE DESIGN SYSTEM
Product
What is offered?

20. Planning
Tools
Communication
Management
Operations
How to cooperate?
DEFINING THE DESIGN SYSTEM
UI Kits
Code components
Documentation
Product
What is offered?

21. DEFINING THE DESIGN SYSTEM
“Ruter Design System consists of tools,
components, guidelines and processes
that enable teams to create rich, cohesive
and meaningful experiences.”

22. Tools

23. RuterBrand
https://ruter.frontify.com
RuterComponents
https://components.ruter.as
TOOLS

26. WHERE DO YOU SAVE YOUR DESIGN FILES?
0 2 5 7 9
Ruters Dropbox
My companys Dropbox
My personal Dropbox
Locally on my machine
Google Drive
External hard drive
Ruters file server
My companys file server
Axure team-disk

27. Abstract Sketch Libraries Sketch App
TOOLS

28. TOOLS
React Sass

29. React Sass
Lerna
TOOLS
BabelWebpack

30. Essentials

31. COLOR

32. COLORS

33. CSS Stats
https://cssstats.com/

34. COLORS

36. DESIGN TOKENS

37. COLOR_RED_10: "#A20000"
COLOR_RED_20: "#B80000"
COLOR_RED_30: "#D60606"
COLOR_RED_40: "#E60000"
COLOR_RED_50: "#EB3333"
COLOR_RED_60: "#ED4D4D"
COLOR_RED_70: "#F28181"
COLOR_RED_80: "#F7B3B3"
COLOR_RED_90: "#FACDCD"
COLOR_RED_100: "#FDEBEB"
COLORS AS DESIGN TOKENS
YAML

38. DESIGN TOKENS
JSON CSS
XML
YAML
UI Kit
Design
Decisions
Web
iOS
Android
SCSS
SWIFT

39. COLOR_RED_10: "#A20000"
COLOR_RED_20: "#B80000"
COLOR_RED_30: "#D60606"
COLOR_RED_40: "#E60000"
COLOR_RED_50: "#EB3333"
COLOR_RED_60: "#ED4D4D"
COLOR_RED_70: "#F28181"
COLOR_RED_80: "#F7B3B3"
COLOR_RED_90: "#FACDCD"
COLOR_RED_100: "#FDEBEB"
COLORS AS DESIGN TOKENS
YAML
$colors-map: (
'color-red-10': (#A20000),
'color-red-20': (#B80000),
'color-red-30': (#D60606),
'color-red-40': (#E60000),
'color-red-50': (#EB3333),
'color-red-60': (#ED4D4D),
'color-red-70': (#F28181),
'color-red-80': (#F7B3B3),
'color-red-90': (#FACDCD),
'color-red-100': (#FDEBEB)
);
SCSS
:root {
--color-red-10: #A20000;
--color-red-20: #B80000;
--color-red-30: #D60606;
--color-red-40: #E60000;
--color-red-50: #EB3333;
--color-red-60: #ED4D4D;
--color-red-70: #F28181;
--color-red-80: #F7B3B3;
--color-red-90: #FACDCD;
--color-red-100: #FDEBEB;
}
CSS

40. SPACING

43. SPACING
XXXLXXLXLLMSXSXXSXXXSNONE

44. VS

46. .rds-mycomponent {
@include p(spacing-m);
}
.rds-mycomponent {
padding: 1.5rem; /* 24px */
}
.rds-mycomponent {
@include pr(spacing-m);
}
.rds-mycomponent {
padding-right: 1.5rem; /* 24px */
}
.rds-mycomponent {
@include my(spacing-xl);
}
.rds-mycomponent {
margin-top: 3rem; /* 48px */
margin-bottom: 3rem; /* 48px */
}

47. <MyComponent className="rds-p--xs rds-p--xl@l">
My Component
</MyComponent>
<MyComponent className="rds-p--xs">
My Component
</MyComponent>

48. SPACING_NONE: '0px'
SPACING_XXXS: '2px'
SPACING_XXS: '4px'
SPACING_XS: '8px'
SPACING_S: '16px'
SPACING_M: '24px'
SPACING_L: '32px'
SPACING_XL: '48px'
SPACING_XXL: '64px'
SPACING_XXXL: '128px'
{
"SPACING_NONE": "0px",
"SPACING_XXXS": "2px",
"SPACING_XXS": "4px",
"SPACING_XS": "8px",
"SPACING_S": "16px",
"SPACING_M": "24px",
"SPACING_L": "32px",
"SPACING_XL": "48px",
"SPACING_XXL": "64px",
"SPACING_XXXL": "128px"
}
module.exports = [
{key:'SPACING_NONE', value:'0px'},
{key:'SPACING_XXXS', value:'2px'},
{key:'SPACING_XXS', value:'4px'},
{key:'SPACING_XS', value:'8px'},
{key:'SPACING_S', value:'16px'},
{key:'SPACING_M', value:'24px'},
{key:'SPACING_L', value:'32px'},
{key:'SPACING_XL', value:'48px'},
{key:'SPACING_XXL', value:'64px'},
{key:'SPACING_XXXL', value:'128px'}
]
SPACING AS DESIGN TOKENS
YAML JSON JS ARRAY

49. COMPONENTS

51. Block - Element - Modifier

52. Block - Element - Modifier

57. Team

58. Ingrid Hagelund
Designer
Marte Mettenes
Frontend Developer
Ronny Siikaluoma
Design System Lead
Christian Nordström
Design Manager
Åse Lindersen
Delivery Manager
Maria Sætre
Designer
Martin Dahl
Frontend Developer
DESIGN SYSTEM TEAM

59. Ingrid Hagelund
Designer
Marte Mettenes
Frontend Developer
Ronny Siikaluoma
Design System Lead
Christian Nordström
Design Manager
DESIGN SYSTEM TEAM

60. Customers
ORGANIZING THE TEAM
Users
Makers

61. DESIGN SYSTEM TEAM

62. Takeaways

63. SHARE

64. PROTOTYPE

65. ASSIST

66. GET FEEDBACK

67. REACH OUT