Colors

This chapter shows which colors should be used for the different components in the application. Throughout this a single color in each entry will denote a solid color, while two colors in an entry will denote a gradient between the two colors.

Text and background

Usage	RGB	HEX	Color
Regular text-color	0,0,0	#000000
Text-color used to indicate placeholder or hint-texts	170,170,170	#AAAAAA
Background-color for any applications window background	0,0,0	#000000
Background-color for any activity	233,233,233	#E9E9E9
Showcase help text-color	255,255,255	#FFFFFF

Buttons

Gradients defined below are from top to bottom. Also note that the colors for the disabled button must be transparent (40% opacity).

Usage	RGB	HEX	Color
Regular button background	255,205,89 255,157,0	#FFCD59 #FF9D00
Regular button stroke/border	138,110,0	#8A6E00
Pressed button background	212,173,47 255,157,0	#D4AD2F #FF9D00
Pressed button stroke/border	#493700	73,55,0

Images

Usage	RGB	HEX	Color
Image background-color	255,255,255	#FFFFFF
Image border-color	0,0,0	#000000
Image marking-color	254,215,108	#FED76C

Bars

Usage	RGB	HEX	Color
Background of any bar	253,187,85 254,215,108	#FDBB55 #FED76C
Stroke/border of the bar	229,190,83	#E5BE53

• Gradient for top bars is top to bottom.
• Gradient for side bars is left to right.
• Gradient for bottom bars is bottom to top.

Week indicators

These colors must be used whenever a certain weekday is referenced. Note that these colors are primarily used to increase the usability for citizens because they are already familiar with this color scheme.

Usage	RGB	HEX	Color
Monday	8,160,69	#08A045
Tuesday	84,13,110	#540D6E
Wednesday	247,127,0	#F77F00
Thursday	0,71,119	#004777
Friday	249,200,14	#F9C80E
Saturday	219,43,57	#DB2B39
Sunday	255,255,255	#FFFFFF

Page indicator

These colors must be used for indicating which page the user is currently on.

Usage	RGB	HEX	Color
Active page	255,157,0	#FF9D00
Inactive page	255,205,89	#FFCD59

---

Last update: September 18, 2024