Create basic branding assets and set UX primitives

[debloper]

• [x] Design a logo that's expressive yet simple
  • Needs to retain the Lambda symbol of Linque
  • Needs to schematically read X
  • Needs to incorporate the theme of splitting streams
  • Needs to be legible at square dimension range of 16x16 to 1024x1024
  • Needs to be simple enough to be doodled
  • Needs to be remixable as a live-logo
  • Needs to retain full identity even in its monochrome version
• [x] Settle on a color palette for the brand identity
  • Consider the primary audience as young-adults (distribution plateau of age 20-30 years)
  • Consider the expression to be of cool (warm, not hot), confident (bold, not arrogant) spectrum
  • Consider experimental edges, as the branding is (likely) to be readjusted in near future
• [x] Settle on typefaces
  • Typeface for brand assets (optional)
  • Typeface for titles (Narrow, Semibold, Sans-serif)
  • Typeface for body (Humanist, Thin, Sans-serif preferred)
  • Typeface for special cases (Humanist, Italics, Serif)
• [x] Settle on icons (icon-fonts)
  • Referrence: https://tagliala.github.io/vectoriconsroundup/

[debloper]

A programmatic version of the new logo envisioned with SVG.js

var draw = SVG('xplex')

draw
  .polyline('2,2 16,2 30,16 30,34 48,34 62,48 62,62 48,62 32,46 16,62 2,62 2,48 18,32 2,16 2,2')
  .attr({
    fill: '#6B4E71',
    stroke: '#6B4E71',
    'stroke-width': '4',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })

draw
  .polyline('62,2 62,16 48,30 34,30 34,16 48,2 62,2')
  .attr({
    fill: '#eee',
    stroke: '#eee',
    'stroke-width': '4',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round'
  })

Which renders into a cleaned up SVG as:

<svg id="xplex" version="1.1"
    width="64" height="64" viewBox="0 0 64 64"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.com/svgjs">
  <polyline
      id="lambda" fill="#6b4e71" stroke="#6b4e71"
      stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
      points="2,2 16,2 30,16 30,34 48,34 62,48 62,62 48,62 32,46 16,62 2,62 2,48 18,32 2,16 2,2">
  </polyline>
  <polyline
      id="ingest" fill="#eeeeee" stroke="#eeeeee"
      stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
      points="62,2 62,16 48,30 34,30 34,16 48,2 62,2">
  </polyline>
</svg>

Which looks like this (with presentation wrappers):

Ignore colors as the color palettes hasn't been finalized; only for the shape and schematic representation.

[kaustavdm]

What about the stuff here? Hadn't you mostly agreed to this for the branding and logo?

[debloper]

I did, because at that moment I didn't have anything better in mind.

[debloper]

Draft color palette(s):

Apathy: #cccccc, #001111, #eeeeee

Bliss: #aaddcc, #008877, #eeffff

Ecstasy: #fffdd0, #800030, #141012

Pacific: #ccffcc, #306030, #80c080

Royale: #eeeeee, #6b4e71, #1f252b

Swelter: #fffdd0, #7f0000, #110000

[debloper]

Turns out, Royale wins the color palette battle for the time being: #eeeeee, #6b4e71, #1f252b

[debloper]

Typeface for brand assets (optional): Unica One Typeface for titles (Narrow, Semibold, Sans-serif): Alegreya Sans Typeface for body (Humanist, Thin, Sans-serif preferred): Roboto Typeface for special cases (Humanist, Italics, Serif): Bilbo Swash Caps

[debloper]

Let's use octicons for icons.

It's not an icon-font, but a package of SVGs, which can be cherry-picked for distribution and has no overheads.

Fuck that... Material Design Icons it is. Also allows using SVGs.

[dolftax]

I like Apathy better. Heh.

[debloper]

I like Apathy better. Heh.

So do I.

[kaustavdm]

SVG rules :-D

My only concern here is typography. Loading 3 font assets can impact page load. So proceed with caution.