Themes

Text and colour combinations that divide up sections of the site.


How we design them

We have 5 themes to pick from:

  • White background with black text
  • Black background with white text
  • Light blue background with black text
  • Wild sand background with black text (note: this also has a background texture)
  • Light pink background with black text

Note: All combinations meet the AA accessibility standard.

How they look

View demo Open in new window
320 x 568
View code
<div class="gg-t-white">
  <section class="gg-o-page-section">
    <p>white theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-light-blue">
  <section class="gg-o-page-section">
    <p>light-blue theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-wild-sand">
  <section class="gg-o-page-section">
    <p>wild-sand theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-black">
  <section class="gg-o-page-section">
    <p>black theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>
<div class="gg-t-light-pink">
  <section class="gg-o-page-section">
    <p>light-pink theme and a <a href="#" class="gg-u-link">link</a></p>
  </section>
</div>