Colors

The main colors of Helsinki University style are white, black and shades of blue defined in the brand guide. Additional colors are used only as the accent color for different departments designs that the color is assigned to and should not be used in general components

You can use them in your css with css variables or import them from colors.ts in camel-cased format: import {brandMain} from '../colors'.

Usage

Color	CSS variable	Color code	Comments
	--brand-main	#0e688b	Main brand color
	--brand-main-light	#107eab
	--brand-main-active	#005379
	--brand-main-dark	#003146
	--brand-main-nearly-black	#000222
	--grayscale-white	#fff	Main white
	--grayscale-light	#f8f8f8
	--grayscale-medium-dark	#979797
	--grayscale-dark	#555555
	--grayscale-black	#000000	Main black
	--additional-red-light	#E5053A	Color reserved for department use
	--additional-red-dark	#A31621	Color reserved for department use
	--additional-purple-light	#42003	Color reserved for department use
	--additional-yellow	#F9A21A	Color reserved for department use
	--additional-skyblue	#48C5F8	Color reserved for department use
	--additional-green-light	#96BA3C	Color reserved for department use
	--additional-green-dark	#006400	Color reserved for department use

---

HY component demo