Doodles

Oodles of doodles.


Asset 2

How we design them

  • When it comes to doodles, only use our core (black and white) and primary (light-green, light-pink, light-blue and yellow) colours
  • Use no more than 2 colours in a doodle
  • Use them sparingly to add delight and when you want to draw attention to something
  • When drawing shapes use an outline style and only fill them in if outlines cannot be used
  • Use the marker pen brush
  • Brush strokes must have a consistent width (not thick and thin in the same line)
  • Doodles should not be used for more serious things (legal documents, transactions etc)

Accessibility

  • To maintain text legibility don’t place doodles over text

1. Doodling around typography

  • Doodles can only be used with “megaphone”, “shout” and “louder” font sizes
  • Doodles should be on the top line of copy, if more than one line
  • On colour backgrounds try to keep doodles black or white
  • On a white backgrounds don’t have a yellow doodle
  • On black or white backgrounds doodles can be any primary colour
  • Keep the doodle in proportion (using these guidelines) with the copy.
View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone gg-u-doodle-squiggle">
  Megaphone
</p>

<p class="gg-u-text-shout gg-u-doodle-squiggle">
  Shout
</p>

<p class="gg-u-text-louder gg-u-doodle-squiggle">
  Louder
</p>

Different colours

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone gg-u-doodle-squiggle gg-u-doodle-squiggle--light-pink">
  Squiggle
</p>

<br>
<br>

<p class="gg-u-text-megaphone gg-u-doodle-squiggle gg-u-doodle-squiggle--light-green">
  Squiggle
</p>

<br>
<br>

<p class="gg-u-text-megaphone gg-u-doodle-squiggle gg-u-doodle-squiggle--light-blue">
  Squiggle
</p>

<br>
<br>

<p class="gg-u-text-megaphone gg-u-doodle-squiggle gg-u-doodle-squiggle--yellow">
  Squiggle
</p>

<br>
<br>

<p class="gg-u-text-megaphone gg-u-doodle-squiggle gg-u-doodle-squiggle--white">
  Squiggle
</p>

Boings

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing">Boing on top</mark>
</p>

<br>
<br>

<p class="gg-u-text-shout">
  <mark class="gg-u-doodle-boing">Boing on top</mark>
</p>

<br>
<br>

<p class="gg-u-text-louder">
  <mark class="gg-u-doodle-boing">Boing on top</mark>
</p>

<br>
<br>

<p class="gg-u-text-louder">
  Boing on a <mark class="gg-u-doodle-boing">word</mark>
</p>

Different colours

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing gg-u-doodle-boing--light-pink">
    Boings
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing gg-u-doodle-boing--light-green">
    Boings
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing gg-u-doodle-boing--light-blue">
    Boings
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing gg-u-doodle-boing--yellow">
    Boings
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-boing gg-u-doodle-boing--white">
    Boings
  </mark>
</p>

End boing

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing">End boing</mark>
</p>

<br>
<br>

<p class="gg-u-text-shout">
  <mark class="gg-u-doodle-end-boing">End boing</mark>
</p>

<br>
<br>

<p class="gg-u-text-louder">
  <mark class="gg-u-doodle-end-boing">End boing</mark>
</p>

Different colours

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing gg-u-doodle-end-boing--light-pink">
    End boing
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing gg-u-doodle-end-boing--light-green">
    End boing
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing gg-u-doodle-end-boing--light-blue">
    End boing
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing gg-u-doodle-end-boing--yellow">
    End boing
  </mark>
</p>

<br>
<br>

<p class="gg-u-text-megaphone">
  <mark class="gg-u-doodle-end-boing gg-u-doodle-end-boing--white">
    End boing
  </mark>
</p>