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 - • Beginner's Guide to DESIGN TOKENS - B...
🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspac...
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:
• The Mega Product Design (UI/UX) Cours...
Webflow Course for Beginners:
• Webflow Course for Beginners
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutorials
UI Design Tutorials:
• UI Animation/Interaction Tutorials
Design Resources, Tools and Softwares:
• Design Resources, Tools and Softwares
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [email protected]
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #colorpalettes #uiuxdesign
