From 3670d053c3ffba62a908260fd1b986394ded54ee Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 13 Sep 2022 17:33:49 +0400 Subject: [PATCH] Add content for design tokens --- .../content/105-design-tokens/100-layout/100-spacing.md | 4 +++- .../content/105-design-tokens/100-layout/101-breakpoints.md | 4 +++- .../content/105-design-tokens/100-layout/102-grid.md | 4 +++- .../content/105-design-tokens/100-layout/103-units.md | 4 +++- .../content/105-design-tokens/100-layout/readme.md | 4 +++- .../content/105-design-tokens/101-color/100-guidelines.md | 4 +++- .../content/105-design-tokens/101-color/101-dark-mode.md | 4 +++- .../105-design-tokens/101-color/102-functional-colors.md | 4 +++- .../105-design-tokens/101-color/103-accessibility.md | 4 +++- .../content/105-design-tokens/101-color/readme.md | 4 +++- .../105-design-tokens/102-iconography/100-accessibility.md | 4 +++- .../content/105-design-tokens/102-iconography/101-style.md | 4 +++- .../content/105-design-tokens/102-iconography/102-naming.md | 4 +++- .../105-design-tokens/102-iconography/103-grid-relation.md | 4 +++- .../content/105-design-tokens/102-iconography/104-sizes.md | 4 +++- .../105-design-tokens/102-iconography/105-keywords.md | 4 +++- .../105-design-tokens/102-iconography/106-reserved-icons.md | 4 +++- .../105-design-tokens/102-iconography/107-guidelines.md | 4 +++- .../content/105-design-tokens/102-iconography/readme.md | 4 +++- .../105-design-tokens/103-typography/100-responsiveness.md | 4 +++- .../105-design-tokens/103-typography/101-grid-relation.md | 4 +++- .../105-design-tokens/103-typography/102-readability.md | 4 +++- .../105-design-tokens/103-typography/103-performance.md | 4 +++- .../105-design-tokens/103-typography/104-guidelines.md | 4 +++- .../content/105-design-tokens/103-typography/readme.md | 4 +++- .../111-design-system/content/105-design-tokens/readme.md | 6 +++++- 26 files changed, 80 insertions(+), 26 deletions(-) diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/100-spacing.md b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/100-spacing.md index 3a16cd5c9..b6d627da5 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/100-spacing.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/100-spacing.md @@ -1 +1,3 @@ -# Spacing \ No newline at end of file +# Spacing + +Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/101-breakpoints.md b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/101-breakpoints.md index bb4203757..aa5c14a11 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/101-breakpoints.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/101-breakpoints.md @@ -1 +1,3 @@ -# Breakpoints \ No newline at end of file +# Breakpoints + +Predefine the screen sizes and orientations your grid will adapt to. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/102-grid.md b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/102-grid.md index aac815a19..2c9a586cf 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/102-grid.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/102-grid.md @@ -1 +1,3 @@ -# Grid \ No newline at end of file +# Grid + +Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/103-units.md b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/103-units.md index 5af52f04c..3a27c04ee 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/103-units.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/103-units.md @@ -1 +1,3 @@ -# Units \ No newline at end of file +# Units + +Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/readme.md b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/readme.md index 845509ef6..7f84d0e0f 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/readme.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/100-layout/readme.md @@ -1 +1,3 @@ -# Layout \ No newline at end of file +# Layout + +A well thought out layout goes a long way. Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/100-guidelines.md b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/100-guidelines.md index 80ab2f7f0..b955969a1 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/100-guidelines.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/100-guidelines.md @@ -1 +1,3 @@ -# Guidelines \ No newline at end of file +# Guidelines + +Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/101-dark-mode.md b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/101-dark-mode.md index a86ea8a61..fadd76fb7 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/101-dark-mode.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/101-dark-mode.md @@ -1 +1,3 @@ -# Dark mode \ No newline at end of file +# Dark Mode + +Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/102-functional-colors.md b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/102-functional-colors.md index a1dc83b37..b70c418ac 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/102-functional-colors.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/102-functional-colors.md @@ -1 +1,3 @@ -# Functional colors \ No newline at end of file +# Functional Colors + +Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/103-accessibility.md b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/103-accessibility.md index 55ffef6e3..c22052b0e 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/103-accessibility.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/103-accessibility.md @@ -1 +1,3 @@ -# Accessibility \ No newline at end of file +# Accessibility + +Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/readme.md b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/readme.md index 4ceeed37b..cd000a1f2 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/101-color/readme.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/101-color/readme.md @@ -1 +1,3 @@ -# Color \ No newline at end of file +# Color + +Not only an efficient way to showcase your brand, but also an efficient way to communicate with your users. Colour palettes created with purpose over aesthetics in mind can help you create intuitive design patterns by adding meaning to your interface. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/100-accessibility.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/100-accessibility.md index 55ffef6e3..6c49809ac 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/100-accessibility.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/100-accessibility.md @@ -1 +1,3 @@ -# Accessibility \ No newline at end of file +# Accessibility + +For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/101-style.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/101-style.md index d9339e2b3..5660f0739 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/101-style.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/101-style.md @@ -1 +1,3 @@ -# Style \ No newline at end of file +# Style + +Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/102-naming.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/102-naming.md index 21c5eefaf..90962280b 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/102-naming.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/102-naming.md @@ -1 +1,3 @@ -# Naming \ No newline at end of file +# Naming + +Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/103-grid-relation.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/103-grid-relation.md index 37da0751a..68d9eb73e 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/103-grid-relation.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/103-grid-relation.md @@ -1 +1,3 @@ -# Grid relation \ No newline at end of file +# Grid Relation + +Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/104-sizes.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/104-sizes.md index 33d256ee7..402710288 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/104-sizes.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/104-sizes.md @@ -1 +1,3 @@ -# Sizes \ No newline at end of file +# Sizes + +Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/105-keywords.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/105-keywords.md index 3c9dc5583..298aef705 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/105-keywords.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/105-keywords.md @@ -1 +1,3 @@ -# Keywords \ No newline at end of file +# Keywords + +Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/106-reserved-icons.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/106-reserved-icons.md index d87c6893a..1f0b38055 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/106-reserved-icons.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/106-reserved-icons.md @@ -1 +1,3 @@ -# Reserved icons \ No newline at end of file +# Reserved Icons + +Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/107-guidelines.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/107-guidelines.md index 80ab2f7f0..7bed2e698 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/107-guidelines.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/107-guidelines.md @@ -1 +1,3 @@ -# Guidelines \ No newline at end of file +# Guidelines + +Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/readme.md b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/readme.md index d635c0584..fe8ed0d18 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/readme.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/102-iconography/readme.md @@ -1 +1,3 @@ -# Iconography \ No newline at end of file +# Iconography + +Icons are symbols that represent functionality or content. They’re especially recognisable and helpful in user interfaces since their meaning can be understood at a glance. hough they can be used just for decoration, their full potential can be realised when they’re used meaningfully and consistently. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/100-responsiveness.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/100-responsiveness.md index d436fcee9..b3b4d3aaa 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/100-responsiveness.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/100-responsiveness.md @@ -1 +1,3 @@ -# Responsiveness \ No newline at end of file +# Responsiveness + +Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/101-grid-relation.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/101-grid-relation.md index 37da0751a..f07fe8f56 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/101-grid-relation.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/101-grid-relation.md @@ -1 +1,3 @@ -# Grid relation \ No newline at end of file +# Grid Relation + +Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/102-readability.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/102-readability.md index 387c3b558..f26bf427f 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/102-readability.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/102-readability.md @@ -1 +1,3 @@ -# Readability \ No newline at end of file +# Readability + +Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/103-performance.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/103-performance.md index 55cb80a3a..b6fdac37d 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/103-performance.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/103-performance.md @@ -1 +1,3 @@ -# Performance \ No newline at end of file +# Performance + +Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/104-guidelines.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/104-guidelines.md index 80ab2f7f0..e17cfc249 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/104-guidelines.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/104-guidelines.md @@ -1 +1,3 @@ -# Guidelines \ No newline at end of file +# Guidelines + +Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/readme.md b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/readme.md index db88d4075..9a690fec9 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/readme.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/103-typography/readme.md @@ -1 +1,3 @@ -# Typography \ No newline at end of file +# Typography + +Typography is one of the main ways you surface content in products. A clear hierarchy and contrasting styles in your typography scale will make things easier to read and help with the overall structure of your product. It’s also an opportunity to visualise your brand character and presence. diff --git a/content/roadmaps/111-design-system/content/105-design-tokens/readme.md b/content/roadmaps/111-design-system/content/105-design-tokens/readme.md index 711208c06..e95e1766b 100644 --- a/content/roadmaps/111-design-system/content/105-design-tokens/readme.md +++ b/content/roadmaps/111-design-system/content/105-design-tokens/readme.md @@ -1 +1,5 @@ -# Design tokens \ No newline at end of file +# Design Tokens + +Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system. + +What Are Design Tokens?