Base

This component is the foundation of the design system and includes typography, layouts, colours, buttons and patterns.

Typography

CSS font stack

/* var(--ff-sans) */
font-family: Roboto, Helvetica, Arial, sans-serif;

/* var(--ff-fixed) */
font-family: Courier New, Courier, fixed;

/* var(--ff-serif) */
font-family: Georgia, Times New Roman, Times, serif;

The only non-websafe font is Roboto, which we serve via @font-face.

Why Roboto

All print products of the University use Linotype Univers as default font. Due to a few issues with that particular font on the web (licensing, loading, etc...) we had to find a similar font that works better in the digital space.

Google's Roboto is not only created specifically for screens, it is also very similar to Linotype Univers. Furthermore it is also pre installed on most Android phones which eases the initial load in mobile networks significantly.

Typography guidelines

Large headlines
Only used on the hero. The background image must ensure readibility of the headline.
Roboto Thin
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Body text
Used for standard copy text.
Roboto Light
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Special highlighting
Image captions, quoting etc.
Roboto Light Italic
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
General headlines
Font used for all standard headlines within a text.
Roboto Regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )
Article headlines
Only used as the headline for a single article.
Roboto Bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( )

Ordered list standard

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items 
<ol>
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
</ol>

Ordered list lowercase alpha

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items 
<ol type="a">
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
</ol>

Ordered list lowercase roman numerals

  1. Ordered list items
  2. Ordered list items
  3. Ordered list items 
<ol type="i">
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
  <li>
    Ordered list items
  </li>
</ol>

Ordered list steps

  1. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere.

  2. Headline

    Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  3. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

    • Item
      1. This is a nested list
      2. with two items.
    • Item
    • Item
    • Item
    1. Item
      1. This is a nested list
      2. with two items.
    2. Item

  4. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus.

  5. Headline

    Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  6. Headline

    Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  7. Headline

    Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  8. Headline

    Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia.

  9. Headline

    Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.

  10. Headline

    Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. 

<ol class="steps">
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Cum ceteris in veneratione <strong>tui montes</strong>, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
    <ul>
      <li>
        Item
        <ol>
          <li>
            This is a nested list
          </li>
          <li>
            with two items.
          </li>
        </ol>
      </li>
      <li>
        Item
      </li>
    </ul>
    <ul class="ticked-list">
      <li>
        Item
      </li>
      <li>
        Item
      </li>
    </ul>
    <ol>
      <li>
        Item
        <ol>
          <li>
            This is a nested list
          </li>
          <li>
            with two items.
          </li>
        </ol>
      </li>
      <li>
        Item
      </li>
    </ol>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Cum ceteris in veneratione <a href="#">tui montes</a>, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
  <li>
    <h2>
      Headline
    </h2>
    <p>
      Quisque ut dolor gravida, placerat libero vel, euismod. Fabio vel iudice vincam, sunt in culpa qui officia. Cum ceteris in veneratione tui montes, nascetur mus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
    </p>
  </li>
</ol>

Ordered list nested

  1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  2. Cum ceteris in veneratione tui montes, nascetur mus.
  3. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  4. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  5. Quisque ut dolor gravida, placerat libero vel, euismod.
  6. Quisque ut dolor gravida, placerat libero vel, euismod.
    1. Fabio vel iudice vincam, sunt in culpa qui officia.
    2. Cum ceteris in veneratione tui montes, nascetur mus.
    3. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    4. Fabio vel iudice vincam, sunt in culpa qui officia.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus.
  7. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  8. Quisque ut dolor gravida, placerat libero vel, euismod.
  9. Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  10. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    1. Quisque ut dolor gravida, placerat libero vel, euismod.
    2. Fabio vel iudice vincam, sunt in culpa qui officia.
    3. Fabio vel iudice vincam, sunt in culpa qui officia.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus.
    4. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      1. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      2. Quisque ut dolor gravida, placerat libero vel, euismod.
      3. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      4. Sed haec quis possit intrepidus aestimare tellus. 
<ol class="nested">
  <li>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  </li>
  <li>
    Cum ceteris in veneratione <strong>tui montes</strong>, nascetur mus.
  </li>
  <li>
    Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  </li>
  <li>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  </li>
  <li>
    Quisque ut dolor gravida, placerat libero vel, euismod.
  </li>
  <li>
    Quisque ut dolor gravida, placerat libero vel, euismod. 
    <ol>
      <li>
        Fabio vel iudice vincam, sunt in culpa qui officia.
      </li>
      <li>
        Cum ceteris in veneratione tui montes, nascetur mus.
      </li>
      <li>
        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
      </li>
      <li>
        Fabio vel iudice vincam, sunt in culpa qui officia. 
        <ol>
          <li>
            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
          </li>
          <li>
            Quisque ut dolor gravida, placerat libero vel, euismod.
          </li>
          <li>
            Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
          </li>
          <li>
            Sed haec quis possit intrepidus aestimare tellus.
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere.
  </li>
  <li>
    Quisque ut dolor gravida, placerat libero vel, euismod.
  </li>
  <li>
    Fabio vel iudice vincam, sunt in culpa qui officia. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus.
  </li>
  <li>
    Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. 
    <ol>
      <li>
        Quisque ut dolor gravida, placerat libero vel, euismod.
      </li>
      <li>
        Fabio vel iudice vincam, sunt in culpa qui officia.
      </li>
      <li>
        Fabio vel iudice vincam, sunt in culpa qui officia. 
        <ol type="a">
          <li>
            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
          </li>
          <li>
            Quisque ut dolor gravida, placerat libero vel, euismod.
          </li>
          <li>
            Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
          </li>
          <li>
            Sed haec quis possit intrepidus aestimare tellus.
          </li>
        </ol>
      </li>
      <li>
        Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. 
        <ol type="i">
          <li>
            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
          </li>
          <li>
            Quisque ut dolor gravida, placerat libero vel, euismod.
          </li>
          <li>
            Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
          </li>
          <li>
            Sed haec quis possit intrepidus aestimare tellus.
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Ordered list bracket

  1. By section 18(3) of the Melbourne University Act 1958 power is conferred on the University to make and alter statutes for the affiliation to or connection with the University of any commercial, cultural, educational, sporting or other institution or body if–
    1. the affiliated institution would assist in attaining any of the objects of the University; and
    2. the governing body of the institution, organisation or body has consented to the affiliation.
  2. The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  3. The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the Howard Florey Institute of Experimental Physiology and Medicine Act 1971 ("the Institute Act") for the objects of that Act.
  4. Each candidate may provide for publication an electoral statement of not more than 200 words.
  5. The returning officer may edit a candidate's electoral statement before its publication, for length or to correct spelling and grammar.
  6. A candidate may withdraw his or her nomination by writing to the returning officer, no later than three days before the start of the voting period.
  7. Where the number of nominations is the same as the number of vacancies, the returning officer must declare the candidates elected.
  8. Where the number of candidates exceeds the number of vacancies, the returning officer must give notice of and conduct a ballot.
  9. The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  10. The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the Howard Florey Institute of Experimental Physiology and Medicine Act 1971 ("the Institute Act") for the objects of that Act. 
<ol class="brackets">
  <li>
    By section 18(3) of the <strong>Melbourne University Act 1958 </strong>power is conferred on the University to make and alter statutes for the affiliation to or connection with the University of any commercial, cultural, educational, sporting or other institution or body if– 
    <ol class="brackets" type="a">
      <li>
        the affiliated institution would assist in attaining any of the objects of the University; and
      </li>
      <li>
        the governing body of the institution, organisation or body has consented to the affiliation.
      </li>
    </ol>
  </li>
  <li>
    The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  </li>
  <li>
    The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the <strong>Howard Florey Institute of Experimental Physiology and Medicine Act 1971</strong> ("the Institute Act") for the objects of that Act.
  </li>
  <li>
    Each candidate may provide for publication an electoral statement of not more than 200 words.
  </li>
  <li>
    The returning officer may edit a candidate's electoral statement before its publication, for length or to correct spelling and grammar.
  </li>
  <li>
    A candidate may withdraw his or her nomination by writing to the returning officer, no later than three days before the start of the voting period.
  </li>
  <li>
    Where the number of nominations is the same as the number of vacancies, the returning officer must declare the candidates elected.
  </li>
  <li>
    Where the number of candidates exceeds the number of vacancies, the returning officer must give notice of and conduct a ballot.
  </li>
  <li>
    The Howard Florey Laboratories of Experimental Physiology were commissioned in 1963 for the purpose of the study within the University of integrative physiology by long term experiments.
  </li>
  <li>
    The Howard Florey Institute of Experimental Physiology and Medicine ("the Institute") was incorporated by the <strong>Howard Florey Institute of Experimental Physiology and Medicine Act 1971</strong> ("the Institute Act") for the objects of that Act.
  </li>
</ol>

Default bullet points

  • Unordered list items
  • Unordered list items
  • Unordered list items 
<ul>
  <li>
    Unordered list items
  </li>
  <li>
    Unordered list items
  </li>
  <li>
    Unordered list items
  </li>
</ul>

Complex lists

  • Qui impetus tibique
  • Unordered list, inner
    • Qui impetus tibique
    • maluisset ne, omnes
    • persequeris in vis.
  • persequeris in vis.
  • Ordered list, inner
    1. Qui impetus tibique
    2. No bullet point, overriden
  1. Qui impetus tibique
  2. Ordered list, inner
    1. Qui impetus tibique
    2. Ordered list, inner-inner
      1. Qui impetus tibique
      2. maluisset ne, omnes
      3. persequeris in vis.
    3. Ordered list, inner-inner, type="a"
      1. Qui impetus tibique
      2. maluisset ne, omnes
      3. persequeris in vis.
      4. Ordered list, inner-inner-inner, type="i"
        1. Qui impetus tibique
        2. maluisset ne, omnes
        3. Ordered list, inner-inner-inner-inner, type="a"
          1. Qui impetus tibique
          2. maluisset ne, omnes
          3. persequeris in vis.
      5. Ordered list, inner-inner-inner, type="1"
        1. Qui impetus tibique
        2. maluisset ne, omnes
        3. persequeris in vis.
    4. Ordered list, inner-inner, type="i"
      1. Qui impetus tibique
      2. No bullet point, overriden
      3. persequeris in vis.
    5. Unordered list, inner-inner
      • No bullet point, overriden
      • maluisset ne, omnes
      • persequeris in vis.
    6. persequeris in vis.
  3. persequeris in vis.
  4. Unordered list, inner
    • Qui impetus tibique
    • maluisset ne, omnes
    • persequeris in vis. 
<ul>
  <li>
    Qui impetus tibique
  </li>
  <li>
    Unordered list, inner 
    <ul>
      <li>
        Qui impetus tibique
      </li>
      <li>
        maluisset ne, omnes
      </li>
      <li>
        persequeris in vis.
      </li>
    </ul>
  </li>
  <li>
    persequeris in vis.
  </li>
  <li>
    Ordered list, inner 
    <ol>
      <li>
        Qui impetus tibique
      </li>
      <li class="no-li">
        No bullet point, overriden
      </li>
    </ol>
  </li>
</ul>
<ol>
  <li>
    Qui impetus tibique
  </li>
  <li>
    Ordered list, inner 
    <ol>
      <li>
        Qui impetus tibique
      </li>
      <li>
        Ordered list, inner-inner 
        <ol>
          <li>
            Qui impetus tibique
          </li>
          <li>
            maluisset ne, omnes
          </li>
          <li>
            persequeris in vis.
          </li>
        </ol>
      </li>
      <li>
        Ordered list, inner-inner, type="a" 
        <ol type="a">
          <li>
            Qui impetus tibique
          </li>
          <li>
            maluisset ne, omnes
          </li>
          <li>
            persequeris in vis.
          </li>
          <li>
            Ordered list, inner-inner-inner, type="i" 
            <ol type="i">
              <li>
                Qui impetus tibique
              </li>
              <li>
                maluisset ne, omnes
              </li>
              <li>
                Ordered list, inner-inner-inner-inner, type="a" 
                <ol type="a">
                  <li>
                    Qui impetus tibique
                  </li>
                  <li>
                    maluisset ne, omnes
                  </li>
                  <li>
                    persequeris in vis.
                  </li>
                </ol>
              </li>
            </ol>
          </li>
          <li>
            Ordered list, inner-inner-inner, type="1" 
            <ol type="1">
              <li>
                Qui impetus tibique
              </li>
              <li>
                maluisset ne, omnes
              </li>
              <li>
                persequeris in vis.
              </li>
            </ol>
          </li>
        </ol>
      </li>
      <li>
        Ordered list, inner-inner, type="i" 
        <ol type="i">
          <li>
            Qui impetus tibique
          </li>
          <li class="no-li">
            No bullet point, overriden
          </li>
          <li>
            persequeris in vis.
          </li>
        </ol>
      </li>
      <li>
        Unordered list, inner-inner 
        <ul>
          <li class="no-li">
            No bullet point, overriden
          </li>
          <li>
            maluisset ne, omnes
          </li>
          <li>
            persequeris in vis.
          </li>
        </ul>
      </li>
      <li>
        persequeris in vis.
      </li>
    </ol>
  </li>
  <li>
    persequeris in vis.
  </li>
  <li>
    Unordered list, inner 
    <ul>
      <li>
        Qui impetus tibique
      </li>
      <li>
        maluisset ne, omnes
      </li>
      <li>
        persequeris in vis.
      </li>
    </ul>
  </li>
</ol>

Ticked list

  • Item
  • Another item
    • A nested list
    • reverts to the standard bullet style
  • This one is not ticked at all, via assigned class 
<ul class="ticked-list">
  <li>
    Item
  </li>
  <li>
    Another item 
    <ul>
      <li>
        A nested list
      </li>
      <li>
        reverts to the standard bullet style
      </li>
    </ul>
  </li>
  <li class="no-li">
    This one is not ticked at all, via assigned class
  </li>
</ul>

Typography styles

Simple typographic styles

Below are some basic typographic styles with their associated renderings 

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>A paragraph of text</p>
<p><strong>Bold </strong>, <em>italic</em>and <u>underlined</u> text</p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A paragraph of text

Bold , italic and underlined text

Colours

The colours used on our website go a long way towards ensuring a consistent user experience and compatibility with the University of Melbourne brand. In many ways University Blue is as much a part of the university brand as the crest itself.

In general, you should not need to customise the colours on your website and should use the default colour scheme provided. This page exists primarily as a reference for people looking to contribute additional components to the templates.

How to use colours

You do not need to do anything to make use of the colours referenced here.

On the web, colour choices are vital in ensuring the utility and accessibility of our websites as they impact contrast. Colours are also used to denote various types of functionality, so you will find these colours used throughout various template components (a good example is buttons. For example, green is frequently used to denote a primary action that you would like someone to take.

Things to avoid

You should avoid:

  • Changing the colour of components either locally or globally (eg. making the logo red, or the body text green). Doing this damages our user-experience, brand consistency and could have an adverse impact on accessibility.
  • Add colours to the palette. If you feel that a colour should be added to the palette, please request it using the contribution process.

Colour palette

#000000
#333333
#666666
#ADB8C1
#E0E0E0
#F2F5F8
#F6F6F6
#FFFFFF
#0C304A
#304E64
#004576
#366996
#82A1BD
#006FDC
#E1EAF5
#FFFBCC
#008a00
#DF0620