Slides by Luděk Vepřek (Kiwi.com) - Design Systems Meetup in September 2018.

1. Building full-proof design tokens to
support Kiwi.com’s visual identity
Luděk Vepřek
@elvepor

2. Luděk Vepřek
• Frontend Developer at Kiwi.com
• Working on our Design System called Orbit
• 5+ years of experience with design and frontend development
• I used to be a graphic designer

3. Kiwi.com is fast growing company

4. How might we support our product teams to be able to
deliver new projects quickly and in perfect quality?
Main challenge

5. Cross-platform design system
that supports different brands
The solution

6. Collection of guidelines and components synchronized
between different teams and platforms
What is a design system?

7. • be customizable for more than 25 B2B partners
• being able to change Kiwi.com’s visual look easily in the near future
Our requirements

8. Design Tokens
The solution

9. Design tokens are atomic pieces that store visual design attributes.
We could define them in: SASS, JSON, JS and other formats.
What are design tokens?

10. Every token name starts with its related CSS property, like color,
background or font-size. This help us to use them more naturally.
property_usage-type--state
propertyUsageTypeState: value
We also divided tokens into two types: generic and specific
Naming taxonomy

11. const tokens = {
// font-family
fontFamily: value,
// colors
colorTextPrimary: value,
colorTextSecondary: value,
colorTextAttention: value,
// font-size
fontSizeTextNormal: value,
fontSizeTextLarge: value,
fontSizeTextSmall: value,
};
Generic design tokens

12. Component specific design tokens

13. Design tokens are like variables, but they are more than that.
They are visual design attributes that are stored & centralised,
organised and propagated.

14. const tokens = {
// font-family
fontFamily: "Roboto",
// colors
colorTextPrimary: "#46515e",
colorTextSecondary: "#7f91a8",
colorTextAttention: "#7f91a8",
// font-size
fontSizeTextSmall: "12px",
fontSizeTextNormal: "14px",
fontSizeTextLarge: "16px",
};
Defining our first tokens

15. const tokens = {
// font-family
fontFamily: "Roboto",
// colors
colorTextPrimary: palette.ink.normal,
colorTextSecondary: palette.ink.light,
colorTextAttention: palette.ink.dark,
// font-size
fontSizeTextSmall: "12px",
fontSizeTextNormal: "14px",
fontSizeTextLarge: "16px",
};
Defining a color palette

16. const tokens = {
// font-family
fontFamily: foundation.base.fontFamily,
// colors
colorTextPrimary: foundation.palette.ink.normal,
colorTextSecondary: foundation.palette.ink.light,
colorTextAttention: foundation.palette.ink.dark,
// font-size
fontSizeTextSmall: foundation.base.fontSizeSm,
fontSizeTextNormal: foundation.base.fontSizeMd,
fontSizeTextLarge: foundation.base.fontSizeLg,
};
Defining a foundation

17. What do we have in our foundation?
• 23 colors (we have hover/active colors also = 55 colors)
• 37 base tokens:
• fontFamily, fontWeight, fontSize, borderRadius, sizing, spacing,
opacity, transitions, lineHeight and boxShadows

18. Branding requirements

19. By definition of foundation, it’s pretty easy to add functionality in Javascript
to be able support branding.

20. Branding function
import { palette, base } from "./foundation"
function getTokens(custom) {
// merge defaults with custom
const foundation = {
palette: Object.assign({}, palette, custom.palette),
base: Object.assign({}, base, custom.base),
};
return {
// font-size
fontSizeButtonSmall: foundation.base.fontSizeSm, // 12px
fontSizeTextSmall: foundation.base.fontSizeSm, // 12px
...
};

21. Branding function
const brand = {
base: {
fontSizeSm: "10px",
},
};
const tokens = getTokens(brand);
console.log(tokens); // what will be the output?

22. The result
tokens = {
fontSizeButtonSmall: "10px", // 12px before
fontSizeTextSmall: "10px", // 12px before
...
}

23. This offers us possibility to…

24. Single source of truth for visual design
getTokens()

25. Single source of truth for visual design
getTokens()

26. Single source of truth for visual design
getTokens()

27. Summary
Design tokens can help us:
• to be able to change Kiwi.com's visual look easily
• to be able to adjust our product for different partners
• keep visual design consistent across different platforms
The best thing?
All that is managed from one place!

28. Thank you for your attention.
Any questions?
Luděk Vepřek
@elvepor