Wavelength

The Wavelength mark

A square wave whose steps spell W. It is also a melody: five steps, five notes.

A4A3E4A3A4
Rendered by Wavelength on a square wave, from the steps' own heights.

One line, three readings

A waveform

The square wave is the simplest waveform a synthesizer makes, and the lead voice of NES music. The flat ends are the silence Wavelength puts before and after every song.

Loudness of DawnbreakerIntro -15.3 LUFS, Groove -13.4 LUFS, Main -12.2 LUFS, Breakdown -16.4 LUFS, Build -16 LUFS, Drop A -11.5 LUFS, Drop B -11 LUFS, Outro -13 LUFS, Outro 2 -18.4 LUFS

A loudness contour

Wavelength reports a song as one loudness level per section, drawn as steps. The mark is drawn the same way, like Dawnbreaker above.

A letter

High, low, middle, low, high: the strokes of a W, drawn only with right angles.

Construction

24444422.5silence

The mark sits on a grid 24 units wide and 18 high. Every edge lands on a quarter unit.

  • Stroke: 2.5 units, square corners, flat ends.
  • Steps: 4 units wide. Tails: 2 units, on the centre line.
  • Levels: top, floor and middle, centred at 4.25, 19.75 and 10.
  • Clear space: one step (4 units) on every side, the shaded area.
  • Smallest size: 24 px wide. Below that, use the icon.

Icon

On a cobalt tile for app icons and browser tabs. At 16 px the mark is redrawn as pixel art, with every edge on a whole pixel, rather than scaled down until it blurs.

180 px
64 px
32 px
16 px, drawn pixel by pixel The 16 pixel favicon at actual size

With the name

The name is set in Anybody at weight 700 and 120 % width, one step from the mark. The mark is 1.35 times the capital height.

Wavelength logo, cobalt mark and ink name
Wavelength logo in white
Wavelength logo in white on cobalt

Colour

Cobalt is for the mark and for things you can press. Amber is only ever a measurement. Each colour has a dark-mode partner.

  • Cobalt #2f4be0 #93a4ff dark The mark, links and buttons.
  • Ink #1a1c2b #e4e7f0 dark Text, and the mark in one colour.
  • Paper #eceef3 #151826 dark The ground everything sits on.
  • Amber #e39a0b #f2b33d dark Measurements: loudness contours and focus rings.
  • Slate #5b6173 #9aa1b6 dark Secondary text and captions.

Type

Loud Loud Loud

Anybody for headings. Its width axis runs from 50 to 150 %; the home page's wordmark takes each letter's width and weight from a song's loudness.

Notes in beats, sounds by preset name, one JSON file.

Instrument Sans for everything you read.

wavelength render job.json

JetBrains Mono for code and commands.

Keep it square

The mark is a measurement as much as a shape, so it is never softened, tilted or re-proportioned.

  • Rounded corners
  • Tilted
  • Uneven steps
  • Outlined

Files

Everything below, with the sting and Anybody's licence, in one download.

Download the brand kit (130 KB)
FileUseSize
wavelength-mark-cobalt.svgThe mark in cobalt274 bytes
wavelength-mark-ink.svgThe mark in ink, for one-colour print274 bytes
wavelength-mark-white.svgThe mark in white, for dark or cobalt grounds274 bytes
wavelength-lockup-ink.svgMark and name for light grounds11 KB
wavelength-lockup-white.svgMark and name for dark grounds11 KB
wavelength-lockup-mono-ink.svgMark and name in ink only11 KB
wavelength-icon.svgApp icon on cobalt380 bytes
wavelength-icon-512.pngApp icon, 512 px8 KB
apple-touch-icon.pngHome-screen icon, 180 px3 KB
favicon-16.svgFavicon drawn for 16 px324 bytes
wavelength-sting.mp3The mark played, 4.6 s110 KB