In the previous chapter, you used a custom color for the Launch screen. You can actually create custom colors and assign them a name in the Assets.xcassets file. This makes them really easy to reuse and ensures consistency in your project. In this section, you will create a custom color and assign it to the collection view cells. Follow these steps to do so:

1. Click on the Assets.xcassets folder in the Project navigator and right-click in the clear white space of the document outline, as shown in the following screenshot:

2. Choose New Folder from the pop-up menu:

3. Change the name of the folder to colors:

If you make a mistake while renaming the folder, remember that you can always select the name and press Return to make it editable.

4. Right-click on the colors folder and choose New Color Set:

5. Click on the Color Set and click the Attributes inspector. Set the name of the color to Demo Grey, pressing Return when you're done:

6. In the Color section of the Attributes inspector, set the Input Method to 8-bit Hexadecimal and type #AAAAAA into the Hex field, pressing Return when you're done:

7. Click on Main.storyboard. Then, click on exploreCell in the document outline. In the Attributes inspector, set the Background color of the cell to your newly created Demo Grey color:

You've set the color of the collection view cells, but you'll need to change their size to match the size of the cells shown in the app tour in Chapter 9, Setting Up the Basic Structure. You also need to make the collection view section header taller. You will set the cell and header size in your app using the Size inspector in the next section.