Digital style guide - building blocks | University of Oxford

Digital style guide - building blocks

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.

top

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.

  • Example
    Hex colour
    LESS variable
  •  
    #002147
    @colorPrimary
  •  
    #a79d96
    @colorSecondary
  •  
    #f3f1ee
    @colorTertiary
  •  
    #122f53
    @colorLightPrimary
top

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
top

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
top

Shades

  •  
    #000000
    @colorBlack
  •  
    #333333
    @colorOffBlack
  •  
    #7a736e
    @colorMidGrey
  •  
    #a6a6a6
    @colorDarkGrey
  •  
    #e0ded9
    @colorLightGrey
  •  
    #f9f8f5
    @colourVLightGrey
  •  
    #ffffff
    @colorWhite
top

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
top

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
top

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
top

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
top

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:
top

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 overides

  • 2.6em - @tabSizeSu

    Super size overide - 42px when directly inheriting from the base size.
  • 1.6875em - @tabSizeXXL

    Extra extra large overide - 27px when directly inheriting from the base size.
  • 1.5em - @tabSizeXL

    Extra large overide - 26px when directly inheriting from the base size.

Mobile size overides

  • 2.6em - @mobSizeSu

    Super size overide - 30px when directly inheriting from the base size.
top

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
top

Grid layout

The grid system being used is Responsable Grid version 1.1, this is a fluid grid system.

Maximum grid columns1212 column grid
Max page width1600pxMaxium width on desktop breakpoint
Full gutter width2.118933698%Halved and added via left and right padding on each col
Mobile gutter width3%Mobile uses a one column layout but with gutters each side
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
1 Col
4 Cols
8 Cols
1 Cols

Share bar

8 Cols

Body content

3 Cols

Sidebar

top

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.

Desktop 1271px - 1600px
Pre-tablet 1025px - 1270px
Tablet 871px - 1024px
Tablet (portrait) 501px - 870px
Mobile 0 - 500px

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-tabletmax-width: 1270px Predominantly styling to handle the wide menus
Tablet max-width: 1024pxStyling to optimise the tablet experience. Introduction of retina images (ideally to be pixel-ratio query)  
Tablet (portrait)max-width: 870pxEasing the tablet experience when users orientate tablets in portrait, also covers 'phablets'
Mobilemax-width: 500pxStyling 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 pagesmax-width: 768px
Staff eventsmin-width: 1296px
Events viewmin-width: 1400px
top

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
top