Building full-proof design tokens to support Kiwi.com's visual identity
2 likes319 views
This document discusses how design tokens can help Kiwi.com support their visual identity across platforms and partners. Design tokens store visual design attributes like colors, font sizes and families in a centralized location. This allows visual design to be customized for different partners and platforms while maintaining consistency. It also makes it easy to change Kiwi.com's overall visual look by adjusting the tokens in one place.
Building full-proof design tokens to support Kiwi.com's visual identity
- 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
- 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
- 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