Website Project (Lesson 2)

Task 1.

1. Open the "Website Project - ShadcnDesign Academy" file you created in Website Project (Lesson 1).
2. Open the variables panel within your Figma project.
3. Open the ‘2. Theme’ collection.
4. In the Default mode, modify the color values to match those shown in the list below. We will use Teal color as our primary color and Gray as our neutral color
   
   • ‍accent-light: gray/100
   • accent-dark: gray/700
   • accent-foreground-light: gray/900
   • accent-foreground-dark: gray/50
   • background-light: base/white
   • background-dark: gray/950
   • border-light: gray/200
   • border-dark: FFFFFF 10%
   • card-light: base/white
   • card-dark: gray/900
   • card-foreground-light: teal/950
   • card-foreground-dark: gray/50
   • destructive-light: red/600
   • destructive-dark: red/400
   • destructive-foreground-light: red/50
   • destructive-foreground-dark: red/50
   • foreground-light: teal/900
   • foreground-dark: gray/50
   • input-light: gray/200
   • input-dark: FFFFFF 15%
   • muted-light: gray/50
   • muted-dark: gray/800
   • muted-foreground-light: gray/500
   • muted-foreground-dark: gray/400
   • popover-light: base/white
   • popover-dark: gray/800
   • popover-foreground-light: gray/950
   • popover-foreground-dark: gray/50
   • primary-light: teal/400
   • primary-dark: teal/400
   • primary-foreground-light: teal/950
   • primary-foreground-dark: teal/950
   • ring-light: teal/400
   • ring-dark: teal/500
   • secondary-light: teal/900
   • secondary-dark: gray/800
   • secondary-foreground-light: teal/50
   • secondary-foreground-dark: gray/50
5. Within the ‘2. Theme’ collection, locate the font group.
6. Change the ⁠font-sans variable to IBM Plex Sans.
7. Change the ⁠font-serif variable to IBM Plex Serif.
8. In the ‘2. Theme’ collection, create a new variable colors/primary-muted-light and set its value to teal/50.
9. In the ‘2. Theme’ collection, create a new variable colors/primary-muted-dark and set its value to teal/900.
10. In the ‘3. Mode’ collection, create a new variable base/primary-muted and set its light and dark values to primary-muted-light and primary-muted-dark accordingly.

‍

By following these steps, you'll ensure that your project reflects a distinct and personalized aesthetic. In the next practice lesson, we'll continue to refine and build upon this foundation by editing components.