Jump to content

Aligning colors to make sense of things

Jimi Wikman



As much as I love Invision Community as a platform, it does have a few things that I feel need a bit of structure. One such area are colors because Invision Community could use a more structured way to manage colors in their variables. So I am mapping out all the variables in Figma in an attempt to get them a bit more under control.

In Invision Community there are around 100 color variables and they are split over components rather than as color hues. This means that there is a lot of overlap, especially for certain colors such as white and the brand color. In order to make these things easier to work with, I am going to override the variables in Invison Community by adding them to the custom.css file and then replace the RGB values with another variable instead.

This way I can for example add a theme variable called --ATclr-lightgray-0 with the RGB values (255, 255, 255). Then for a standard IPS value I can add that variable instead of the RGB values. It will look something like this:

--theme-primary_button_font: var(--ATclr-lightgray-0);

By doing this I can reduce the 100 variables to around 30. This will make it a whole lot easier to manage for future designs and it also makes it easier to match the Atlasstic and Prisma brand colors as well as maintaining the Dark Mode for the site.

I am considering if I should follow the Atlassian Design system where they are expanding the color hues to 10 variants. I think that this provides a huge range of colors, while at the same time provide a simple conversion mapping between light and dark modes.

I find myself a bit restricted at the moment before I have the colors and fonts in place, so I am putting some focus on that now so I can save time later.



Recommended Comments

There are no comments to display.

Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...