8 Webpage Design
Tim Svensson edited this page 2026-04-28 10:22:51 +00:00

Webpage Design

  • The webpage should implement a grid layout with re-arrangeable and resizeable cards. Cards should be customizable with University colors or pictures.

  • UI elements should be using the University's colors, accent colors are allowed where applicable, main body where the cards are located should be white. However if dark themes are implemented the main body should be dark gray to black. On the webpage the University's logo has to be visible. Here is the link to the University's official logos in all the different colors of the university color palette

  • The University's colors should always be visible somewhere on the webpage, the chosen color palette may not be mixed with the other colors only other hues of the same color.

  • According to the University's graphical guidelines the fonts that should be used are AGENDA or TRUMP MEDIAEVAL, AGENDA for headlines and TRUMP MEDIAEVAL for body text. If the fonts are unavailable for any reason ARIAL is a suitable replacement for AGENDA and GEORGIA is a suitable replacement for TRUMP MEDIAEVAL

Colour palette

The colour palette consists of five color scales: Rubine, Safir, Smaragd, Topas and Grafit. Each color scale is divided into four hues, 1, 2, 3 and 4. 1 is the darkest hue and 4 is the lightest. Example: Rubine 2 is the second darkest hue.

The following is the University's colour palettes in hexadecimal(from left to right, the leftmost is the darkest hue and the rightmost is the lightest):

  • Rubine: ##3e1d40, ##69165e, ##b1236e and ##e9d5e4.

  • Safir: ##002c42, ##01476c, ##0969a8 and ##c2ddf2.

  • Smaragd: ##2b3b11, ##4c6322, ##9ab30c and ##e7f5ab.

  • Topas: ##482d18, ##6b4b2b, ##c5ab5e and ##ede5bd.

  • Grafit: ##313538, ##5e6164, ##a0a5a9 and ##dae1e6.

Yes, there is an extra # in the hexcode but otherwise it would link to non-existing issues :(