Beginner's Guide to COLOR STYLES: Understanding TONAL VALUES, CONTRAST RATIO and more!

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z

In this tutorial, we will learn to create Color Styles when setting up your Design System. We will look at setting up Tonal Colors, naming them, creating swatches, and finally creating styles. Make sure to watch the tutorial on Design Tokens to make complete sense of the concept.

Beginners Guide to Design Tokens - https://youtu.be/1-pkJSDskvY

🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947

00:00 Introduction
00:38 Picking your Primary Color
01:25 Atlassian's Design System
03:33 Shopify's Design System
04:55 Finding multiple shades of your color
06:36 What are Tonal Values?
07:46 Checking Tonal Values of other platforms
09:53 Creating multiple shades of your color
18:54 Using Contrast Grid to check Contrast Ratio
22:19 How to use the other shades?
27:36 Creating Neutral Colors
28:38 Where to find pre-defined color shades?
30:23 Creating and Naming Color Styles
---------------------------------------­----
Mega Product Design (UI/UX) Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3

Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8

Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi

Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1

After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk

UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW

Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9

Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv

eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #colorpalettes #uiuxdesign