New web

Web pattern library, style and technical reference

This document is a working draft to serve as a reference library for a standardised set styles and components that have been developed for use on the University of Newcastle corporate website.

The provided code examples are primarily for reference, with the necessary html structures typically being handled either through the WYSIWYG editor within the CMS, or through the use of pre-defined 'paint layouts' and 'container templates'.

This reference should be used in conjunction with the official UON brand guidelines

If you are using this as reference for applying the UON brand to a web system that is external to the main corporate website (www.newcastle.edu.au), please consult with the web team team within Marketing and Communications regarding approval of brand usage and any associated design work prior to commencing.


  1. Typefaces
    1. Alternate Typefaces
    2. Font stacks
    3. Primary Typefaces
    4. Web-specific Typefaces
  2. Content
    1. Buttons
    2. Content
    3. Embelishments
    4. Headings
    5. Headlines
    6. Lists
    7. Messages
    8. WYSIWYG Styles
  3. Colours
    1. Accessibility
    2. Core colours
    3. Core tints
    4. Grey colours (web only)
    5. Social colours
  4. Icons
    1. Academicons
    2. Font Awesome
    3. Icons8
    4. Other icons
    5. Social
    6. Study Area icons
  5. Images
    1. Generated Varieties
    2. Recommended Sizes
  6. Templates
    1. Recruitment Templates
    2. Restricted Templates
    3. Specialised Templates
    4. Standard Templates
    5. Template Heirarchy
  7. Container Templates
    1. About Section - General
    2. Alumni Award Profile
    3. Area header
    4. A-Z People Listing
    5. Campagin Call to Action
    6. Centres Listing
    7. Contacts Footer
    8. Content Promo Banner
    9. Highlights Feature Carousel
    10. Homepage Carousel Slide
    11. Icon List Row
    12. Index Listing Item
    13. Landing Page Find Staff
    14. Landing Page Header
    15. Landing page search
    16. Media gallery
    17. Overview index
    18. People Listing
    19. Quicklinks Box
    20. Related Degrees List
    21. Reputation Story
    22. Reputation Video Content
    23. Section Footer
    24. Subsite Page Header
    25. Video Content
    26. VR Viewer
  8. Global Components
    1. Cookie trail
    2. Menus
    3. Page Footer
    4. Page Header
    5. UON Global Footer
    6. UON Global Header
  9. Content Components
    1. Accordion
    2. Call to action
    3. Icon List
    4. Landing Page - Feature Widgets
    5. Landing Page - Featured Degrees
    6. Landing Page - Featured Rankings
    7. Large Call to Action button
    8. Specialty Grids
    9. Standard Grids
    10. Sub Landing Page - Feature Widgets Grid
  10. Sidebar Components
    1. Sidebar setup
    2. Call to action widget
    3. Events widget
    4. Facebook widget
    5. Feature widget
    6. Highlight widget
    7. LinkedIn widget
    8. News widget
    9. Twitter widget
  11. Logo
    1. Alternate Logo
    2. Restricted Logo
    3. Square Logo
  12. Metadata
    1. Degrees
    2. Disciplines
    3. Dublin Core
    4. Key Dates
    5. MOOCs
    6. Settings
    7. USP
  13. Resources
    1. CSS
    2. Fonts
    3. Images
    4. Javascript
    5. Unicorn library
    6. XSL Templates
  14. Data Sources
    1. CSV
    2. DB
    3. JSON
    4. REST
    5. XML
  15. Parse Files
    1. Blank 2016
    2. Freeform 2016
    3. UON 2016
  16. Developer Guidelines
    1. Asset Setup
    2. Code Templates
    3. Naming Conventions
    4. Regex