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>
<p>✨ Favourite kind of programming language? Functional ones.</p>
<p>✨ Favourite colour? all shades of pink.</p>

<ul class="lucys">
  <li>
    <img
      src="/images/lucy/lucy.svg"
      title="Lucy"
      alt="A five pointed pink cartoon starfish with a simple smile"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyhappy.svg"
      title="Lucy happy"
      alt="Lucy but smiling so much her eyes are scrunched up"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucydebugfail.svg"
      title="Lucy debug fail"
      alt="Lucy staring at a laptop with a blank expression on her face"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyglow.svg"
      title="Lucy glow"
      alt="Lucy but glowing brightly"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucymail.svg"
      title="Lucy mail"
      alt="Lucy holding out an envelope"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucynull.svg"
      title="Lucy null"
      alt="Lucy but faded out with a dotted outline, as if she's vanishing"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucysleep.svg"
      title="Lucy sleep"
      alt="Lucy with her eyes closed"
    />
  </li>
  <li>
    <img
      src="/images/lucy/superlucy.svg"
      title="Superlucy"
      alt="Superlucy, showing off her shimmer power"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucypride.svg"
      title="Lucy pride"
      alt="Lucy but the rainbow colours of the pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucytrans.svg"
      title="Lucy trans"
      alt="Lucy but the colours of the trans pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucylesbian.svg"
      title="Lucy lesbian"
      alt="Lucy but the colours of the lesbian pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucysapphic.svg"
      title="Lucy sapphic by @hqnna"
      alt="Lucy but the colours of the sapphic pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucygay.svg"
      title="Lucy gay"
      alt="Lucy but the colours of the men-loving-men pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucybi.svg"
      title="Lucy bi"
      alt="Lucy but the colours of the bisexual pride flag instead of pink"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucywasm.svg"
      title="Lucy Wasm by Danielle Maywood"
      alt="Lucy wearing little blue trousers with a 'WASM' on them in the style of the WASM logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyjs.svg"
      title="Lucy JS by Danielle Maywood"
      alt="Lucy wearing little yellow trousers with a 'JS' on them in the style of the JS logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyerl.svg"
      title="Lucy Erlang by Danielle Maywood"
      alt="The Erlang logo, but a pink G rather than a red E, the text 'Gleam', Lucy's cute little face on it"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucynix.svg"
      title="Lucy Nix by Danielle Maywood"
      alt="Lucy in the shape of the Nix snowflake-y logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyflake.svg"
      title="Lucy Flake by Danielle Maywood and Isaac Harris-Holt"
      alt="Lucy in the shape of the Nix Flake snowflake-y logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucygodot.svg"
      title="Lucy Godot by Danielle Maywood"
      alt="Lucy in the shape of the robot-y Godot logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyelixir.svg"
      title="Lucy Elixir by Jen Stehlik"
      alt="Lucy in the shape of the Elixir drop logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucyrust.svg"
      title="Lucy Rust by Jon Charter"
      alt="Lucy in the shape of the Rust Ferris logo"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucytiny.svg"
      title="Lucy optimized for 16x16px size by Jen Stehlik"
      alt="tiny Lucy optimized for 16x16px size"
      style="height: 16px;"
    />
  </li>
  <li>
    <img
      src="/images/lucy/lucytiny-plain.svg"
      title="black and white Lucy optimized for 16x16px size by Jen Stehlik"
      alt="tiny black and white Lucy optimized for 16x16px size"
      style="height: 16px;"
    />
  </li>
</ul>

<p>
  The original Nix logo of which the Lucy Nix images are modifications of is
  available under under a CC-BY license and is designed by Tim Cuthbertson
  (@timbertson).
</p>

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

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

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

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

  .lucys li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
  }

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