Doodles

Oodles of doodles.

Please note that doodles are being deprecated and will be removed in a future release.

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 should 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 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

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

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

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

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

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

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>