-
Notifications
You must be signed in to change notification settings - Fork 387
Colour System
The Colour System is based around the concept of using a singular colour hue as the basis for (almost) all of the colours used by a page.
Because the colours are derived from a base hue, the colours are 'relative' to one another in terms of saturation and luminance - this makes it possible to change the base hue and have the page designs still work (e.g. if page is moved to another section, etc) whilst still remaining consistent.
To use the colour system, use the LESS variables @osu-colour-[code] as defined by the design doc linked below.
In addition to the base colours, a 'basic' colour palette has been defined for when pages need an additional splash of colour (this is kept to a minimum). The colours defined in this palette are constant and do not change with the base hue. The saturation and luminance values were selected such that a high contrast is ensured, regardless of the base hue they're being used with.
To use the 'basic' colour palette, use the LESS variables @osu-colour-[colour]-[code] as defined by the design doc linked below.
The full list of colours and further guidelines on their usage can be found in the design doc linked here: https://www.figma.com/file/VIkXMYNPMtQem2RJg9k2iQ/Asset%2FColours
Because the colour system utilises CSS variables to calculate the colours dynamically, certain LESS functions won't work as expected as they expect actual colours and don't handle CSS vars.
The current workaround for fade(@color, @amount) is to use osu-hsla(@colour, @alpha) instead.
e.g. color: osu-hsla(@osu-colour-b6, 0.5);
Note that while fade() expects opacity to be 0-100%, osu-hsla() expects the opacity to be 0-1.