⌨️ CI/CD as code

Design principles

The design principles of the CI/CD of confirm IT solutions are:

  • We’re handling our corporate identity / corporate design as code

  • There’s a single source of truth, namely a Photoshop file called colours.psd

  • There’s an automated building process which generates all the required assets

  • The automation is automatically triggered via CI/CD pipeline


Since handling corporate identity / corporate design manually can be quite a challenge, we tried to find a different and better approach. We love automation and we can develop, so we came up with the idea of reusable elements & colours, which can be used across different operating systems & platforms (Adobe Tools, Apple Keynote, Website).

At the same time as all of this was just a rough idea, Cheryl came up with a nice way of handling multiple colour families. By using different greyscale values in the horizontal axis, and overlaying them with colours in the vertical axies, we had some kind of “colour matrix”. When this is done properly (see Constraints), all colours in a vertical axies will share the same contrast ratio. This was an important step - an important step as it turned out!

We experienced that the most capable tool to define the colours with these overlays / colour mixes is Photoshop. However, since Photoshop is a designer’s tool and since those are usually crap regarding automation, processes, interfaces & versioning, we had to find a way to get to the colours. This is when we came up with our current solution. We sticked to Photoshop, created a PNG image from it and then we were ready to read/parse the colours via Python from the PNG image.

Having the ability reading the colours “in code”, we could then create all the required assets and maintaining CI/CD things started to make fun again. We’re now capable of generating all the assets we need, for all the tools & platforms we use - everything originated from the origin Photoshop file. Maintaining CI/CD is now as easy as straight forward as maintaining code.