branding.html

---
title: Gleam's Branding
subtitle: All pretty and pink 💖
layout: page
---

<h2>Gleam's favourite colours</h2>

<ul class="colours flat-list">
  <li>
    <span style="background-color: #ffaff3"></span>
    <code>#ffaff3</code>
    Faff Pink
  </li>
  <li>
    <span style="background-color: #fefefc"></span>
    <code>#fefefc</code>
    White
  </li>
  <li>
    <span style="background-color: #a6f0fc"></span>
    <code>#a6f0fc</code>
    Unnamed Blue
  </li>
  <li>
    <span style="background-color: #fffbe8"></span>
    <code>#fffbe8</code>
    Aged Plastic Yellow
  </li>
  <li>
    <span style="background-color: #584355"></span>
    <code>#584355</code>
    Unexpected Aubergine
  </li>
  <li>
    <span style="background-color: #292d3e"></span>
    <code>#292d3e</code>
    Underwater Blue
  </li>
  <li>
    <span style="background-color: #2f2f2f"></span>
    <code>#2f2f2f</code>
    Charcoal
  </li>
  <li>
    <span style="background-color: #1e1e1e"></span>
    <code>#1e1e1e</code>
    Black
  </li>
  <li>
    <span style="background-color: #151515"></span>
    <code>#151515</code>
    Blacker
  </li>
</ul>

<h2>Lucy, Gleam's starfish mascot</h2>

<ul>
  <li>Lucy likes strawberry ice cream.</li>
  <li>Lucy lives underwater, but she's happy on land too.</li>
  <li>Lucy is kind.</li>
  <li>Lucy is nice.</li>
  <li>Lucy has a seahorse plushie.</li>
  <li>Lucy can glow, but only underwater.</li>
  <li>Lucy is welcoming.</li>
  <li>Lucy's middle name is Astra.</li>
</ul>

<ul class="lucys">
  <li><img src="/images/lucy/lucy.svg" alt="Lucy" /></li>
  <li><img src="/images/lucy/lucyhappy.svg" alt="Lucy happy" /></li>
  <li><img src="/images/lucy/lucydebugfail.svg" alt="Lucy debug fail" /></li>
  <li><img src="/images/lucy/lucyglow.svg" alt="Lucy glow" /></li>
  <li><img src="/images/lucy/lucymail.svg" alt="Lucy mail" /></li>
  <li><img src="/images/lucy/lucynull.svg" alt="Lucy null" /></li>
  <li><img src="/images/lucy/lucysleep.svg" alt="Lucy sleep" /></li>
</ul>

<style>
  ul {
    list-style: none;
    padding: 0;
  }

  .colours li {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .colours span {
    display: inline-block;
    height: 64px;
    width: 64px;
  }

  .lucys {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: space-between;
  }

  .lucys li {
    display: inline-block;
    margin: 1em;
  }

  .lucys img {
    height: 165px;
  }
</style>