Projects / Lithium

# Visual Identity

## Symbol

The symbol is a stylized pyramid. The symbol is kept abstract in contrast to a real world _object_. It emphasizes the cleanliness and pure simplicity of the shape of both code and symbol. Within a text only context `∆` can be used to imitate the symbol.

## Typography

The font used for the _Lithium_ text is _Helvetica Medium Extended_.

## Color

The color theme is named _Lithium in Neon_. It's inspired by the colors occurring when [burning a piece of lithium](https://secure.wikimedia.org/wikipedia/en/wiki/File:Flammenf%C3%A4rbungLi.png). An external tool for playing around with the theme can be found on [this page](http://kuler.adobe.com/#themeID/630252). Following the commonly used colors.

<style type="text/css">
    .swatch {
      font-size: 0.75em;
      text-align: center;
      float: left; 
      width: 7.6em;
      border: 1px solid #000;
      margin: 3px 3px 3px 3px;
      padding: 3px 3px 3px 3px;
    }
    .swatch div { height: 50px; }
</style>

<!-- BLACKS -->

<div class="swatch">
<code>#000</code>
<div style="background-color: #000;"><!-- --></div>
</div>
<div class="swatch">
<code>#0d0d0d</code>
<div style="background-color: #0d0d0d;"><!-- --></div>
</div>
<div class="swatch">
<code>#111</code>
<div style="background-color: #111;"><!-- --></div>
</div>

<!-- GRAYS -->
<div style="clear:both;"></div>

<div class="swatch">
<code>#454545</code>
<div style="background-color: #454545;"><!-- --></div>
</div>
<div class="swatch">
<code>#666</code>
<div style="background-color: #666;"><!-- --></div>
</div>
<div class="swatch">
<code>#999</code>
<div style="background-color: #999;"><!-- --></div>
</div>
<div class="swatch">
<code>#a6a6a6</code>
<div style="background-color: #a6a6a6;"><!-- --></div>
</div>
<div class="swatch">
<code>#e5e5e5</code>
<div style="background-color: #e5e5e5;"><!-- --></div>
</div>
<div class="swatch">
<code>#e6e6e6</code>
<div style="background-color: #e6e6e6;"><!-- --></div>
</div>

<!-- WHITES -->
<div style="clear:both;"></div>

<div class="swatch">
<code>#f0f0f0</code>
<div style="background-color: #f0f0f0;"><!-- --></div>
</div>
<div class="swatch">
<code>#fafafa</code>
<div style="background-color: #fafafa;"><!-- --></div>
</div>
<div class="swatch">
<code>#fff</code>
<div style="background-color: #fff;"><!-- --></div>
</div>

<!-- BLUES -->
<div style="clear:both;"></div>

<div class="swatch">
<code>#00bbff</code>
<div style="background-color: #00bbff;"><!-- --></div>
</div>
<div class="swatch">
<code>#00a8e6</code>
<div style="background-color: #00a8e6;"><!-- --></div>
</div>
<div class="swatch">
<code>#9c62ff</code>
<div style="background-color: #9c62ff;"><!-- --></div>
</div>

<!-- REDS -->
<div style="clear:both;"></div>

<div class="swatch">
<code>#ee00ff</code>
<div style="background-color: #ee00ff;"><!-- --></div>
</div>
<div class="swatch">
<code>#d42aae</code>
<div style="background-color: #d42aae;"><!-- --></div>
</div>
<div class="swatch">
<code>#ff59ff</code>
<div style="background-color: #ff59ff;"><!-- --></div>
</div>

<!-- GREENS -->
<div style="clear:both;"></div>

<div class="swatch">
<code>#00ff3b</code>
<div style="background-color: #00ff3b;"><!-- --></div>
</div>
<div class="swatch">
<code>#4ddb4a</code>
<div style="background-color: #4ddb4a;"><!-- --></div>
</div>
<div style="clear:both;"></div>

## Logo

The text is aligned on the height of the most right corner of the pyramid. The symbol reaches into the kerf of the text. Within a text only context `∆ Lithium` can be used to imitate the logo.

<img style="padding:1em;" src="http://li3.rad-dev.org/img/lithium-large.png" /> 

## Powered By

Small buttons for promoting Lithium. The typeface used is [Silkscreen by Jason Kottke](http://www.kottke.org/plus/type/silkscreen/).

<img style="padding:1em;" src="http://imgur.com/6eddU.gif" alt="Li3 Powered" />
<img style="padding:1em;" src="http://imgur.com/F3oHB.gif" alt="Li3 Powered" />

## Backgrounds

A [Simple gradient background](http://imgur.com/oDGOHl.jpg).