Week 3 - Colour System

Overview

Create a colour palette or system that can later be used for designing a mobile application. Follow the recomended tutorials in the module or choose your own tutorial on youtube to create a colour system either with colour styles or leveraging Variables: an advanced Figma feature. Star

Step 1: Choose a Palette

Use a colour palette generator(availbe in your resources on github) to select a harmonious colour palette, this can be monocrhomatic, analogous or any colour harmony of your choice. Choose 3 essential colours that will serve as your brand's primary(1), seconday(2) and tertiary(3) colours. Brand colours are defined by you in this exercise and are different from primary, secondary and tertiary colours in the colour wheel.

Step 2: Colour System

Create a colour system in Figma with styles or variables. Include 5 shades of each chosen colour with number naming conventions. Your system must at least contain:

1. Brand colours: Primary, secondary, tertiary
2. Status colours: success, error, warning, info
3. Neutral colors for shades of grey
4. Black and white

Step 3: Your experience

Add a note in a frame near your colour palette frame about your experience. List the following:

1. which tutorial you chose? add the link.
2. What was the process you followed. Example: created colour styles and used plugin to convert to variables.
3. Was this assignment useful and enjoyable to you? What is the learning that stuck with you most?

Things to consider:

1. How will you use the different shades to express different states of components? Example: Buttons have different states with different colours.
2. Are your colours harmonious?
3. Are your colours accessible when used together?

Submission

• Figma Link in Brightspace assignment page: A link to your Figma file containing colour palette.