UQCS Design Guidelines

Colour

We use three primary colours, none of which are pure black.

• Our grey/"black" is #414141. Use this for body text and main headings.
• Our blue/cyan is #50C3F0. Use this for subheadings, anything which needs emphasis, and branding where possible.
• Our white is #FFFFFF. Use this on grey BG. Try to use grey on blue BG instead of white, as it draws more contrast, but up to you.

Type

We use Inter as the primary font for headings, subheadings and body. For banners etc. on Canva, use these:

• Headings: Inter Bold 32pt with -30 letter spacing.
• Subheadings: Inter Bold 16pt.
• Body: Inter 12pt.

Try to keep to these proportions if designing at a different size.

Note: mono was used for body for a short period of time in the inception phase, but it was decided that monospace text everywhere was a bit too harsh. Please avoid using mono text as body.

We also use Roboto Mono as a contrast font, or for specific "code"-like design elements, but keep it reasonable. The typeface for this is Roboto Mono, and use it at the same point size as the text you're matching with (i.e. 12pt for Body, 16pt for Subheadings etc).

In the rare occasion that we need to use math fonts, there's not really a good sans-serif math font available, so stick to Computer Modern/Latin Modern/any of those variants. It's what MathJax and KaTeX come with anyway.

In terms of convention, these are the tips to follow:

• Try to stick to a grid wherever possible. At the very least, align elements (note that Canva might not align things properly i.e. textboxes bigger than the text etc. So take caution and align by eye if necessary. Go with what looks nicest :))
• Use ragged-right/"left aligned" text where possible. Avoid justifying (but this is kinda subjective, if using it at least be consistent).

Logo

We have seven types of logo, for different purposes.

• Square, used for social profile pictures.
• Circle, used for social profile pictures.
• Short, used for identifying ourselves to a familiar audience.
• Tall, used for identifying ourselves to a somewhat familiar audience.
• Full, used for banners and identifying ourselves to a new audience (such as collaboration events).
• Outline-Short, used as an additional eye-catching design element for banners or anything.
• Outline-Tall, similar to Outline-Short but probably less useful.

Short, Tall and Full can be used basically at the designer's discretion. Choose whichever fits most nicely.