Digital style guide
The Public Affairs Directorate advises members of the University who are going to use ox.ac.uk as the basis for their own website redesign to do so thoroughly and consistently. These elements have been designed to work together, altering them or the space between them will weaken the overall design. Our website is an important part of our brand and it is everyone’s responsibility to maintain, not detract from, the brand.
This section of the style guide details the core building blocks used by more complex elements throughout the site. To find out further styling details about any of these modules you can right click on the relevant section of the page in Firefox, Safari or Chrome to 'inspect element'.
A note on reset stylesheets
The Oxweb site uses a couple of 'reset' stylesheets. Reset stylesheets are used to reduce browser inconsistencies in rendering of line-height and font sizes etc. These are browser's default styles before an custom styling has been produced. Although becoming less of an issue with modern browsers, they are still required when working with older IE browsers for example.
This site uses Mothership's default styles (mothership/css/mothership-default.css). Mothership is the parent theme of the Oxweb custom theme. It also uses Eric Meyer's style v2.0 reset.css and the HTML5 doctor's reset-html5.css. All of which are provided through the Drupal Mothership module.
Brand colours
These are the brand colours that come from Oxford University's brand guidelines.
The (dark) Oxford blue is used primarily in general page furniture such as the backgrounds on the header and footer. This makes for a strong brand presence throughout the site. Because it features so strongly in these areas, it is not recommended to use it in large areas elsewhere. However it is used more sparingly in smaller elements such as in event date icons and search/filtering bars.
- ExampleHex colourLESS variable
- #002147@colorPrimary
- #a79d96@colorSecondary
- #f3f1ee@colorTertiary
- #122f53@colorLightPrimary
General/secondary colours
The wide secondary palette (detailed in the brand toolkit) is used to add visual distinction and texture to design elements as well as signifying page links, call-to-actions (e.g buttons) and active pages in navigational elements.
To visually distinguish various areas of pages (the best example being the right-hand sidebar) subtle beige background shades are used (derived from the pantones in the palette). These should be used to separate tertiary content from main content without being over-powering or distracting.
Overuse of the beige backgrounds can have the effect of making a page look drab (especially if there are minimal images), so use of this should be carefully considered and balanced with a good amount of white background areas.
Secondary colours (derived from the Oxford palette) can be introduced to give specific templates their own distinctiveness and compliment the core Oxford blue used throughout. An example of this are the shades of teal (derived from Pantone 562 in the palette) used in backgrounds. These add visual interest to less common content blocks such as ‘Facts & figures’.
- #001c3d@colorDarkBlue
- #193658@colorWashedOutBlue
- #c7c2bc@colorCopyrightGrey
- #f3f1ec@colorBeigeGrey
- #001c3d@colorBrownGrey
- #043946@colorFilterFormGreen
- #A1C4D0@colorIconBlueGrey
- #003947@colorTeal
- #f0f5f8@colorVeryLightBlue
- #00152e@colorCookieBar
- #353c47@colorBlueGrey
Link colours
Light blue (derived from Pantone 279 in the palette) is used to indicate general actions (links and buttons). Hence, it is also used in various navigational elements such as the block rollover effect on the drop down menus. However, many ever-present navigational links (such as those in the header/footer) do not use this light blue link colour so as not to distract from the main page content and more contextual related links in the sidebar.
A distinctive red colour (derived from Pantone 200 in the palette) is used sparingly to highlight key/primary call to actions (for example the ‘APPLY’ button on the course template). This is to give it more visibility over other actions on the page of less importance.
- #3277ae@colorLink
- #44687d@colorLinkHover
- #be0f34@colorAltLinkHover
- #70a9d6@colorLinkHeader
- #98c1e1@colorLinkOverlay
Shades
- #000000@colorBlack
- #333333@colorOffBlack
- #7a736e@colorMidGrey
- #a6a6a6@colorDarkGrey
- #e0ded9@colorLightGrey
- #f9f8f5@colourVLightGrey
- #ffffff@colorWhite
Custom blog colours
As mentioned previously, secondary colours are used to give specific templates their own distinctiveness. The blogs are an example of this -they have their own subtle colour theming coupled with a slightly different typographic approach to the main headings.
- #0f7361@colorScienceBlog
- #09332b@colorScienceBlogButton
- #721627@colorArtsBlog
- #330d14@colorArtsBlogButton
- #CF7A30@colorBooksBlog
- #9C4700@colorBooksBlogButton
Graduate country page colours
As above, these sections also have their own custom colour schemes to help differentiate them.
Colours used in this manner should always be derived from the Oxford colour palette, must compliment the core Oxford blue and never dominate it (to ensure the Oxford brand is always inherent).
- #9ECEEB@colorGraduateLightBlue
- #5F9BAF@colorGraduateBlue
- #44687D@colorGraduateNavyBlue
- #A1C4D0@colorGraduateGreyBlue
- #69913B@colorGraduateDarkGreen
- #AAB300@colorGraduateLightGreen
- #CF7A30@colorGraduateOrange
- #F5CF47@colorGraduateYellow
- #872434@colorGraduateDarkRed
- #BE0F34@colorGraduateRed
- #EBC4CB@colorGraduatePink
- #A79D96@colorGraduateGrey
Error colours
This is a list of colours that are used for alerts around the site. They should not be used to signify anything else as they are not part of the Oxford palette.
- #7dbc23@colorStatus
- #bc9a23@colorWarning
- #be0f34@colorError
- #fff0f3@colorErrorLight
Social media colours
This is a list of colours that are used for social media buttons around the site. They should not be used to signify anything else as they are not part of the Oxford palette.
- #be0f34@colorCherry
- #ac48bf@colorPurple
- #C7302B@colorRed
- #1daced@colorLightBlue
- #001c3d@colorDeepBlue
- #006599@colorLagoonBlue
- #D62A2A@colorWeibo
- #177770@colorGreen
- #FB8113@colorOrange
- #d34836@colorGooglePlus
- #517fa4@colorInstagram
Typography
Here we have a list of the fonts in use on the site. Both the PT Sans and PT Serif fonts are load in via Google Fonts and are free fonts. The san serifs (PT Sans) are used for headings and short items of content and serifs (PT Serif) is used for body copy. Font Awesome is an icon font in use on the site it's also freely available.
PT Sans Narrow should only be used for large headings - such as on section index pages, in the homepage main carousel or on the blog landing pages.
PT Serif should only be used for body copy and never in headings, tertiary listings (e.g in the beige sidebar) or teasers (e.g features on index pages) - which all use PT Sans.
PT Sans - @fontPTSans
Font stack: PT Sans, Helvetica Neue, Arial, Helvetica, sans-serif
Sample:Whoever is happy will make others happy too. - Anne Frank
PT Sans Narrow - @fontPTSansNar
Font stack: PT Sans Narrow, Helvetica Neue, Arial, Helvetica, sans-serif
Sample:Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree. - Martin Luther
PT Sans Caption - @fontPTSansCap
Font stack: PT Sans Caption, Helvetica Neue, Arial, Helvetica, sans-serif
Sample:Failures, repeated failures, are finger posts on the road to achievement. One fails forward toward success. - C. S. Lewis
PT Serif - @fontPTSerif
Font stack: PT Serif, Georgia, Times New Roman, serif
Sample:Education is the most powerful weapon which you can use to change the world. - Nelson Mandela
PT Serif Italic 700 - @fontPTSerif700Italic
Font stack: PT Serif 700italic, Georgia, Times New Roman, serif
Sample:I think; therefore I am. - Rene Descartes
Font Awesome (Icons) - @fontFontAwesome
Font stack: "FontAwesome"
Sample:
Font sizes
Below is a list of reusable font sizes around the site. The LESS variable loosely take the form of T-shirt sizes to make them easier to remember.
16px - @sizeBase
This the base size, you can use the @sizeBase variable to access it.4.375em - @sizeSuH1
Super size h1 - 70px when directly inheriting from the base size.3.125em - @sizeSu
Super size - 50px when directly inheriting from the base size.1.813em - @sizeXXL
Extra extra large - 29px when directly inheriting from the base size.1.625em - @sizeXL
Extra large - 26px when directly inheriting from the base size.1.313em - @sizeL
Large - 21px when directly inheriting from the base size.1.125em - @sizeM
Medium - 18px when directly inheriting from the base size.1em - @sizeMS
Medium small - 16px equal to the base size.0.938em - @sizeS
Small - 15px when directly inheriting from the base size.0.813em - @sizeSS
Super Small - 15px when directly inheriting from the base size.
Tablet size overrides
2.6em - @tabSizeSu
Super size override - 42px when directly inheriting from the base size.1.6875em - @tabSizeXXL
Extra extra large override - 27px when directly inheriting from the base size.1.5em - @tabSizeXL
Extra large override - 26px when directly inheriting from the base size.
Mobile size overrides
2.6em - @mobSizeSu
Super size override - 30px when directly inheriting from the base size.
Line heights
General line heights used around the site.
-
Standard line height - @lineHeight
We are in danger of destroying ourselves by our greed and stupidity. We cannot remain looking inwards at ourselves on a small and increasingly polluted and overcrowded planet. - Stephen Hawking
-
Heading line height - @lineHeightQuote
Friendship... is not something you learn in school. But if you haven't learned the meaning of friendship, you really haven't learned anything. - Muhammad Ali
-
Quote line height - @lineHeightQuote
It is the mark of an educated mind to be able to entertain a thought without accepting it.
Aristotle
Grid layout
The grid system being used is Responsable Grid version 1.1, this is a fluid grid system.
Maximum grid columns | 12 | 12 column grid |
---|---|---|
Max page width | 1600px | Maximum width on desktop breakpoint |
Full gutter width | 2.118933698% | Halved and added via left and right padding on each col |
Mobile gutter width | 3% | Mobile uses a one column layout but with gutters each side |
Share bar
Body content
Sidebar
Media queries
This sections details the breakpoint used on the site. The points in which the design breaks and displays a different set of CSS, which are designed to display layouts better on smaller devices.
Below you'll be shown which breakpoint you are currently on. Resize for all examples.
Major breakpoints
As well as these being CSS breakpoints they are also mirrored in JavaScript to manage running JS on the correct breakpoints.
Desktop | standard styling | Standard styling around the site, this is the default styling |
---|---|---|
Pre-tablet | max-width: 1270px | Predominantly styling to handle the wide menus |
Tablet | max-width: 1024px | Styling to optimise the tablet experience. Introduction of retina images (ideally to be pixel-ratio query) |
Tablet (portrait) | max-width: 870px | Easing the tablet experience when users orientate tablets in portrait, also covers 'phablets' |
Mobile | max-width: 500px | Styling for mobile devices |
Design easing breakpoints
For those areas when the main breakpoint aren't in reach. These breakpoints are discouraged due to maintenance and testing overheads and should only be used when strictly necessary.
News pages | max-width: 768px |
---|---|
Staff events | min-width: 1296px |
Events view | min-width: 1400px |
Logo usage
There are an array of logos used on Oxford in order to display the Oxford logo in the best quality available depending on the device accessing it. The logos and their usage are shown below.
This logo is used on the desktop breakpoint. It's the best rendered logo we have where scalability is not required. | oxweb-logo.gif | |
This is an SVG version of the logo, it's best used for scaling as it will not lose its quality. This is used on the pre tablet breakpoint down. | oxweb-logo-square.svg | |
Here we have another SVG however the logo orientation is rectangular. It use less vertical space so which reduces the header space required. We use this logo on the portrait tablet down. | oxweb-logo-rect.svg |