Otago Polytechnic


Otago Polytechnic’s website is a primary way that we communicate our message with those internal and external to the community; therefore, it is vital that all pages maintain a level of consistency in appearance and functionality. These standards apply to all sites within the Otago Polytechnic domain.


UI style guides

UI style guides is an essential tools to help web teams maintain sanity while creating experiences for our multi-device web. It establish a common language of Otago Polytechnic brand and make testing  prcoss easier and foundation for web development team to modify, extend, and evolve over time. Most importantly, it presents an consistent language for navigation and enchance the user experiece for usability. The sytle guide consists a series of elements for example, icons, buttons, layout, photography, colour and typography.


Product icons

Product icons are the visual expression of a brand’s products, services, and tools. They communicate the core idea and intent of a product. While each product icon is visually distinct, all product icons for a given brand should be unified through concept and execution.


System Icons

A system icon symbolizes a command, file, device, or directory. System icons are also used to represent common actions like save, print, and calendar. The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.


We aim to keep all buttons across the app as consistent as possible. Any implementations of buttons should aim to follow a systematic class naming system and style.

Colour for digital screen
Monitors display colour different from print and varies to the resolutions of the screen. We have tested and define the colour for screen to make sure its consistency for the brand.