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>

<p>
  Lucy is a pink starfish that can glow underwater. She's kind and nice, though
  a bit clumsy sometimes. Strawberry is her favourite ice cream flavour. Lucy
  has a seahorse plushie.
</p>
<h4>✨ Favourite kind of programming language?</h4>
<p>Functional ones.</p>
<h4>✨ Favourite colour?</h4>
<p>all shades of pink.</p>
<h4>✨ How clumsy as Lucy?</h4>
<p>Lucy's fine, she just gets carried away for no reason sometimes.</p>

<br />

<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>
  <li><img src="/images/lucy/lucypride.svg" alt="Lucy pride" /></li>
  <li><img src="/images/lucy/lucytrans.svg" alt="Lucy trans" /></li>
  <li><img src="/images/lucy/lucylesbian.svg" alt="Lucy lesbian" /></li>
  <li><img src="/images/lucy/lucygay.svg" alt="Lucy gay" /></li>
  <li><img src="/images/lucy/lucybi.svg" alt="Lucy bi" /></li>
  <li><img src="/images/lucy/lucywasm.svg" alt="Lucy Wasm" /></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>