This is a PDF of my keynote for DesignOps Global Conference 2019 [https://designops-conference.com/day-2-may-31/] This is about exploring a framework to build a scalable, portable design system for collaboration and automation by machines. This keynote is part of Session 4. Session 4 | (PM) DesignOps in the era of AI and cognitive computing How are different organizations leveraging people-to-people, people-to-machine and machine-to-machine interactions and autonomous systems to design and create new products and services? How do companies need to change their design practices and development processes in the era of cognitive computing and what roles will DesignOps play? More : https://designops-conference.com/ http://desops.io

1. 2019
3-steps for building
design eco-systems
of future,
today.
SAMIR DASH
(Exploring a framework to build a scalable, portable design
system for collaboration and automation by machines)

2. 2019
3-steps for building
design eco-systems
of future,
today.
SAMIR DASH
(Exploring a framework to build a scalable, portable design
system for collaboration and automation by machines)

3. do you believe that
in coming times
our livesare going to be impacted by
artificial intelligence,
machine learning
and related technologies?
?

4. ?do you believe that
in coming times
how we designis going to be impacted by
artificial intelligence,
machine learning
and related technologies?

5. PROCESSCULTURE
ECO-SYSTEMS
DesOps / DesignOps

6. PROCESSCULTURE
ECO-SYSTEMS
DesOps / DesignOps

7. design
operations are
affected by how effective is
the underlying
design systemin eco-system.

8. why we need
design system?
• acts as a common language.
• helps in collaboration.
• supports reusability.
• saves from repetative works.
• help us not to ‘reinvent wheel’.
• brings consistency in design.
and the similar…

9. the use of
design systems
of years old
across civilizations.
is a few
thousands

10. https://www.youtube.com/watch?v=dIKQyVwqskI
ancient times, artisans
used
design systems
to ensure consistency.

11. https://www.youtube.com/watch?v=dIKQyVwqskI
grid.
use of

12. Image Source: https://www.turbosquid.com/3d-models/indian-temple-3d-model/1127080
grid.
use of

13. Image Source: https://www.turbosquid.com/3d-models/indian-temple-3d-model/1127080
grid.
use of

14. Image Source: https://www.turbosquid.com/3d-models/indian-temple-3d-model/1127080
Vastu Purushamandala
grid.
use of

15. grid.
use of

16. https://www.youtube.com/watch?v=dIKQyVwqskI
structuraluse of
approach.

17. structuraluse of
approach.
• measurements
• documentations
• procedures
• practices

18. https://www.youtube.com/watch?v=dIKQyVwqskI
patterns.
use of

19. Design System as a pattern library used in Ancient India
patterns.
use of

20. modularapproach used
to build
composite
patterns.

21. road to future…
?
art, language,
sculpture,
architecture…
print
typography…
digital, web
mobile…
aligning to
digital
operations …

22. automatingdesign style guide
generation.
recent
past.

23. most of the focus
today are on
syncing
different design
systems.
today

24. todaydesign sytem
management tools.

25. future of
design with
automation.SOURCE: https://www.linkedin.com/feed/update/urn:li:activity:6526826357102608384 SOURCE OF VIDEO / CREDITS: Kepler Lab, Publicis.Sapient

26. human-to-human sharing of info & collaboration.
past.

27. human-to-machine sharing of info & collaboration.
present.

28. machine-to-machine sharing of info & collaboration.
future.

29. design
operationshas been influenced by the
cross-domain technologies
and
philosophical models …

30. …the automation,
machine learning
and cognitive
computingand mindsets modelled on
DevOps will shape design
operations of future.
DESIGN DEVELOPMENT DEPLOYMENT TESTINGVISION
DesOps
DevOps
© 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License

31. So how to
prepare our
design systems for
coming evolutions?

32. STEP #1
towards preparing our design systems for future.
unlearn.

33. “a design system is not for
so called design discipline*
(as we call it today)”.
unlearn…
STEP #1
towards preparing our
design systems for future.
what immediately
comes to mind
when we talk
about design
systems.

34. design system is:
• discipline agnostic
• technology agnostic
• process agnostic
• methodologies agnostic
• systems agnostic
…and
learn.
STEP#1towardspreparingourdesign
systemsforfuture.
get the bigger
picture.

35. https://servicedesign.blog.essex.gov.uk/2019/05/08/sharing-and-prioritising-our-common-service-patterns/
design
system:
beyond
traditional
definitions.
STEP#1towardspreparingourdesign
systemsforfuture.

36. STEP #2
towards preparing our design systems for future.
copy
nature.(*the greatest designer of all times!)
*

37. evolution.
STEP#2towardspreparingourdesign
systemsforfuture.
life.

38. organism.
:evolve
:inherit
:meta-morph
:connect & grow
behaviors
of an
STEP#2towardspreparingourdesign
systemsforfuture.

39. Organic business growth is related to
the growth of natural systems and
organisms, societies and economies, as
a dynamic organizational process
evolution
organic-growth.
is about
STEP#2towardspreparingourdesign
systemsforfuture.

40. are key attributes
of any system with
organic-growth.
variation
& heredity
STEP#2towardspreparingourdesign
systemsforfuture.

41. metamorphism
of patterns used
in vedic
temple design.

42. https://usefulcharts.com/products/writing-systems-of-the-world
Matt Baker ‘s Evolution of the Alphabet
https://www.thisiscolossal.com/2019/01/evolution-of-the-alphabet/
variation
& heredity
STEP#2towardspreparingourdesign
systemsforfuture.
in scripts/language
systems.

43. STEP#2towardspreparingourdesign
systemsforfuture.
variation
& heredity
in work practices
methodologies.

44. STEP#2towardspreparingourdesign
systemsforfuture.
variation
& heredity
in UI eco-system

45. …what is a
combo-box?
STEP#2towardspreparingourdesign
systemsforfuture.

46. is a stateful-button same
as toggle-button
same as a radio-button
same as ios-switch?
STEP#2towardspreparingourdesign
systemsforfuture.

47. is a button
created with
<BUTTON> same as
the one created with
<DIV>
or the one with
<INPUT TYPE=“BUTTON”>?
STEP#2towardspreparingourdesign
systemsforfuture.

48. In this example, the bigger challenge to solve is
“how the machine will decide
which button to use?”
STEP#2towardspreparingourdesign
systemsforfuture.

49. STEP#2towardspreparingourdesign
systemsforfuture.
Is there a good model
that can answer the
metamorphism of
something what we
believe is a button?

50. • helps in forming structure
• supports nomeneclature
• helps in building semantics
• scalable, extensible
Portable / Adaptable?
Design Model
So that a pattern can be extended to
form another and build a class
relationships to handle variations and
scale the design system to add new
verities of patterns.
Scalable / Extensible?
So one design system can be ported
or mapped to another design system
and it can be easily adapted to any
existing brand system or design-
system.

51. what are these
called?
• login form
• sign-in form

52. What are
these made up of?

53. Shape
Background is white
Has a border of black
No rounded corner
Text
Can be edited
Black in color
Looks like Sans Serif font
Shape
Background is blue
No border
No rounded corner
On rollover changes background
Text
Non-editable
White in color
Looks like Sans Serif font
Shape
Background is green
No border
Has rounded corner
On rollover changes background
Text
Non-editable
white in color
Looks like Sans Serif font
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 2018, Bengaluru

54. text
text
text
text
text
Shape
Text
=
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 2018, Bengaluru

55. modularapproach used
to build
composite
patterns.

56. • inspired by nuclear chemistry models
and atomic design principles
• handles metamorphism.
• technology and disciplines
agonistic model
Nuclear
Design.
PROTON
NUCLEUS
ATOM(abstractLayer)
ISOTOPE
ISOTOPE
MOLECULE COMPLEX MOLECULE
MATTER (macro level)
MOLECULE(abstract
Layer)
SUB-ATOMICPARTICLES(abstract
Layer)
NEUTRON
NUCLEUS(abstractLayer)
NUCLEUS
MIXTURE
tangible smallest unit that world
can directly interact with.
STEP#2towardspreparingourdesign
systemsforfuture.

57. TOKEN
SUB-ATOMIC
PRIMITIVE
ATOM
DERIVATIVES
ISOTOPES
PATTERN
MOLECULE
TEMPLATE
MIXTURE
VIEW/PAGE
MATTER
TEXT SEARCH
SEARCH
SEARCH
SEARCH
SEARCH
RESET
SEARCH
RESET
FIRST NAME
LAST NAME
SUBMIT
(PROPERTY)
ATTRIBUTES
NUCLEUS
(PROPERTIES)
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

58. ATTRIBUTES
NUCLEUS
…is an
abstract
layer of
collection
of tokens
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

59. TOKEN
SUB-ATOMIC PARTICLE
…is
smallest
unit of
attributes
collection.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

60. TOKEN
SUB-ATOMIC PARTICLE
…any
token falls into
any of these
types.
APPEARANCE
TYPE OF TOKEN
BEHAVIOUR
TYPE OF TOKEN
STATE
TYPE OF TOKEN
* the list is from a work in progress draft.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

61. APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
VISUAL
ALIGNMENT
SIZE
LOCATION
COLOR
OPACITY
VISIBILITY
BORDER
BACKGROUND
MARGIN
PADDING
POSITION
TYPOGRAPHY
FONT FAMILY
FONT WEIGHT
TRUNCATION
MEDIA-FILTER
THEME
…
DICTION
LANGUAGE
TONE
VOICE
GRAMMAR
IMAGERY
…
DICTION/TONE
SUB-ATOMIC PARTICLE
EXAMPLE
* the list is from a work in progress draft.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

62. APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
INTERACTION
ON CLICK
ON TAP
ON HOVER
ON DATA
ON LOAD
ON FOCUS
ON BLUR
ON RESIZE
…
ACCESSIBILITY
TAB INDEXING
WAI-ARIA
…
EXAMPLE
* the list is from a work in progress draft.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

63. APPEARANCE
SUB-ATOMIC PARTICLE
BEHAVIOUR
SUB-ATOMIC PARTICLE
STATE
SUB-ATOMIC PARTICLE
TOKEN
SUB-ATOMIC PARTICLE
INTERACTION
VISIBLE
HIDDEN
PRESSED
HIGHLIGHTED
TOGGLED ON
TOGGLED OFF
…
DOM ATTRIBUTE
DATA
ID
CLASS
…
EXAMPLE
* the list is from a work in progress draft.
DATA
DATA
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

64. PRIMITIVE
ATOM
SHAPE BLOB
ATOM
IMAGE BLOB
ATOM
TEXT BLOB
ATOM
…abstract
layer that is
made up of
attributes
(thereby
tokens).
3 TYPES
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 201
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

65. DERIVATIVE
ISOTOPE
DERIVATIVE 1
ISOTOPE
DERIVATIVE 2
ISOTOPE
DERIVATIVE 3
ISOTOPE
PRIMITIVE
ATOM
…with
change in
attributes,
these are
variations
made out of
primitives.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

66. DERIVATIVE
ISOTOPE
DERIVATIVE 1
ISOTOPE
DERIVATIVE 2
ISOTOPE
DERIVATIVE 3
ISOTOPE
PRIMITIVE
ATOM
…these are
raw objects
with
non-tangible
presence in
design
system.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

67. PATTERN
MOLECULE
PATTERN (ELEMENT)
MOLECULE (ELEMENT)
…consists of
derivatives
and are the
smallest
tangible unit
in design
system
which user
can interact
with.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

68. PATTERN
MOLECULE
PATTERN (ELEMENT)
MOLECULE (ELEMENT)
PATTERN (COMPOUND)
MOLECULE (COMPOUND)
…same
or
different
derivatives
can
combine
together
as an
integrated
unit to
form
pattern.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

69. TEMPLATE
MIXTURE
…is
collection of
patterns.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

70. PAGE / VIEW
MATTER
…is
collection of
templates.
Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

71. Text Blob
id:txt_prim1
type: primitive
content: “Hello”
editable: False
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color:#e20000
background-repeat: no-repeat
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Hello Hello
hit-area: 0,0,width,height
hit-action-click: null
CDQHU@SHUD CDQHU@SHUD
O@SSDQM
Text-Field
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
Label. Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

72. Text Blob
id:txt_prim1
type: primitive
content: “Hello”
editable: False
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: blue
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
url https://purl.org/odso
target: “_blank”
onhover_color:#e20000
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color:#e20000
background-repeat: no-repeat
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Hello Hello
hit-area: 0,0,width,height
hit-action-click: null
CDQHU@SHUD CDQHU@SHUD
O@SSDQM
Text-Link
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
Text-Link. Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

73. Text Blob
id:txt_prim2
type: primitive
content: “Go”
editable: True
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: #666
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim2
type: primitive
content: txt_prim2
background-color:#fff
background-repeat: no-repeat
width: 200px
height:50px;
padding:10px
margin:10px
border: none
border-radius:3px
z-index:
x:10px;
y: 10px;
position: relative
+ =
Enter Text
hit-area: 0,0,width,height
hit-action-click: action()
O@SSDQM
Text Field
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
Enter Text
CDQHU@SHUD CDQHU@SHUD
Text-Field. Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

74. Text Blob
id:txt_prim1
type: primitive
content: “Click Me”
editable: False
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color:#e20000
background-repeat: no-repeat
width: 200px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
Click Me Click Me
hit-area: 0,0,width,height
hit-action-click: action()
CDQHU@SHUD CDQHU@SHUD
O@SSDQM
Button
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
Button. Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

75. Image Blob
id:txt_prim1
type: primitive
content: “data:png;base64…”
editable: False
font-family:: “Sans”
font-weight: bold
font-size: 14px
color: #000
line-height:14px
z-index:
x:10px;
y: 10px;
position: relative
Shape Blob
id:shp_prim1
type: primitive
content: txt_prim1
background-color: null
background-repeat: no-repeat
width: 50px
height:50px;
padding:10px
margin:10px
border: none
border-radius:0
z-index:
x:10px;
y: 10px;
position: relative
+ =
hit-area: 0,0,width,height
hit-action-click: action()
CDQHU@SHUD CDQHU@SHUD
O@SSDQM
Button
'Mnm,S` mf hakd( 'Mnm,S` mf hakd( 'S` mf hakd(
image-icon. Nuclear
Design.
STEP#2towardspreparingourdesign
systemsforfuture.

76. this modeling approach is
more aligned to
extensibility
similar to
Object-Oriented
model.
entity/class/object ±attribute ±value
STEP#2towardspreparingourdesign
systemsforfuture.
Nuclear
Design.

77. STEP #3
towards preparing our design systems for future.
make it
open.

78. design system:
a common-language.
STEP#3towardspreparingourdesign
systemsforfuture.

79. design systems
(common languages)
do not have acommon language
among themselves.
STEP#3towardspreparingourdesign
systemsforfuture.

80. So that any member can use
another member’s patterns
in a consistent manner
Semantic for machineCollboration made
possible for human Define ontology or vocabulary
on how each pattern, templates
etc. are related to one another,
so that it helps in automation
through machines.
open design system:
STEP#3towardspreparingourdesign
systemsforfuture.

81. collaboration
is
#1 focusas of today in
designOps/desOps.
STEP#3towardspreparingourdesign
systemsforfuture.
• Data sync across design systems
• Reusability across design systems
• multiple teams collaboration

82. making
design Systems
open
is about
stop building
design systems in
silos.
STEP#3towardspreparingourdesign
systemsforfuture.

83. CDN based
Design
EcoSystem
*CDN = Content Delivery Network
STEP#3towardspreparingourdesign
systemsforfuture.
Collaborative
Design
Eco-system =

84. CDN
User 1
contentA
+
dependancy1
contentB
+
dependancy1
+
dependancy 2
Global Repo
Global
Namespace
Namespace
User1
contentA
contentB
dependancy1
dependancy2
Namespace
User2
contentC
contentD
User 2
contentC
+
dependancy1
+
user1.contentA
contentD
+
dependancy1
+
dependancy 2
Common
dependancies are
available in global
repo, and each
member content
is arranged via
namespaces so
that they can be
tracked and
reused by same or
other members.
• helps in collaboration
• supports content reuse
STEP#3towardspreparingourdesign
systemsforfuture.

85. Content Delivery Network helps in
collaboration and identifying each
entity by some namespace to
maintain a relationship.
Design Model
CDN
Technologically antagostic
Scalable
Extensible
Portable,adaptable
Can be translated to Semantic models.
CDN based
Design EcoSystem
STEP#3towardspreparingourdesign
systemsforfuture.

86. Let’s put
Nuclear Design Model
in a
CDN architecture.

87. STEP#3towardspreparingourdesign
systemsforfuture.

88. STEP#3towardspreparingourdesign
systemsforfuture.

89. :root{
--myVariable: red;
background: var(--myVariable);
}
.myClass{
--myVariable: green;
}
<body>
<div></div>
<div class=“myClass”></div>
</body>
Example of web eco-system
CSS Variables come to rescue!
STEP#3towardspreparingourdesign
systemsforfuture.

90. Example of
translating the
Open Design
System
into a specific
technology
driven domain
e.g. Web Design/
Development
HTML, CSS, JS
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN
STEP#3

91. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:red;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
STEP#3towardspreparingourdesign
systemsforfuture.
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN

92. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:red;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
text
STEP#3towardspreparingourdesign
systemsforfuture.
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN

93. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:green;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
text
text
HELLO
text
STEP#3towardspreparingourdesign
systemsforfuture.
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN

94. STEP #3 towards preparing our design
systems for future.
label Download Code:
https://github.com/OpenDesignSystem/ODS-CDN

95. STEP #3 towards preparing our design
systems for future.
button Download Code:
https://github.com/OpenDesignSystem/ODS-CDN

96. STEP #3 towards preparing our design
systems for future.
textfieldDownload Code:
https://github.com/OpenDesignSystem/ODS-CDN

97. • Automation
• Cognitive Computing
• Artificial Intelligence
• Machine Learning
• Knowledge Management
semantic is to make it
machine-readable to open
the gate to the future of
design involving...
STEP#3towardspreparingourdesign
systemsforfuture.

98. future
design systems
will be developed as
ontologiesgraph data
with as a
open & semantical Model.
STEP#3towardspreparingourdesign
systemsforfuture.

99. and this
fits to the
existing
ontological
technologies and
the models
used for
semantic-web and
linked-data
or
graph-databases.
STEP#3towardspreparingourdesign
systemsforfuture.

100. at the core, the
semantic models
use the concept of
triple.
The rose has the color red.
subject predicate object
which is very similar to classical OO model:
entity/class/object – attribute – value
STEP#3towardspreparingourdesign
systemsforfuture.

101. Resource Description Framework
RDFS (RDF Schema) defines some classes
which represent the concept of subjects,
objects, predicates etc.
RDF defines is a predicate called "rdf:type"
the same triple
is the
atomic data entity
in
RDF.
STEP#3towardspreparingourdesign
systemsforfuture.

102. RDF uses URIs
to define
Subject & Object and even
relationship or Predicate.
The rose has the color red.
subject predicate object
URI1: http://mydomain/flower#rose URI2: http://mydomain/color#red
URI3: http://mydomain/flower#hasColor
Note: URI - Uniform Resource Identifier
STEP#3towardspreparingourdesign
systemsforfuture.

103. the OWL extends RDF
further with adding
more about classes
with object
& data properties and
uses triples
and
URIs.
OWL adds semantics to the schema. It
allows you to specify far more about the
properties and classes. Web Ontology Language
STEP#3towardspreparingourdesign
systemsforfuture.

104. the OWL can be
written in RDF/XML
format so that it can
be used by any
RDF applications and
can also be .
OWL adds semantics to the schema. It
allows you to specify far more about the
properties and classes. Ontology Web Language
STEP#3towardspreparingourdesign
systemsforfuture.

105. Explore some initial explorations at
Ontological schema for Design System:
STEP#3towardspreparingourdesign
systemsforfuture.

106. PURL namespace prefixes
@odso:
@odsf:
@odsf-g:
@odsf-gui:
@odsf-aui:
@odsf-gesui:
https://purl.org/odso/odso
https://purl.org/odso/odsf
https://purl.org/odso/odsf-g
https://purl.org/odso/odsf-gui
https://purl.org/odso/odsf-aui
https://purl.org/odso/odsf-gesui
Open Design System Ontology
Open Design System Framework
Open Design System Framework - Global
Open Design System Framework – Graphical User Interface
Open Design System Framework – Auditory User Interface
Open Design System Framework – Gesture User Interface

107. STEP#3towardspreparingourdesign
systemsforfuture.

108. STEP#3towardspreparingourdesign
systemsforfuture.

109. @odso:
Design System A
@odsf-gui:
@dsA:
dwsdmcr
@nuclear_
design:
dwsdmcr
@owl:
@rdf:
Design System B
@dsB:
RDF / OWL Applications
/ Tools/ Eco-Systems
dwsdmcr @dsAB:
Design System Mapped
with A & B
ODSO based Design Eco-System

111. @odsfg: https://purl.org/odso/odsf-g
http://opendesignsystem.org/documents/odsf-g/latest/odsf-g.latest.owl
Open Design System Framework - Global
This contains
the basic
framework
level global
vocabulary
and
definitions
that can work
across
domains.

113. Open
Design
System
Framework
@odsf:
https://purl.org/o
dso/odsf
My Design
System
@my_design_system:
is extended by
Building
Design
Systems
based on
ODS
Framework is
by extending
the @odsf:
class.
extend a class or
define a new
add new properties
add an individual
define values

114. http://opendesignsystem.org/documents/odsf/latest/odsf.latest.owl
importing existing brand and
design system rules can be
made by breaking them and
mapping them under attributes.

115. nextsteps?

116. Let’s collaborate to
define and build the road to
Open Design System.

117. thankyou.
twitter: @mobilewish
let’s connect.
PAPERBACK ALSO AVAILABLE AT
https://www.amazon.co.uk/dp/1799171671/
DOWNLOAD A FREE PDF COPY OF MY BOOK
https://designops-conference.com/wp-content/uploads/2019/05/
THE_DESOPS_ENTERPRISE_2ED.pdf

118. Thank You
Samir Dash
@mobilewish
http://desops.io
@

119. APPENDIX

120. Nuclear Design Model
+
CDN
+
in CSS/HTML for web UI
APPENDIX

121. IMAGE
SHAPE
TEXT
TOKENS
PRIMITIVES
TOKEN-A
TOKEN-B
DS1-PRIMITIVE1
TOKENS
PRIMITIVES
DS1-TOKEN-A
DS1-TOKEN-C
PATTERNS
DS1-PATTERN1
DS1-PATTERN2
TEMPLATES
DS1-PATTERN1
DS1-PATTERN2
DS1-VIEW1
DS1-VIEW2
DERIVATIVES
DS1-DERIVATIVE1
DS1-DERIVATIVE2
DS1-DERIVATIVE3
DS1-DERIVATIVE4
VIEWS
TOKENS
PRIMITIVES
DS2-TOKEN-B
PATTERNS
DS2-PATTERN1
TEMPLATES
DS2-PATTERN2
DS2-PATTERN3
DS2-VIEW1
DS2-VIEW2
DERIVATIVES
DS2-DERIVATIVE2
DS2-DERIVATIVE3
DS2-DERIVATIVE4
DS2-DERIVATIVE5
VIEWS
DS2-DERIVATIVE1
DS2-PATTERN1
TOKENS
PRIMITIVES
DS3-TOKEN-A
DS3-TOKENB
PATTERNS
DS3-PATTERN1
DS3-PATTERN2
TEMPLATES
DS3-PATTERN1
DS3-PATTERN2
DS3-VIEW1
DS3-VIEW2
DERIVATIVES
DS3-DERIVATIVE1
DS3-DERIVATIVE2
DS3-DERIVATIVE3
DS3-DERIVATIVE4
VIEWS
DS3-DERIVATIVE5
ODS-GLOBAL DESIGN SYSTEM 1 (DS1) DESIGN SYSTEM 2 (DS2) DESIGN SYSTEM 3 (DS3)
Open
Design
Systems
EXAMPLE OF
APPENDIX

122. IMAGE
SHAPE
TEXT
TOKENS
PRIMITIVES
TOKEN-A
TOKEN-B
DS1-PRIMITIVE1
TOKENS
PRIMITIVES
DS1-TOKEN-A
DS1-TOKEN-C
PATTERNS
DS1-PATTERN1
DS1-PATTERN2
TEMPLATES
DS1-PATTERN1
DS1-PATTERN2
DS1-VIEW1
DS1-VIEW2
DERIVATIVES
DS1-DERIVATIVE1
DS1-DERIVATIVE2
DS1-DERIVATIVE3
DS1-DERIVATIVE4
VIEWS
TOKENS
PRIMITIVES
DS2-TOKEN-B
PATTERNS
DS2-PATTERN1
TEMPLATES
DS2-PATTERN2
DS2-PATTERN3
DS2-VIEW1
DS2-VIEW2
DERIVATIVES
DS2-DERIVATIVE2
DS2-DERIVATIVE3
DS2-DERIVATIVE4
DS2-DERIVATIVE5
VIEWS
DS2-DERIVATIVE1
DS2-PATTERN1
TOKENS
PRIMITIVES
DS3-TOKEN-A
DS3-TOKENB
PATTERNS
DS3-PATTERN1
DS3-PATTERN2
TEMPLATES
DS3-PATTERN1
DS3-PATTERN2
DS3-VIEW1
DS3-VIEW2
DERIVATIVES
DS3-DERIVATIVE1
DS3-DERIVATIVE2
DS3-DERIVATIVE3
DS3-DERIVATIVE4
VIEWS
DS3-DERIVATIVE5
ODS-GLOBAL DESIGN SYSTEM 1 (DS1) DESIGN SYSTEM 2 (DS2) DESIGN SYSTEM 3 (DS3)
Open
Design
Systems
EXAMPLE OF
automatically inherited
modified
APPENDIX

123. Let’s Translate this for
web development/design
domain…
APPENDIX

124. :root{
--myVariable: red;
background: var(--myVariable);
}
.myClass{
--myVariable: green;
}
<body>
<div></div>
<div class=“myClass”></div>
</body>
CSS Variables come to rescue!
APPENDIX

125. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:red;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
APPENDIX

126. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:red;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
text
APPENDIX

127. Concptual Implementation
:root{
--ods-token-background: red;
--ods-token-border: 1px solid black;
--ods-token-color:black;
}
.ods-shape{
background: var(--ods-token-background-color)
border: var(--ods-token-border);
}
@import: ./global/global.css
.ds1 {
--ods-token-background:green;
--ods-token-border: 2px dashed red;
}
global/tokens/tokens.css
global/primitives/ods-shape.css
global/global.css
@import ./global/tokens/tokens.css
@import ./global/primitives/ods-shape.css
@import ./global/primitives/ods-text.css
ds1/ds1.css
@import: ./global/shape.css
.ds1 .dbox{
--ods-token-background: blue;
}
ds1/derivatives/dbox.css
ds1/derivatives/dtext.css
@import: ./global/primitives/ods-text.css
.ds1 .dtext{
--ods-token-color: orange;
}
ds1/patterns/textbox/textbox.css
@import: ./ds1/derivatives/box.css
@import: ./ds1/derivatives/text.css
ds1/patterns/textbox/textbox.html
<div class="ods-p ds1 textbox">
<div class="ods-d ods-shape dbox" >
<div class="ods-d ods-text dtext”
>__label</div>
</div>
</div>
.ods-text{
color:var(--ods-token-color);
}
global/primitives/ods-text.css
ds1/patterns/textbox
<div>
<div id="myTextBox1" class="ods-p ds1”
data-value='{"__label":”HELLO"}' >
</div>
</div>
application.html
application.css
@import: http://ods/ds1/ds1/ds1.css
ODS(CDN)
CDN.js
{Read markup, resolve namespace and
load dependent derivatives and
associated CSS and markups. }
<script src=“http://ODS/CDN.js”/>
text
text
HELLO
text
APPENDIX

128. Sample POC.
Demo.
LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 2018, Bengaluru
APPENDIX

129. Example of
translating the
Open Design
System
into a specific
technology
driven domain
e.g. Web Design/
Development
HTML, CSS, JS
DOWNLOAD POC FROM:
https://github.com/OpenDesignSystem/ODS-CDN
APPENDIX

130. LICENSE: Attribution 4.0 International (CC BY 4.0) Samir Dash @ UX India 2018 – (Workshop) - Applying DesOps in Your Enterprise 4 Oct 2018, Bengaluru
APPENDIX

131. https://www.invisionapp.com/design-system-manager
https://cabanadesignsystem.com/
APPENDIX

132. APPENDIX

133. let’s fast
forward
tofuture.
APPENDIX

134. PM AR
UX EUPM MR
AR QA
M PM
PM VDPM MR
IA EUPM EUUI
PM PM
PMPM MR
PM VDPM EUPM IX
QA PM
PM EUPR MR
IA UIAR EUAR
PM PM
PMPM MR
PMDV EUPM EU
PM AR
PM IXPM DV
PM EUPM EUUR
PM PM
PMPM IA
PM MRPM VDEU VD
PM PMPM IX
PMPR MR
EU
Organization
operations
are
a fabric of
feedback-loops.
DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru
APPENDIX

135. PEOPLE
SAYS THINKS
FEELSDOES
PEOPLE
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PEOPLE
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PROCESSES
PEOPLE
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
PROPS
In DesOps the role of touch-points/ interactions among
all three becomes equally important.
PROCESSES
Touch-point of
feedback loop
PROPS
Touch-point of
feedback loop
PROPS
PROPS
PROCESSES
PROCESSES
APPENDIX